XHTML و CSS الجزء 2

سلسلة دورة CSS و XHTML

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

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

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

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

سأركز على عمل شكل كهذا

ملاحظة: إذا وجدت صعوبة في مواكبة خطوات الدرس بإمكانك تحميل الملف المفتوح في آخر الموضوع ومتابعة ومراجعة النقاط لكي تسهل عليك وتتضح

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

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

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

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

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

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

تعمدت أن أظهر هذا الخطأ لكي نتعلم منه دائماً عندما ترى نتيجة سلبية يجب عليك مراجعة الكود جيداً ويجب طبعاً أن تكون لديك أساسيات ذلك, عموماً هذه الخطوة يجب عليك فهمها لأنها مهمة في عالم كود الـ XHTML و الـ CSS

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

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

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

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

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

.clear {
clear:both;
}

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

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

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

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

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

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

يمكنك تحميل نتيجة هذا العمل من هنا

تقبلوا أطيب تحياتي وأرجو أن أكون قد أفدتكم وتابعونا في الدرس القادم, وشكراً.

تم طرح الدرس الثالث ←