في المقالة الماضية حول الجداول تحدثت عن:
عندما بدأنا نرى دعوات لاستخدام المعايير القياسية في تطوير المواقع بدأت النقاشات تدور حول الطريقة الصحيحة لتصميم المواقع، وقد كان النقاش غالباً يدور حول استخدام الجداول لإنشاء التصاميم وكيف يمكن استبدالها، مع تكرار هذه النقاشات وتعمقها في التفاصيل ظن البعض أن الجداول يجب ألا تستخدم أبداً بأي شكل، وهذا أمر غير صحيح، الجداول جزء من المعايير القياسية إن استخدمت للغرض الذي صممت له وهو عرض البيانات.
ماذا يعني ذلك؟ ببساطة إذا أردت أن تعرض بيانات مجدولة فعليك أن تستخدم جدولاً، فمثلاً تصور أنك تريد المقارنة بين مواصفات سيارتين، يمكنك أن تفعل ذلك في جدول، فكل سيارة لها عمود خاص وكل صف يتعلق بإحدى المواصفات، فالصف الأول مثلاً يذكر نوع المحرك وقوته، الصف الثاني يقارن سرعة السيارة وهكذا.
بعد أن عرفنا أن الموقع يتكون من المحتوى والتصميم، سنناقش في هذه المقالة فكرة الفصل بين المحتوى والتصميم.
الفصل بين المحتوى والتصميم الذي نتحدث عنه هو من جهة المصمم -أو المطور- وليس من جهة زوار الموقع، كما قد يتبادر إلى الأذهان. حيث يكون هذا الفصل -تحديداً- بين هيكل الصفحة المتمثل في XHTML وطريقة عرض أو تقديم الصفحة المتمثل -بشكل أساسي- في CSS.
لم أرغب في إضافة المزيد من تقنيات CSS، لأن الدروس هذه كان هدفها لفت نظر المصممين إلى الأسلوب الجديد في التصميم، بكل تأكيد تصاميم CSS تختلف عن التصاميم العادية التي يستخدم فيها الجداول، ربما تكون تصاميم CSS بسيطة وأقل جمالاً، لكنها أكثر فعالية وفائدة على المدى الطويل، لذلك عليك أن تفكر أخي المصمم أن تتبنى هذه التقنية لتصميم المواقع، خصوصاً مواقع المؤسسات الحكومية والخاصة، كذلك المواقع المتخصصة، وكل موقع يهتم بالمحتويات في المقام الأول عليه أن يصمم الموقع بتقنية CSS، أما المواقع الشخصية والفنية فالمجال أمامها مفتوح لتبني أي تقنية.
بداية، أرجو أن تقوموا بتنزيل الملف التالي:
ملف مرفق للـ css
والذي يحوي هذه الملفات:
هذا درس عملي وسهل ويحل مشكلة بسيطة لكنها مزعجة، وهي حجم ونوع الخط، فعادة ما يختار المصمم خطاً معيناً لموقعه، وعندما يأخذ آراء الزوار في الموقع فربما يجد بعض التعليقات مثل: الخط كبير جداً، أو الخط صغير جداً! ويمكن حل هذه المشكلة عن طريق CSS وجافاسكربت، وبأسلوب سهل.
بداية، أرجو أن تقوموا بتنزيل الملف التالي:
ملف مرفق للـ css
والذي يحوي هذه الملفات:
هذا التصميم الجديد مطور قليلاً عن التصميم السابق، قمت بحذف المساحة الجانبية sidenav والتي رأيناها في التصميم الأول، كانت هذه المساحة مجرد مثال فقط لا غير، الآن في هذا الدرس سنضع شعاراً في التصميم، وكذلك روابط لأربعة صفحات وفقرات تحتوي كل منها على رابط، وأخيراً مساحة أسفل الموقع لوضع ملاحظة “جميع الحقوق محفوظة”.
بداية، أرجو من كل مهتم بهذه الدروس أن يقوم أولاً بتنزيل الملف:
ملف مرفق للـ css
والذي يحوي هذه الملفات:
التصميم هذا قمت بعمله خلال دقيقتين أو أقل، وهو بدون أية جداول، ولو افترضت أنني استخدمت جداولاً لعمل هذا التصميم، لاحتجت إلى جدولين، فيهما 6 أعمدة وصفوف، ثم سأحتاج إلى عمل جداول داخل هذان الجدولان لوضع المحتويات حيث أريد، CSS تقوم بهذه المهمة بشكل أسهل، ففي CSS تقوم بإنشاء صناديق (إن صح التعبير) تحدد أنت حجمها طولاً وعرضاً، وتحدد أين يجب أن تظهر في الصفحة، وتستطيع أن تحدد لونها ولون الإطار، ونوع الخط المستخدم في محتوياتها، وكل هذا في ملف واحد، تطبقه على جميع صفحات الموقع.
