103 تصميم المواقع – الفصل بين المحتوى والتصميم

بعد أن عرفنا أن الموقع يتكون من المحتوى والتصميم، سنناقش في هذه المقالة فكرة الفصل بين المحتوى والتصميم.

الفصل بين المحتوى والتصميم الذي نتحدث عنه هو من جهة المصمم -أو المطور- وليس من جهة زوار الموقع، كما قد يتبادر إلى الأذهان. حيث يكون هذا الفصل -تحديداً- بين هيكل الصفحة المتمثل في XHTML وطريقة عرض أو تقديم الصفحة المتمثلة -بشكل أساسي- في CSS.

ما هو CSS؟

هو عبارة عن لغة بسيطة وضعت للتحكم في طريقة تقديم محتوى صفحات المواقع، وذلك باستخدام XHTML Tags، واستخدام Classes يتم تعريفها من قبل المطور لتستخدم في وسط XHTML Tags.

كيف يكون الفصل بين المحتوى والتصميم؟

يكون الفصل بين المحتوى والتصميم بغياب أي عنصر متحكم في طريقة التقديم –بحد ذاته- من المحتوى. من أمثلة هذه العناصر: <font> و <span style=”color:#000000;”>.

لماذا نفصل؟

قد يتساءل البعض لماذا نتعب أنفسنا بكل ذلك ولا نترك طريقة التقديم مع المحتوى في كل صفحة؟ الجواب أننا كمطورين وكمستخدمين للمواقع سنستفيد أكثر بفصل المحتوى عن التصميم. وذلك لأسباب من جهة المطور والمستخدم كما يلي:

فمن جهة المطور

يسمح -الفصل – بالتركيز على المحتوى ثم على التصميم كلاًّ على حدة في وقت التطوير، كما يسهل الصيانة لاحقاً، فإذا أردت شيئاً في المحتوى نظرت إلى XHTML ، وإذا أردت في التصميم شيئاً نظرت إلى CSS ، وبالتالي توفر الكثير من وقتك.

ومن جهة المستخدم

يسمح -الفصل – بوصول معلومات الموقع لشريحة أكبر من المستخدمين، ويعود الفضل في ذلك لمزايا CSS في تجهيز أكثر من طريقة تقديم للموقع الواحد، وذلك حسب الوسط المستخدم مثل: التصفح العادي على الشاشة، ونسخة أخرى للطباعة، والجوال، وبرامج قراءة المواقع للمكفوفين. ومن فوائد استخدام هذه التقنية سرعة تنزيل الصفحة، وذلك لخلوها من عناصر التحكم بالتصميم المتكررة –كالـ <font> – والتي يتم استبدالها بتعريف واحد في CSS يربط به في XHTML بيسر. مثال: بدل أن أكرر <font color=”red”> لكل رسالة تحذيرية، بإمكاني تعريف Class لكل النصوص التحذيرية:.warning{color:red} وبعد ذلك ربط كل نص تحذيري بهذا التصنيف: <p class=”warning”>.

Table أم Div لهيكل الصفحة

من أفضل ما قدمته تقنية CSS هي القدرة على الاستغاء عن استخدام <table width=”…> كطريقة لتشكيل هيكل الصفحة (Layout)، وطرح البديل <div> الذي يعتبر العنصر الصحيح للاستخدام في هذا الغرض، كما هو مذكور في نصائح W3. ومن فوائد استخدام <div> بديلاً لـ <table> زيادة سرعة تصفح الصفحات، وسهولة قراءة محتوياتها من جهة محركات البحث، بالإضافة لسهولة قراءة XHTML الصفحة عند الصيانة.

هذا اختصار لموضوع الفصل بين المحتوى والتصميم وليس بتفصيل كامل، لذا أرحب بآرائكم وتعليقاتكم أدنى الصفحة.

والسـلام

13 تعليق على “103 تصميم المواقع – الفصل بين المحتوى والتصميم

  1. تنبيه: المشروع » الفصل بين المحتوى والتصميم

  2. بصراحة موضوع رائع .. أعجبني
    الشرح واضح …

    من وجهة نظري أخي الكريم إنه صارت الـ (CSS) هي الكل في الكل .. يعني التعب في الـ(CSS) هو اللي بيطلع كل شي في مكانه و وضعيته الصحيحة .. طبعاً مع معرفة جيدة بالأساس (XHTML) و لغة برمجة ويب .
    هذا مجرد رأي .. قد يكون خاطئ.

    تحياتي و تقديري

  3. تنبيه: » 104 تصميم المواقع - الخطوات العملية لمشروع تصميم موقع - توقيع

  4. السلام عليكم ..شكرا على هذا الموقع الجميل وعاشت ايدكم واني محتاج مساعده منكم ممكن اضيفوني على بريد الالكتروني ؟ تحياتي لكم بل نجاح

  5. تنبيه: دورة CSS - الدرس الأول « [ إحســــان ]

  6. مقاله جميلة
    وهى بداية مميزة لمن يريد أن يتعمق فى فصل المحتوى عن التصميم
    أكثر نقطه ستفيد الكثيرين فى هذا الشأن ،، هو عند التعديل

    تخيل لو أنك تريد أن تغير لون الخط فى صفحات موقعك !!
    ستبحث عن كل كود () خاص باللون وتقوم بإستبداله بكود اللون الجديد ،، وكذلك حجم الخط ،،
    تخيل لو أن عدد صفحات موقعك 500 صفحة !!

    Css هو الحل المناسب – وبتغيير سطر واحد يتغير كل شىء

    أخيراً شكراً لكاتب المقال على نشر الفائده
    تحيتى لك

أضف تعليقاً

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *