لا يزال معظم المصممين لدينا يستخدمون تخطيط الجدول التقليدي والعرض التقديمي والهيكل الممزوج معًا لإنشاء مواقع الويب. يتطلب تعلم كيفية استخدام XHTML+CSS عملية، ولا يمكن جعل موقع الويب الحالي متوافقًا مع معايير موقع الويب في خطوة واحدة. أفضل نهج هو المضي قدمًا خطوة بخطوة وعلى مراحل لتحقيق هدف الامتثال الكامل لمعايير موقع الويب. إذا كنت مبتدئًا أو غير مطلع على التعليمات البرمجية، فيمكنك أيضًا استخدام أدوات التحرير المتوافقة مع المعايير، مثل Dreamweaver MX 2004، والتي تعد حاليًا الأداة الأكثر اكتمالاً التي تدعم معايير CSS.
1. التحسين الأولي
أضف DOCTYPE الصحيح إلى الصفحة
لا يعرف العديد من المصممين والمطورين ما هو DOCTYPE وما هو استخدامه. DOCTYPE هو اختصار لنوع المستند. يُستخدم بشكل أساسي للإشارة إلى إصدار XHTML أو HTML الذي تستخدمه. يفسر المتصفح رمز الصفحة وفقًا لـ DTD (تعريف نوع المستند) المحدد بواسطة DOCTYPE الخاص بك. لذا، إذا قمت عن طريق الخطأ بتعيين DOCTYPE الخاطئ، فستفاجئك النتائج. يوفر XHTML1.0 ثلاثة خيارات DOCTYPE:
(1) انتقالية
<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>
(٢) الصارم
<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Strict//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd>
(3) نوع الإطار (مجموعة الإطارات)
<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Frameset//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd>
لتحسيننا الأساسي، نحتاج فقط إلى استخدام عبارة انتقالية. لا يزال من الممكن أن يكون متوافقًا مع تخطيط الجدول الخاص بك، وشعارات الأداء، وما إلى ذلك، حتى لا تشعر بأن التغييرات كبيرة جدًا ويصعب إتقانها.
نصيحة: إذا كنت كسولًا جدًا بحيث لا تتمكن من إدخال الكود الانتقالي أعلاه، فيمكنك زيارة الصفحة الرئيسية لموقع الويب http://www.macromedia.com/، ثم عرض الكود المصدري، ونسخ نفس الكود ولصقه في منطقة الرأس .
تعيين مساحة الاسم (مساحة الاسم)
أضف الكود التالي مباشرة بعد إعلان DOCTYPE:
<html XMLns=http://www.w3.org/1999/xhtml>
مساحة الاسم هي DTD تفصيلية تجمع أنواع العناصر وأسماء السمات. يسمح لك إعلان مساحة الاسم بتحديد مساحة الاسم الخاصة بك من خلال مؤشر العنوان عبر الإنترنت. فقط أدخل الرمز كالمعتاد.
أعلن عن لغة الترميز الخاصة بك
لكي يتم تفسيرها بشكل صحيح بواسطة المتصفحات وتمرير التحقق من صحة العلامات، يجب أن تعلن جميع مستندات XHTML عن لغة الترميز التي تستخدمها. الرمز هو كما يلي:
<meta http-equiv=Content-Type content=text/html;
لغة الترميز المعلنة هنا هي الصينية المبسطة GB2312. إذا كنت بحاجة إلى إنتاج محتوى صيني تقليدي، فيمكنك تعريفها على أنها BIG5.
اكتب جميع التسميات بأحرف صغيرة
XML حساس لحالة الأحرف، لذا فإن XHTML حساس لحالة الأحرف أيضًا. يجب أن تكون كافة أسماء عناصر وسمات XHTML بأحرف صغيرة. وإلا فسيتم اعتبار المستند الخاص بك غير صالح من خلال التحقق من صحة W3C. على سبيل المثال الكود التالي غير صحيح:
<TITLE>ملف تعريف الشركة</TITLE>
والطريقة الصحيحة لكتابتها هي:
<title>ملف تعريف الشركة</title> وبالمثل، قم بتغيير <P> إلى <p>، و<B> إلى <b>، وما إلى ذلك. خطوة التحويل هذه بسيطة جدًا.
إضافة سمة البديل إلى الصورة
إضافة سمة البديل لجميع الصور. تحدد السمة alt أنه سيتم عرض النص البديل عندما لا يمكن عرض الصورة، وهذا أمر يمكن الاستغناء عنه للمستخدمين العاديين، ولكنه ضروري لمتصفحات النص فقط والمستخدمين الذين يستخدمون قارئات الشاشة. فقط عند إضافة السمة alt، سيجتاز الكود فحص صحة W3C. لاحظ أننا بحاجة إلى إضافة سمات بديلة ذات معنى، والكتابة كما يلي لا معنى لها:
<img src=http://www.chinahtml.com/0608/logo_unc_120x30.gif alt=http://www.chinahtml.com/0608/logo_unc_120x30.gif>
الطريقة الصحيحة للكتابة:
<img src=http://www.chinahtml.com/0608/logo_unc_120x30.gif alt=شعار شركة UNC، انقر للعودة إلى الصفحة الرئيسية>
اقتبس جميع قيم السمات
في HTML، لا تحتاج إلى اقتباس قيم السمات، ولكن في XHTML، يجب أن يتم اقتباسها.
مثال: الارتفاع=100، وليس الارتفاع=100.
أغلق كافة علامات التبويب
في XHTML، يجب إغلاق كل علامة مفتوحة. مثله:
<p>يجب إغلاق كل علامة تبويب مفتوحة. </p> <b>يمكن لـ HTML قبول العلامات غير المغلقة، لكن XHTML لا يمكنه ذلك. </ب>
يمكن لهذه القاعدة تجنب الارتباك والمشاكل في HTML. على سبيل المثال: إذا لم تقم بإغلاق علامة الصورة، فقد تواجه مشكلات في عرض CSS في بعض المتصفحات. استخدم هذه الطريقة للتأكد من ظهور الصفحة كما صممتها. تجدر الإشارة إلى أنه يجب أيضًا إغلاق العلامات الفارغة. استخدم شرطة مائلة للأمام / في نهاية العلامة لإغلاق نفسها. على سبيل المثال:
<br /> <img src=http://www.chinahtml.com/0608/webstandards.gif />
بعد معالجتها بالقواعد السبعة المذكورة أعلاه، تفي الصفحة بشكل أساسي بمتطلبات XHTML1.0. لكننا ما زلنا بحاجة إلى التحقق مما إذا كانت تلبي المعايير حقًا. يمكننا استخدام W3C لتقديم خدمات التحقق المجانية (http://validator.w3.org/). قم بإصلاح الأخطاء واحدًا تلو الآخر بعد اكتشافها. في قائمة الموارد التالية، نقدم أيضًا خدمات التحقق وعناوين URL الأخرى التي توفر إرشادات حول التحقق، والتي يمكن استخدامها كملحق للتحقق W3C. عندما تجتاز أخيرًا التحقق من صحة XHTML، تهانينا، لقد اتخذت خطوة كبيرة نحو معايير موقع الويب. الأمر ليس بالصعوبة التي تظنها!
2. تحسن متوسط
تحسيننا التالي يتمثل بشكل أساسي في الفصل بين الهيكل والأداء. هذه الخطوة ليست سهلة التنفيذ مثل الخطوة الأولى، فنحن بحاجة إلى تغيير في المفهوم، بالإضافة إلى تعلم وتطبيق تكنولوجيا CSS2. لكن تعلم أي شيء جديد يستغرق وقتا، أليس كذلك؟ الحيلة هي أن تتعلم بالممارسة. إذا كنت تستخدم تخطيط الجدول دائمًا ولم تستخدم CSS مطلقًا، فلا داعي للاستعجال لتوديع تخطيط الجدول. يمكنك أولاً استبدال علامة الخط بورقة أنماط. كلما تعلمت المزيد، يمكنك فعل المزيد. حسنًا، دعونا نلقي نظرة على ما يتعين علينا القيام به:
تحديد مظهر العناصر باستخدام CSS
لقد طورنا عادة عند كتابة الشعارات، فعندما نريد أن يكون الخط أكبر نستخدم <h1>، وعندما نريد إضافة رمز نقطة في المقدمة نستخدم <li>. نحن دائمًا نفكر في <h1> كحجم كبير، و<li> كنقاط، و<b> كنص غامق. في الواقع، يمكن أن يصبح <h1> أي شيء تريده من خلال CSS، ويمكن أن يصبح <h1> خطًا صغيرًا، ويمكن أن يصبح النص <p> كبيرًا وعريضًا، ويمكن أن يصبح <li> صورة وما إلى ذلك. لا يمكننا إجبار العناصر الهيكلية على تحقيق العرض، يجب أن نستخدم CSS لتحديد مظهر تلك العناصر. على سبيل المثال، يمكننا أن نجعل عناوين المستوى 6 الافتراضية الأصلية تبدو بنفس الحجم:
h1، h2، h3، h4، h5، h6 {font-family: 宋体، serif؛
استبدل الأشياء غير المرغوب فيها التي لا معنى لها بعناصر منظمة
ربما لم يعرف الكثير من الأشخاص أبدًا أن عناصر HTML وXHTML مصممة للتعبير عن البنية. لقد اعتاد الكثير منا على استخدام العناصر للتحكم في العرض التقديمي، بدلاً من الهيكل. على سبيل المثال، قد يتم وضع علامة على القائمة على النحو التالي:
الجملة 1<br /> الجملة 2<br /> الجملة 3<br />
سيكون من الأفضل أن نستخدم قائمة غير مرتبة بدلاً من ذلك:
<ul> <li>الجملة 1</li> <li>الجملة 2</li> <li>الجملة 3</li> </ul>
قد تقول: "لكن <li> يعرض نقطة، ولا أريد استخدام نقطة." في الواقع، CSS لا يحدد شكل العنصر. يمكنك إيقاف تشغيل النقاط باستخدام CSS.
أضف معرفًا إلى كل جدول ونموذج
قم بإعطاء جدول أو شكل علامة هيكلية فريدة، على سبيل المثال.
<معرف الجدول=القائمة>
بعد ذلك، عند كتابة ورقة الأنماط، يمكنك إنشاء محدد "قائمة" وربطه بقاعدة CSS التي تخبر خلايا الجدول، وتسميات النص، وجميع العناصر الأخرى بكيفية عرضها. بهذه الطريقة، ليست هناك حاجة لإرفاق بعض سمات طبقة العرض الزائدة والمستهلكة لعرض النطاق الترددي مثل الارتفاع والعرض والمحاذاة ولون الخلفية لكل علامة <td>. باستخدام علامة مرفقة فقط (علامة المعرف التي تحمل علامة "القائمة")، يمكنك إجراء معالجة عرض تقديمي مخصصة لترميز التعليمات البرمجية النظيف والمدمج في ورقة أنماط منفصلة.
بالنسبة للتحسينات المتوسطة، سنقوم بإدراج النقاط الثلاث الرئيسية هنا أولاً، ولكنها تحتوي على الكثير من نقاط المحتوى والمعرفة، والتي نحتاج إلى تعلمها وإتقانها خطوة بخطوة حتى نحقق أخيرًا التخطيط باستخدام CSS بالكامل دون استخدام أي جداول.