عند تطبيق تخطيط صفحة الويب Div+CSS لإنشاء موقع ويب يتوافق مع معايير الويب، هناك بعض المشكلات التي قد تنشأ بسهولة.
دعونا نلخصها الآن حتى يتمكن الجميع من رؤية أين تكمن المشكلة.
1. قضايا التحقق من صحة CSS
تأمل جميع صفحات الويب التي نصممها في الامتثال لمعايير XHTML وCSS لاجتياز التحقق من W3C. بعض أخطاء التحقق الفاشلة في CSS2.0 هي: "Line: 0 Font-family: يوصى بتحديد عائلة النوع كخيار أخير."
توصي W3C أنه عند تعريف الخطوط، يجب أن ينتهي بفئة من الخطوط بدلاً من خط واحد. على سبيل المثال، يمكن أن يضمن "sans-serif" إمكانية عرض خطوط الويب ضمن أنظمة تشغيل مختلفة.
على الرغم من أن معظم الأشخاص يحددون "sans-serif" على علامة النص، إلا أنه إذا تم حذف sans-serif عند تحديد الخط مرة أخرى في معرفات أو فئات أخرى، فسيتم اعتبار فشل التحقق. هذا الخطأ ليس خطيرًا جدًا ويمكن تجنبه بقليل من الاهتمام.
2. اقتراحات كتابة CSS
إضافة تعليقات إلى ملفات CSS. ستوفر التعليقات الراحة لصيانتك المستقبلية. يوصى بإضافة تعليقات إلى ملفات CSS قدر الإمكان، ولا تقلق بشأن إضافة عدد صغير من البايتات. حاول تقصير بناء جملة CSS قدر الإمكان. على سبيل المثال، يمكن اختصار قيمة اللون "#FFFFFF" كـ "#FFF"؛ ويمكن اختصار "padding-top:30px;Padding-right:0;padding-bottom:10px;padding-left:2 0px" بـ " الحشو: 30 بكسل 0 10 بكسل "20 بكسل؛". هناك المزيد من تقنيات الحفظ في تحديد التقنيات، وكلما أصبحت أكثر كفاءة في تطبيقات CSS، سوف تستمر في اكتشاف طرق أفضل.
3. مشكلات التحقق من صحة XHTML
غالبًا ما يولي الأشخاص اهتمامًا أكبر للتحقق من CSS، لكنهم يهملون الامتثال لمعايير XHTML، مما يؤدي إلى حدوث العديد من الأخطاء ذات المستوى المنخفض. القضايا الرئيسية مذكورة أدناه:
◎target="_blank"، بناء الجملة هذا صحيح في HTML4.0، لكنه غير مسموح به في XHTML1.0. أحد الحلول هو كتابة الهدف = "جديد"، والحل الآخر هو استخدام JS لمعالجة جميع الأهداف؛
◎ من الأفضل عدم تضمين أوراق الأنماط، فمن الأسهل الحفاظ على ملفات أوراق الأنماط المنفصلة. إذا تم تضمين <style>، فيجب كتابته كـ <style type="text/css">، ولا يمكن تجاهل النوع، وإلا فلن يتمكن XHTML من تحديد الغرض من استخدام النمط الخاص بك.
◎<br> يجب أن تتم كتابته بالشكل <br />. يتطلب XHTML أن تكون جميع العلامات غير المقترنة متبوعة مباشرة بـ "/".
◎ أعد استخدام نفس المعرف. لا يمكن استخدام المعرف إلا مرة واحدة في XHTML إذا كنت بحاجة إلى الرجوع إلى النمط عدة مرات، فيجب عليك استخدام الفئة.
◎طريقة تضمين الفلاش خاطئة. كان <embed> في الأصل علامة خاصة لـ Netscape، على الرغم من أنه تم دعمه لاحقًا بواسطة IE، إلا أنه لم يتم التعرف عليه مطلقًا بواسطة W3C. لا توجد علامة <embed> في HTML4.0. يدعو W3C إلى استخدام علامة <object>. لحل مشكلة التوافق بين المتصفحات المختلفة، الحل البديل هو استخدام كلا العلامتين.
نموذج التعليمات البرمجية الكامل هو كما يلي (خلفية الفلاش شفافة):
| وفيما يلي المحتوى المقتبس: <object classid="clsid:27CDB6E-AE6D-11cf-96B8-444553540000" قاعدة التعليمات البرمجية= "http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0" العرض = "300" الارتفاع = "100"> <اسم المعلمة = "الجودة" القيمة = "عالية"> <param name="wmode" value="transparent"> <param name="SRC" value="test.swf"> < تضمين src = "test.swf" wmode = "شفاف" الجودة = "عالية" صفحة الإضافات = "http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" اكتب = "application/x-shockwave-flash" width = "300" height = "100"> </تضمين> </كائن> |
لكن كتابته مباشرةً بتنسيق XHTML لا يزال غير ممكن. الآن لا يمكننا خداع عملية التحقق إلا عن طريق كتابة الكود أعلاه في ملف flash.js ثم استدعائه.
<script type="text/javascript" src="flash.js"></script>
ما إذا كان الفلاش يفي بالمعايير هي مسألة مثيرة للجدل.
◎ يجب كتابة الكود المشابه لـ id=header class=title كـ id="header" class="title". إن اقتباس قيم السمات هو قاعدة بناء جملة XHTML الأساسية.
4. قضايا التوافق
تكون بعض مواقع الويب مشوهة ومحاذاتها بشكل غير صحيح عند عرضها في IE6.0 وMozilla Firefox1.0 وOpera 7.12.
يتمركز في IE، ولكن ليس في Mozilla. يمكن أن يؤدي ضبط النص {TEXT-ALIGN: center;} في IE إلى توسيطه بالفعل، ولكن في Mozilla يجب عليك إضافة إعدادات النمط التالية إلى الطبقة التي تحتاج إلى توسيطها: MARGIN-RIGHT: auto;MARGIN-LEFT: auto;
يتجاوز العرض. تبدو الصفحة عادية في Mozilla، لكنها مشوهة في IE لأنها تتجاوز العرض، ويتم نقل الطبقات المتجاورة إلى الأسفل. يحدث هذا الموقف بسبب التفسيرات المختلفة لنموذج الصندوق بين IE وMozilla. هناك العديد من الحلول، مثل الطريقة "!مهم".
لقد تم فهم معايير الويب وتخطيط CSS وإتقانها من قبل المزيد والمزيد من المصممين. بعد فترة من الهضم والفهم والتطبيق لتخطيط CSS، ستظهر المزيد من صفحات الويب ذات الاعتبارات الفنية والجمالية.