[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]نود أن نكمل الدرس لنحاول أن نتطرق إلى النقاط التالية:
- إضافة قائمة جانبية ثانية إلى اليسار (Left Side)
- إضافة جزء سفلي (Footer)
- إضافة قائمة علوية (Header Menu)
- إضافة قائمة سفلية (Footer Menu)
وسنتطرق إلى المزيد من النقاط الأخرى كعمل إطارات وعمل أزرار بخلفية جميلة وعند تمرير الفأرة يتم تغيير صورة الخلفية بأفضل طريقه وغيرها الكثير والكثير…
سأركز على عمل شكل كهذا
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]ملاحظة: إذا وجدت صعوبة في مواكبة خطوات الدرس بإمكانك تحميل الملف المفتوح في آخر الموضوع ومتابعة ومراجعة النقاط لكي تسهل عليك وتتضح
نبدأ بسم الله سنقوم حالياً بتطبيق الجزء السفلي أولاً وما يسمى بالـ (Footer), يجب عليك ومتابعة آخر نسخة من عملنا في الجزء الأول لتتابع الجزء هذا, وكل ما علينا لإضافة Footer هو إضافة الكود التالي في نهاية جسم الصفحة وعندما أقول في نهاية جسم الصفحة أي أنه قبل لأنه هو جسم الصفحة التي يتم إظهار فيه المحتوى فيجب علينا دائماً كتابة الأكواد بين الوسمين و والكود هو كالتالي:
PHP كود :
<div id="footer">
<!-- هنا محتوى الجزء السفلي -->
</div>
بعدها يمكننا بكل بساطة عمل أي شي في الجزء السفلي باستخدام CSS وذلك من خلال #footer مثل إضافة صورة خلفية أو حدود أو تباعد أو نوع الخط أو ألوان الروابط فيه … إلخ
لنقل أنك قمت بتصميم هذه الخلفية باستخدام الفوتوشوب باسم footer_bg.gif وحفظتها داخل مجلد images في موقعي
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]حسناً الآن لدينا صورة الخلفية للجزء السفلي سنقوم بعرضه باستخدام CSS وذلك كالتالي:
PHP كود :
#footer {
background:url(images/footer_bg.gif);
height:56px;
}
اللآن الجزء السفلي ممتاز بالكود الذي تم كتابته ولكن سترى النتيجة التي لا تسرك كالتالي:
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]تعمدت أن أظهر هذا الخطأ لكي نتعلم منه دائماً عندما ترى نتيجة سلبية يجب عليك مراجعة الكود جيداً ويجب طبعاً أن تكون لديك أساسيات ذلك, عموماً هذه الخطوة يجب عليك فهمها لأنها مهمة في عالم كود الـ XHTML و الـ CSS
عندما أردنا أن جعل القائمة الجانبية اليمنى والمحتوى بجانب بعض مع أنهما وسوم div التي دائماً تكون تحت بعض فقد استخدمنا float:right في الدرس الأول والذي يعني باللغة العربية تعويم فإذا كان أي شي عائم لابد وأن يكون هناك ما يعوم حوله كالغواصة عندما تعوم ويكون بجانبها أعماق البحر هذا التعويم عند إضافته يجب أن يتوقف في حدود أنت تحددها لنرى ذلك من خلال الصورة التوضيحية التالية:
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]ستلاحظ أن content يجب أن يكون لديه بجانبه عنصر عائم من حوله وذلك بسبب أنه يحمل الخاصية float, فيجب عليك إيقافه بعد الإنتهاء منه من خلال إضافة وسم جديد وإعطاءه الخاصية clear بالـ CSS كالصورة التوضيحية التالية:
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]بشكل تطبيقي الآن نضيف الوسم التالي قبل وسم الفوتر الذي أضفناه قبل قليل:
PHP كود :
<div class="clear"></div>
ليصبح هو والجزء السفلي كالتالي:
PHP كود :
<div class="clear"></div>
<div id="footer">
<!-- هنا محتوى الجزء السفلي -->
</div>
الآن نتجه إلى ملف style.css كما تم توضيحه في الصورة السابقة ونضيف السطر التالي بإمكانك جعله في آخر سطر أو أي مكان
PHP كود :
.clear {
clear:both;
}
الآن لنرى النتيجة:
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]جميل جداً الآن وطبعاً كل ما قمت بتنسيق الموقع أكثر كل ما كان أفضل فمثلاً هذه المنطقة يفضل عمل مسافة علوية بسيطة في الجزء السفلي فسأقوم بتعديلها من خلال الـ CSS
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]الكود الخاص بإضافة مسافة بسيطة في الأعلى من الجزء السفلي (footer) من خلال style.css كالتالي:
PHP كود :
#footer {
background:url(images/footer_bg.gif);
height:56px;
margin-top:10px;
}
وطبعاً الجزء الذي أضفناه فقط ( margin-top:10px; ) لتصبح النتيجة كالتالي:
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]في الدرس التالي سنقوم بتكملة الدرس وسنتطرق إلى القائمة الجانبية التي على يسار الموقع لتكون لدينا قائمتين جانبيتين واحدة على اليمين والثانية على اليسار حيث أن هذه النقطة تم طلبها كثيراً وهي فعلاً نقطه مهمة سنقوم بتعلمها باستخدام المعايير القياسية وبدون استخدام الجداول بالكامل.
يمكنك تحميل نتيجة هذا العمل من المرفقات
المصدر:
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط] الفرعون المصرى
