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; ) لتصبح النتيجة كالتالي:

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

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

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

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

  • شرح في قمة الروعة
    بارك الله فيك أخي عبد الملك
    ربي يحفظك و يحفظ كل من يسهر على عالم التقنية
    بالتوفيق لك أخي
    و تحياتي لك
    أخوك أزهر

  • عبدالله

    السلام عليكم ورحمة الله وبركاته

    بارك الله فيك يااستاذ عبدالملك الثاري

    درس رائع … بإنتظار الدرس القادم

  • بارك الله بك عزيزي عبدالملك

    مجهود جميل

  • شكراً جزيلاً اخ عبدالملك استأذنك بسؤال اذا كنت تسمح لي .

    انا قمت بعمل وسم calss حيث هو عبارة عن صورة حددتها في أعلى الصفحة .
    بعد ان قمت بالتقسيم , ارغب في حال ضغط الزائر على الصورة ان يتم توجيهه لصفحة آخرى . هل هناك طريقة معينة .

    هذا الوسم مثل
    .R2 {
    background-image: url(‘images/t/t-1_03.gif’);
    float: right;
    height: 246px;
    width: 343px;
    background-repeat: no-repeat;
    left: 100%;
    }

    وهذا التصميم

    ( هنا هل استطيع اضافة طريقة لتحويل لرابط .

    • هذا التصميم

    • للأسف أخوي عادل مو واضح سؤالك اخاف ماقدرت تضيف السؤال زين من خلال التعليقات تقدر تراسلني althari22 آت جيميل بالتفاصيل وبشكل اوضح لأتمكن من الإجابة لك

      تقبل اطيب تحياتي

    • أعتقد أنني فهمت سؤالك أخوي عادل

      والذي تريده هو تحويل وسم فيه خلفيه إلى رابط , كنت قد كتبت في التدوينة انه سيتم التطرق لهذه الطريقة لاحقاً وأيضاً عند تمرير الفأره يتم تغيير الصورة في الرابط كذالك لتظهر بصورة جذابة جداً, لا أريد التشتت حالياً بطرح الجواب ارجوا ان يكون السؤال حالياً في حدود الدرس حتى نصل لتلك المرحلة وحيث ان هذه النقطه تحتاج لشرح مفصل ولكن باختصار سأخبرك وبإذن الله اكون قد ساعدتك بها كل ما عليك هو تحويل هذا الوسم إلى <a> اي وسم رابط ثم جعله بمقاس نفس مقاس المكان الذي تريده كالهيدر او غيره كقائمة علوية بها صورة خلفية اي يكون للرابط عرض وارتفاع ولكن يجب لكي تجعل للرابط عرض وارتفاع ان يكون فيه خاصية السي اس اس (display:block) لكي يتماشا بالعرض والإرتفاع بصورة طبيعية وكذالك خاصية float:right إذا كنت تريد ان يكون بجانبه هذا الرابط عناصر أخرى اتمنى ان افدتك وسنتطرق إلى هذه النقطه بدرس وشرح مفصل وبالصور وبشكل معمق بإذن الله

      شكراً لك

  • والله درس رااائع جدا جدا جدا

    استفذت كثيييير من

    .clear {
    clear:both;
    }

    لاني ما كتن اعرفها من قبل وكانت تواجهني هذه المشكلة دائماً

    الف الف شكر لك أخوي عبدالملك

    ونتظر المزيد منك بأسرع وقت

  • درس رائع جداً هو و الجزء اﻷول , بارك الله فيك و أفدتني كثيراً .

    تحياتي
    فراس

  • شكراً لكم جميعاً

  • السلام عليكم ورحمة الله وبركاته..
    مبدع كعادتك أخي عبد الملك ولا تحرم غيرك مما علمك الله.. فجزاك الله عنا كل خير..
    أهم خاصية في هذا الدرس هي الوسم clear لأنه يجنبنا الكثير من المشاكل في وضع الأجزاء في الصفحة عندما نستعمل الخاصية float كما وضحت أخي العزيز..
    عبارة لك جعلتني أبتسم حينما قلت:
    “لنقل أنك قمت بتصميم هذه الخلفية باستخدام الفوتوشوب ”
    أليس هناك غير الفوتوشوب؟ ^_^ شخصيا بت أستعمل Gimp لأنه حر ومجاني، فلا طاقة لي على شراء الفوتوشوب، وقد عاهدت نفسي على عدم استعمال البرامج المقرصنة (فهي سرقة)..
    عذرا على هذا الفاصل يا غالي، ومني لك أرق تحية..

    • مرحباً اخوي عبدالهادي شكراً لك على هذه الإضافة والفاصل , وفعلاً من اهم النقاط فيجب ان تكون في الحسبان دائماً, بالنسبة لبرنامج التصميم فهناك أكيد الكثير والكثير غير فوتوشوب في الأخير حتى لو كان التصميم للصورة بورقه وقلم بدون استخدام الكمبيوتر ونسخها بالسكانر فهناك من يفعل ذالك من المصممين 🙂 في الأخير انت تنشأ صورة ولكن طبعاً من اشهر البرامج هو الفوتوشوب لذالك طرحت الفوتوشوب ولكن هناك ايضاً برامج أخرى كثيرة مشهورة مثل كورل درو وبينت برو وقيمب كما طرحت 🙂

      شكراً لك على هذا الفاصل الجميل

  • يوسف العتيبي

    السلام عليكم

    بارك الله فيك اخوي على هذا المجهود الكبير

    وان شاء الله سيتم تطبيقه بعد نهاية الأختبارات بأذن الله

    بالتوفيق لك أخوي

  • الأخ العزيزي عبدالملك ..

    اشكرك جزيل الشكر والتقدير على التوضيح ..

    لا املك لك غير الدعاء في هذا اليوم الفضيل .

    اسئل الله لك التوفيق والسعادة في الدنيا والآخرة .

    اخوك عادل .

  • محمد سرحان

    أخونا المبدع عبد الملك

    جزاك الله خيرا

  • زينة

    أولاجزاكم الله خيرا على هذا الشرح المبسط سهل الفهم علينا
    لى عند حضرتك سؤال فانا درست العديد من برامج الجرافيك
    ومنها الفوتوشوب طبعا كما درست الHTML بشكل ليس عميق وكذلك درست الREAMWEAFER بشكل سطحى ايضا
    فهل يكفينى ان اتعمق فى الHTML,REAMWEAFER
    ام انه من الضرورى دراست الCSS
    وذلك لأنى اسعى لأحتراف تصميم المواقع
    وكم يلزمنى من الدروس التى تقدمها حضرتك لأصل للأحتراف
    وهل من برامج اخرى تلزمنى

  • شكراً لكم جميعاً وبارك الله فيكم على المرور الطيب

    اخت زينة , هل REAMWEAFER هو ما تقصدين بـ DREAMWEAVER لأنه لا اعرف ما يسمى بـ REAMWEAFER

    لكن عموماً إذا كنتي تريدين إحتراف تصميم المواقع فيجب عليك إحتراف الـ CSS وهي شيقه جداً ويجب عليك لاحترافها كسب الخبرة ولكسب الخبرة يجب عليك ممارستها بشكل كبير جداً فكل ما عليك لاحترافها هو ممارستها بشكل كبير بعمل مواقع باستخدام الـ CSS من خلال ملف style.css وبإذن الله نكون نفيدك بهذه الدروس المطروحة في عالم التقنية

    اطيب تحياتي لك

  • درس واضح جداً وسهل
    الله يجزاك خير أخوي عبدالملك على هالطرح المميز والسهل .

  • مبدع يا عبدالملك

    الله لايحرمك الاجر ويجمعني فيك في جناته

    تحيتي لك ،،

  • علي

    حياكم الله
    درس اكثر من رائع

  • جزاك الله خيراً انا بجد استفدت فى التطبيق ياريت نشوف الدرس القادم قريباً

  • كم انت جميل يا عالم التقنية
    وسوف اربط موقعي بموقعكم ان شاء الله

  • أكرم الشرجبي

    الله يبارك فيك

  • يوسف العتيبي

    جزاك الله خير أخي الكريم

    هناك رموز لم افهمها حينما قمت بتحميل الملف

    .side_menu, .side_menu h2, .side_menu li, .side_menu li ul, .side_menu li ul li

    ماذا يعني:
    li – li ul – li ul li

    آمل منك انك توضح لي هذه
    واتمنى اي ما اكون ازعجتك .

    واسأل الله لك التوفيق,,,

  • و الله العظيم دروس و لا اروع و جارِ التطبيق

  • omar

    جزاك الله خير على الدروس المميزة، اتمنى الاستمرار في هذا العمل الرائع والمزيد من الدروس والامثلة، جزاكم الله خير مرة أخرى

  • اخويه عبدالملك الله يجزاك الجنة ع الشرح البسيط و الواااضح ..

    كثير استفدت منه .. الا انه عندي سؤال صغير ..

    انت لما تجي تعدل ع الـ CSS تنتقل للملف الخاص فيه .. ولا ..؟؟

    لكن انا جالسة اتدرب على قوالب البلوجر و المعروف انه مافيها ملفات و البلاوي دي الموجودة في الوورد بريس ..

    يعني قوالب البلوجر كله تحت بعض .. فسؤالي هو لما اكتب شي بالـ HTML و ابغى ازبط و اعدل بالـCSS و ين اكتبها ..تحت الـ HTML ولا ليها مكان خاص ..؟؟
    ^
    ^
    مستحيل اصير مدرسة ابدا انا و سؤالي اللي مو عارفة اشرحه خخخخخ

    و بانتظار باقي الشرح من قللب .. =D

  • شكراً لكم جميعاً على المرور 🙂

    يوسف العتيبي

    الرموز كأنها رموز تحديد أي معناه اني حددت العنصر ul li يكون بالشكل والنمط الذي تم تعيينه داخل { } وعندما اضع فاصله , أي أنه جميع العناصر التي حددتها بين الفواصل اعمل لها الأمر الذي سأنفذه داخل { } حاول ان تلعب بالكود لتفهمه وهناك صله بين اكواد الـ XHTML و الـ CSS حاول ان تقارن بينهم كيف يتم التحديد على العناصر باستخدام الـ CSS لتتضح لديك أكثر 🙂

    ري ري

    لكثرة السؤال عن هذا الأمر قمت بشرحه في الموضوع الرئيسي هنا باسم طرق استخدام الـ CSS لكي تتضح لك الطرق الممكنة لاستخدام الـ CSS 🙂 اطيب تحيتي

    http://www.tech-wd.com/wd/2009/05/04/css-and-xhtml-1/#usingcss

  • تم التطبيق ولله الحمد، يعطيك ألف عافية 🙂

تعليقات عبر الفيسبوك