قبل بضع سنوات، بدأت DIV+CSS تصبح الطريقة المفضلة لتصميم الويب تدريجيًا، وفي الوقت الحاضر، أصبحت DIV+CSS هي المعيار لتصميم الويب في العديد من مواقع الويب المحلية في السنوات القليلة الماضية سنين. . المؤلف أيضًا مصمم ويب يفضل هذه الطريقة، وأنا أستخدم div+css لتقديم التصميمات للعملاء لمدة ثلاث سنوات. إذن ما هي المزايا التي يتمتع بها مقارنة بـ TABLE؟ دعونا نتحدث عن بعض التجارب والتفاهمات الشخصية، على أمل أن تكون مفيدة للزملاء والأفراد ذوي الصلة.
أكبر ميزة لاستخدام DIV + CSS في تصميم الويب هي توحيد كود الويب، والتخلي عن طريقة تخطيط الجدول القديمة، وتحقيق الفصل بين المحتوى والأداء والسلوك، كما أن كود html منظم بشكل أفضل وأسهل في القراءة والصيانة. وحجم ملف صفحة الويب أصغر أيضًا. على سبيل المثال، بعد إعادة إنشاء موقع الويب الخاص بالعميل مؤخرًا، كان حجم ملف صفحة الويب أقل من نصف حجمه الأصلي، لذلك شغل مساحة أقل على موقع الويب وتم فتح موقع الويب بشكل أسرع.
تختلف أساليب DIV+CSS وTABLE اختلافًا كبيرًا في التصميم. يلزم التخطيط الدقيق قبل البدء في تصميم صفحة ويب، مثل تسمية العناصر التي تشكل صفحة الويب لتسهيل تعريف النمط في CSS. ومن الأفضل تعريف السمات العامة بأسماء الفئات . يمكن وضع الأنماط الشائعة لموقع الويب بأكمله في ملف CSS منفصل، وتشمل السمات العامة الشائعة: عرض صفحة الويب، ولون الخلفية، وصورة الخلفية، وحجم الخط الافتراضي، واللون، ونمط الارتباط، وما إلى ذلك. توجد أنماط مختلفة لكل صفحة ويب. من الأفضل التركيز على كتلة واحدة والإشارة إلى صفحة الويب أو جزء صفحة الويب الموجود قبل الكتلة، ولن يؤدي ذلك إلى تقليل حجم ملف CSS فحسب، بل سيؤدي أيضًا إلى تجنب الارتباك وجعل الصيانة أكثر ملاءمة. ومن الجدير بالذكر أنه لا ينبغي تضمين الأنماط في كود صفحة الويب لفصل المحتوى والأسلوب تمامًا.
للقيام بعمل جيد في تصميم الويب DIV+CSS، هناك ثلاث نقاط يجب فهمها.
1. السمة العائمة: تشغل DIV (الطبقة) صفًا كاملاً بشكل افتراضي بالنسبة لتصميمات التخطيط الشائعة المكونة من عمودين أو متعددة الأعمدة، يجب أن تكون قادرًا على ضبط سمات العائمة والعرض بشكل صحيح لتحقيق التأثير. بعد اكتمال التخطيط متعدد الأعمدة، إذا تم اتباع الطبقة التي تشغل اللافتة، فستحتاج إلى تعيين السمة الواضحة لمسح الطبقة العائمة.
2. وضع الصندوق: تحتوي الطبقة على سمات مثل العرض والارتفاع والحدود والتباعد الداخلي والتباعد الخارجي. المساحة الفعلية التي تشغلها الطبقة هي مجموع قيم السمات المذكورة أعلاه. الاستخدام السليم لهذه السمات يمكن أن يحقق ضغطًا و تخطيط أنيق. تخطيط ويب جميل.
3. تداخل الطبقات: يعلم جميع مصممي الويب ذوي الخبرة أنه ليس من المستحسن تداخل العديد من الطبقات، وبشكل عام لا يزيد عدد الطبقات عن 3 سيؤدي إلى تعليمات برمجية معقدة ومتكررة، وصعوبة في الصيانة، وبطء في التشغيل. بالإضافة إلى ذلك، في التخطيط متعدد الأعمدة، يمكن استخدام الطبقة العائمة، وليست هناك حاجة لإعداد طبقة IE شاملة للتضمين.
اذكر موضوع توافق المتصفح بشكل منفصل. بالمقارنة مع تخطيط TABLE، يكون DIV+CSS أكثر عرضة لمشاكل عدم التوافق مع متصفحات متعددة. والسبب الرئيسي هو أن المتصفحات المختلفة لها قيم افتراضية مختلفة لمعايير الويب. الاتجاه السائد في الصين هو IE، مع استخدام Firefox وChrome بشكل أقل شيوعًا فيما يتعلق باختبار التوافق، تحتاج أولاً إلى التأكد من عدم حدوث أي مشكلات في إصدارات متعددة من IE. فيما يلي بعض الأساليب والتقنيات المصممة لمساعدتك في العثور على حلول محددة مشاكل على الموقع.
ملخص: يتمتع DIV+CSS بالعديد من المزايا مقارنة بـ TABLE. يجب على مصممي الويب التخلي عن طريقة TABLE في أقرب وقت ممكن، الأمر الذي سيكون أكثر ملاءمة لحث أنفسهم على تعلم معرفة DIV+CSS بعمق. ليس من الصعب تعلم واستخدام طريقة تصميم الويب DIV+CSS، طالما أنك تفهم بعض المعرفة الأساسية وتقوم ببعض الحالات الأخرى، فسوف تفهمها وتتقنها تدريجيًا.
تم نشر هذه المقالة بواسطة [Hippie]، مسؤول موقع http://www.swjns.com . يرجى الاحتفاظ بعنوان URL لإعادة الطباعة.
شكرا لhbjsp لمساهمتك