टेबललेस लेआउट ओपन न्यू डिज़ाइन फ्रंटियर
लेआउट के लिए टेबल का उपयोग न करने के कई कारण हैं । लोगों का उपयोग जारी रखने के लिए सबसे अधिक कारणों में से एक यह है क्योंकि सीएसएस के साथ लेआउट करना मुश्किल है। हालांकि सीएसएस स्क्रिप्टिंग एक सीखने की अवस्था में प्रवेश करती है, जब आप समझते हैं कि सीएसएस लेआउट कैसे करें, तो आप आश्चर्यचकित हो सकते हैं कि यह कितना आसान हो सकता है। और एक बार जब आप सीखते हैं, तो आप दूसरे सबसे आम कारणों को संबोधित करेंगे, जो लोग सीएसएस का उपयोग न करने के लिए देते हैं- "टेबल लिखना तेज़ है।" यह तेज़ है क्योंकि आप टेबल जानते हैं, लेकिन एक बार जब आप सीएसएस सीखते हैं, तो आप जितनी जल्दी हो सकते हैं उस के साथ।
सीएसएस पोजिशनिंग का ब्राउज़र समर्थन
सीएसएस पोजिशनिंग सभी आधुनिक ब्राउज़रों में अच्छी तरह से समर्थित है । जब तक आप नेटस्केप 4 या इंटरनेट एक्सप्लोरर 4 के लिए कोई साइट नहीं बना रहे हैं, तो आपके पाठकों को आपके सीएसएस-स्थित वेब पेजों को देखने में कोई परेशानी नहीं होनी चाहिए।
इस बात पर पुनर्विचार करना कि आप एक पृष्ठ कैसे बनाते हैं
जब आप टेबल का उपयोग करके साइट बनाते हैं, तो आपको एक टैब्यूलर प्रारूप में सोचना होगा। दूसरे शब्दों में, आप कोशिकाओं और पंक्तियों और स्तंभों के संदर्भ में सोच रहे हैं। आपके वेब पेज इस दृष्टिकोण को प्रतिबिंबित करेंगे। जब आप किसी सीएसएस पोजिशनिंग डिज़ाइन पर जाते हैं, तो आप सामग्री के संदर्भ में अपने पृष्ठों के बारे में सोचना शुरू कर देंगे, क्योंकि सामग्री को लेआउट में कहीं भी रखा जा सकता है-यहां तक कि अन्य सामग्री के शीर्ष पर भी स्तरित किया गया है।
विभिन्न वेबसाइटों में विभिन्न संरचनाएं होती हैं। एक प्रभावी पृष्ठ बनाने के लिए, सामग्री को असाइन करने से पहले किसी दिए गए पृष्ठ की संरचना का मूल्यांकन करें। एक उदाहरण पृष्ठ में पांच अलग-अलग अनुभाग शामिल हो सकते हैं:
- शीर्षलेख बैनर विज्ञापन, साइट का नाम, नेविगेशन लिंक, एक लेख शीर्षक और साथ ही कुछ अन्य चीजों के लिए घर।
- दायां कॉलम यह खोज बॉक्स, विज्ञापन, वीडियो बॉक्स और शॉपिंग क्षेत्रों के साथ पृष्ठ का दाहिना तरफ है।
- सामग्री एक लेख, ब्लॉग पोस्ट या शॉपिंग कार्ट का पाठ-पृष्ठ के मांस और आलू।
- इनलाइन विज्ञापन । विज्ञापन सामग्री के भीतर इनलाइन।
- पाद लेख नीचे नेविगेशन, लेखक की जानकारी, कॉपीराइट जानकारी, निचले बैनर विज्ञापन, और संबंधित लिंक।
उन पांच तत्वों को किसी तालिका में डालने के बजाय, सामग्री के विभिन्न हिस्सों को परिभाषित करने के लिए HTML5 सेक्शनिंग तत्वों का उपयोग करें, और उसके बाद पृष्ठ पर सामग्री तत्वों को रखने के लिए सीएसएस स्थिति का उपयोग करें।
आपकी सामग्री अनुभागों की पहचान करना
अपनी साइट के विभिन्न सामग्री क्षेत्रों को परिभाषित करने के बाद, आपको उन्हें अपने HTML में लिखना होगा। जबकि आप आमतौर पर अपने अनुभाग किसी भी क्रम में रख सकते हैं, तो पहले अपने पृष्ठ के सबसे महत्वपूर्ण भागों को रखना एक अच्छा विचार है। यह दृष्टिकोण खोज इंजन अनुकूलन के साथ-साथ मदद करेगा।
पोजीशनिंग का प्रदर्शन करने के लिए, तीन कॉलम वाले पेज की कल्पना करें लेकिन कोई हेडर या फ़ूटर नहीं। आप अपनी पसंद के किसी भी प्रकार के लेआउट को बनाने के लिए पोजीशनिंग का उपयोग कर सकते हैं।
तीन कॉलम लेआउट के लिए, तीन खंडों को परिभाषित करें: बाएं कॉलम, दाएं कॉलम और सामग्री।
इन अनुभागों को सामग्री के लिए आलेख तत्व और दो स्तंभों के लिए दो सेक्शन तत्वों का उपयोग करके तत्काल किया जाएगा। सब कुछ भी पहचानने की विशेषता होगी। जब आप आईडी विशेषता का उपयोग करते हैं, तो आपको प्रत्येक आईडी के लिए एक अद्वितीय नाम लिखना होगा।
सामग्री पोजिशनिंग
सीएसएस का उपयोग करके, अपने आईडी किए गए तत्वों की स्थिति को परिभाषित करें। अपनी स्थिति की जानकारी स्टाइल कॉल में इस तरह स्टोर करें:
#सामग्री {
}
इन तत्वों के भीतर सामग्री जितनी जगह हो सके उतनी जगह लेगी, अर्थात् वर्तमान स्थान या पृष्ठ की चौड़ाई का 100 प्रतिशत। एक निश्चित चौड़ाई पर मजबूर किए बिना किसी अनुभाग के स्थान को प्रभावित करने के लिए, पैडिंग या मार्जिन गुणों को बदलें।
इस लेआउट के लिए, दो स्तंभों को निश्चित चौड़ाई में सेट करें और फिर अपनी स्थिति को पूर्ण करें, ताकि वे HTML पर पाए जाने से प्रभावित न हों।
# बाएं कॉलम {
स्थिति: पूर्ण;
बाएं: 0;
चौड़ाई: 150 पीएक्स;
मार्जिन-बाएं: 10 पीएक्स;
मार्जिन टॉप: 20 पीएक्स;
रंग: # 000000;
पैडिंग: 3 पीएक्स;
}
#दक्षिण पक्ष क़तार {
स्थिति: पूर्ण;
बाएं: 80%;
शीर्ष: 20 पीएक्स;
चौड़ाई: 140 पीएक्स;
पैडिंग-बाएं: 10 पीएक्स;
जेड-इंडेक्स: 3;
रंग: # 000000;
पैडिंग: 3 पीएक्स;
}
फिर सामग्री क्षेत्र के लिए, दाईं ओर मार्जिन सेट करें और बाएं ताकि सामग्री दो बाहरी कॉलम को ओवरलैप न करे।
#सामग्री {
शीर्ष: 0 पीएक्स;
मार्जिन: 0 पीएक्स 25% 0 165 पीएक्स;
पैडिंग: 3 पीएक्स;
रंग: # 000000;
}
एक HTML तालिका के बजाय सीएसएस का उपयोग करके अपने पेज को परिभाषित करने के लिए थोड़ा अधिक तकनीकी कौशल की आवश्यकता होती है, लेकिन भुगतान अधिक लचीला और उत्तरदायी डिज़ाइन से होता है और बाद में आपके पृष्ठ पर संरचनात्मक समायोजन करने में अधिक आसानी देता है।