تخطيطات Tableless فتح حدود تصميم جديد
هناك العديد من الأسباب لعدم استخدام الجداول للتخطيط . أحد الأسباب الأكثر شيوعًا التي يقدمها الأشخاص للاستمرار في استخدامها هو صعوبة التخطيط باستخدام CSS. على الرغم من أن برمجة CSS تستلزم منحنى التعلم ، عندما تفهم كيفية عمل تخطيط CSS ، قد تفاجأ بمدى سهولة ذلك. وبمجرد أن تتعلم ، ستعالج السبب الأكثر شيوعًا الذي يقدمه الأشخاص لعدم استخدام CSS - "إنه أسرع في كتابة الجداول". إنه أسرع لأنك تعرف الجداول ، ولكن بمجرد معرفة CSS ، قد تكون سريعًا مع ذلك.
دعم متصفح المواقع المغلق
يتم دعم وضع CSS بشكل جيد في جميع المتصفحات الحديثة . ما لم تكن تقوم بإنشاء موقع لـ Netscape 4 أو Internet Explorer 4 ، يجب ألا يواجه القراء أي مشاكل في عرض صفحات الويب التي تستخدم CSS.
إعادة التفكير في كيفية بناء صفحة
عند إنشاء موقع باستخدام الجداول ، يجب عليك التفكير في تنسيق جدولي . بعبارة أخرى ، أنت تفكر من حيث الخلايا والصفوف والأعمدة. صفحات الويب الخاصة بك سوف تعكس هذا النهج. عندما تنتقل إلى تصميم تحديد المواقع باستخدام CSS ، ستبدأ في التفكير في صفحاتك من حيث المحتوى ، نظرًا لأنه يمكن وضع المحتوى في أي مكان تريده في التخطيط - حتى يتم وضعه في طبقات أعلى المحتوى الآخر.
مواقع مختلفة لها هياكل مختلفة. لإنشاء صفحة فعالة ، قم بتقييم بنية أي صفحة معينة قبل تعيين محتوى لها. قد تتضمن صفحة المثال خمسة أقسام متميزة:
- رأس . الصفحة الرئيسية لإعلان البانر ، اسم الموقع ، روابط التنقل ، عنوان المقالة وكذلك بعض الأشياء الأخرى.
- العمود الأيمن . هذا هو الجانب الأيمن من الصفحة مع مربع البحث والإعلانات ومربعات الفيديو ومناطق التسوق.
- محتوى . نص مقالة ، أو مشاركة مدونة ، أو سلة تسوق - اللحم والبطاطس في الصفحة.
- الإعلانات المضمنة . الإعلانات مضمنة داخل المحتوى.
- تذييل . تصفح الجزء السفلي ومعلومات المؤلف ومعلومات حقوق الطبع والنشر وإعلانات بانر المنخفضة والروابط ذات الصلة.
بدلاً من وضع هذه العناصر الخمسة في جدول ، استخدم عناصر تقسيم HTML5 لتحديد الأجزاء المختلفة للمحتوى ، ثم استخدم موضع CSS لوضع عناصر المحتوى على الصفحة.
تحديد أقسام المحتوى الخاص بك
بعد تحديد مناطق المحتوى المختلفة لموقعك ، ستحتاج إلى كتابتها في HTML الخاص بك. بينما يمكنك عمومًا وضع أقسامك بأي ترتيب ، فمن الأفضل وضع الأجزاء الأكثر أهمية في صفحتك أولاً. سيساعد هذا الأسلوب في تحسين محرك البحث أيضًا.
لإثبات تحديد الموقع ، تصور صفحة تحتوي على ثلاثة أعمدة دون رأس أو تذييل. يمكنك استخدام الموضع لإنشاء أي نوع من التخطيط يعجبك.
بالنسبة إلى التخطيط المكون من ثلاثة أعمدة ، حدد ثلاثة أقسام: العمود الأيمن والعمود الأيمن والمحتوى.
سيتم إنشاء مثيل لهذه الأقسام باستخدام عنصر المادة للمحتوى وعنصرين من القسمين للعمودين. سيكون لكل شيء أيضًا سمة تحدده. عند استخدام السمة id ، يجب عليك تسمية اسم فريد لكل معرف.
وضع المحتوى
باستخدام CSS ، حدد الموضع الخاص بعناصر ID'd الخاصة بك. قم بتخزين معلومات موقعك في مكالمة نمطية مثل هذا:
#يحتوى {
}
سيستهلك المحتوى ضمن هذه العناصر أكبر مساحة ممكنة ، أي 100٪ من عرض الموقع الحالي أو الصفحة. للتأثير على موقع مقطع دون فرضه على عرض ثابت ، قم بتغيير الحشو أو خصائص الهامش.
بالنسبة إلى هذا التنسيق ، عيّن العمودين لعرض ثابت ، ثم عيّن موضعهما مطلقًا ، بحيث لا يتأثران بمكان وجودهما في HTML.
#العمود الأيسر {
الموقع: مطلقة
اليسار: 0 ؛
العرض: 150 بكسل ؛
الهامش الأيسر: 10 بكسل ؛
الهامش العلوي: 20 بكسل ؛
اللون: # 000000؛
الحشو: 3px؛
}
#العمود الأيمن {
الموقع: مطلقة
اليسار: 80 ٪.
العلوي: 20 بكسل ؛
العرض: 140 بكسل ؛
padding-left: 10px؛
z-index: 3؛
اللون: # 000000؛
الحشو: 3px؛
}
ثم بالنسبة لمنطقة المحتوى ، قم بتعيين الهوامش على اليمين واليسار بحيث لا يتداخل المحتوى مع العمودين الخارجيين.
#يحتوى {
العلوي: 0 بكسل ؛
الهامش: 0 بكسل 25٪ 0 165 بكسل ؛
الحشو: 3px؛
اللون: # 000000؛
}
يتطلب تحديد صفحتك باستخدام CSS بدلاً من جدول HTML مهارة فنية أكثر قليلاً ، ولكن النتيجة تأتي من تصاميم أكثر مرونة واستجابة وسهولة أكبر في إجراء التعديلات الهيكلية على صفحتك لاحقًا.