CSS 3، الهدف الذي تبذل الجهود من أجل إنجازه، رغم أن CSS2 -و التي طرحت قبل حوالي 9 سنوات- لم تلق الدعم الكامل من قبل أي متصفح حتى اليوم، و من الطريف أن هناك بعض المتصفحات التي تواجه بعض المشاكل في التعامل مع بعض خصائص الـCSS 1، و للمهتمين بمعرفة جديد الـCSS3 يمكنهم زيارة صفحة CSS في منظمة W3C.
قراءة سريعة في هذه التقنية الجديدة تخبرك أنه سيتم تقسيم مواصفات الـCSS3 إلى واحدات مما سيسهل التعامل مع كل وظيفة.
لم أرغب في إضافة المزيد من تقنيات CSS، لأن الدروس هذه كان هدفها لفت نظر المصممين إلى الأسلوب الجديد في التصميم، بكل تأكيد تصاميم CSS تختلف عن التصاميم العادية التي يستخدم فيها الجداول، ربما تكون تصاميم CSS بسيطة وأقل جمالاً، لكنها أكثر فعالية وفائدة على المدى الطويل، لذلك عليك أن تفكر أخي المصمم أن تتبنى هذه التقنية لتصميم المواقع، خصوصاً مواقع المؤسسات الحكومية والخاصة، كذلك المواقع المتخصصة، وكل موقع يهتم بالمحتويات في المقام الأول عليه أن يصمم الموقع بتقنية CSS، أما المواقع الشخصية والفنية فالمجال أمامها مفتوح لتبني أي تقنية.
تحدثنا في أول جزئين من هذه السلسلة عن أفضل الطرق التي عليك اتباعها للربط بين الصفحات و لكننا لم نذكر حتى الآن الفوائد العملية التي ستجنيها من هذا.
في متصفح الديناصور المنقرض -المنقرض هو المتصفح و ليس الديناصور- Mozilla و ابتداءً من الإصدار الأول فيه كان يفهم هذا الربط ليترجمه من خلال شريط أدوات فعال اسمه تصفح الموقع Site Navigation Tool Bar (و يمكن الوصول إليه من القائمة View ثم Show/Hide) و كان متصفح Opera يفهم هذه العلاقات ابتداءً من نسخته السابعة بشريط شبيه بذلك.
تحدثنا في الجزء الأول عن الوسم <a> و استخدامه لبيان معنى الرابط و ليس لمجرد بيان العنوان، سنكمل الآن الحديث عن الربط في XHTML، سنبدأ بالوسم <link> ثم سنعرض بعض القيم التي اقترحتها منظمة W3C من أجل بيان العلاقة بين المستندات.
يستخدم الوسم <a> لنقل المستخدم من صفحة إلى أخرى عند الضغط عليه، و أما الوسم <link> فله استخدام مختلف تماماً، فهو يربط مستند XHTML بملف، مثلاً ربط صفحة XHTML بملف CSS، مما يؤدي إلى تطبيقه فيها.
بداية، أرجو أن تقوموا بتنزيل الملف التالي:
ملف مرفق للـ css
والذي يحوي هذه الملفات:
هذا درس عملي وسهل ويحل مشكلة بسيطة لكنها مزعجة، وهي حجم ونوع الخط، فعادة ما يختار المصمم خطاً معيناً لموقعه، وعندما يأخذ آراء الزوار في الموقع فربما يجد بعض التعليقات مثل: الخط كبير جداً، أو الخط صغير جداً! ويمكن حل هذه المشكلة عن طريق CSS وجافاسكربت، وبأسلوب سهل.
في البداية، أود أن أذكر بأن لغة XHTML ما هي إلا تطوير على لغة HTML، فـXHTML تعني eXtensible HTML، أي لغة HTML القابلة للتوسع، إذن HTML و XHTML تتفقان بالأهداف.
حسناً، HTML تعني HyperText Markup Language، و النقطة التي نتحدث عنها هي الـHyperText، لن يكتمل معنى هذه الكلمة إلا بربط HyperText بآخر.
أردت الوصول إلى أن جزء مهم من HTML و XHTML هو الوصل أو الربط بين الصفحات، و هو يتم عادةً باستخدام الـURLs، أو ما يطلق عليه محدد أماكن الموارد المنتظم، و هو عنوان فريد، فلا يوجد ملف في الويب يحمل الـURL الخاص بملف آخر.
بداية، أرجو أن تقوموا بتنزيل الملف التالي:
ملف مرفق للـ css
والذي يحوي هذه الملفات:
هذا التصميم الجديد مطور قليلاً عن التصميم السابق، قمت بحذف المساحة الجانبية sidenav والتي رأيناها في التصميم الأول، كانت هذه المساحة مجرد مثال فقط لا غير، الآن في هذا الدرس سنضع شعاراً في التصميم، وكذلك روابط لأربعة صفحات وفقرات تحتوي كل منها على رابط، وأخيراً مساحة أسفل الموقع لوضع ملاحظة “جميع الحقوق محفوظة”.
