टेबललेस लेआउट खोल्नुहोस् नयाँ डिजाइन फ्रंटियर्स
त्यहाँ धेरै कारणहरू लेआउटको लागि तालिकाहरू प्रयोग नगर्ने छन्। सबै भन्दा अक्सर कारणहरू मध्ये जो मान्छेहरूले तिनीहरूलाई प्रयोग गर्न जारी राख्दछ किनभने यो CSS सँग लेआउट गर्न गाह्रो छ। यद्यपि सीएसएस स्क्रिप्टिङले सिक्नको वक्रमा प्रवेश गर्दछ, जब तपाइँ कसरी सीएसएस लेआउट गर्न सक्नुहुन्छ भन्ने कुरा बुझ्न सक्नुहुन्छ, तपाइँ कसरी सजिलो हुन सक्नुहुनेछ। र तपाईंले सिक्न एक पटक, तपाइँले CSS को प्रयोग नगरेको दोस्रो दोस्रो आम कारणलाई सम्बोधन गर्नुहुने छ - "यो टेबलहरू लेख्न छिटो छ।" यो तेर्सो छ किनभने तपाइँ तालिकाहरू जान्नुहुन्छ, तर तपाईले सीएसएस सिक्नु भएपछि, तपाइँ भर्खरै छिटो हुन सक्नुहुनेछ। त्यससँग।
CSS Positioning को ब्राउजर समर्थन
सीएसएस पोष्टिङ सबै आधुनिक ब्राउजरहरूमा राम्रोसँग समर्थन गरिएको छ। जब सम्म तपाईं नेटस्केप 4 वा इन्टरनेट एक्स्प्लोरर 4 को लागि साइट निर्माण नगरेसम्म, तपाइँका पाठकहरूलाई तपाइँको CSS-positioned वेब पृष्ठहरू हेर्न कुनै समस्या छैन।
तपाईं कसरी पृष्ठ बनाउनु हुन्छ
जब तपाइँ तालिकाहरू प्रयोग गरेर साइट निर्माण गर्नुहुन्छ, तपाइँलाई ट्याबुलल ढाँचामा सोच्नुपर्छ । अन्य शब्दहरूमा, तपाइँ कक्षहरू र पङ्क्तिहरू र स्तम्भहरूको सन्दर्भमा सोच्दै हुनुहुन्छ। तपाईंको वेब पृष्ठले यस दृष्टिकोणलाई प्रतिबिम्बित गर्नेछ। जब तपाईं एक CSS पोजीटिङ् डिजाइनमा जानुहुन्छ, तपाइँ सामग्रीको सन्दर्भमा आफ्नो पृष्ठहरू सोच्न सक्नुहुन्छ, किनकि सामग्री जहाँ पनि तपाईं लेआउटमा मनपर्छ - अन्य सामग्रीको माथि पनि तहमा राखिएको हुन सक्छ।
विभिन्न वेबसाइटहरूमा विभिन्न संरचनाहरू छन्। प्रभावकारी पृष्ठ निर्माण गर्न, तपाइँलाई सामाग्री असाइन गर्नु अघि कुनै पनि पृष्ठको संरचनाको मूल्यांकन गर्नुहोस्। एउटा उदाहरण पेजमा पाँचवटा अलग भागहरू समावेश हुन सक्छ:
- हेडर । ब्यानर विज्ञापनमा घर, साइटको नाम, नेभिगेसन लिङ्क, एक लेख शीर्षक र साथै केहि अन्य चीजहरू।
- दाँया स्तम्भ । यो पृष्ठको दायाँ भाग खोजी बक्स, विज्ञापनहरू, भिडियो बक्स, र किनमेल क्षेत्रहरूसँग हो।
- सामाग्री । एक लेख, ब्लग पोस्ट वा खरीदारी कार्टको पाठ - पृष्ठको मासु र आलु।
- इनलाइन विज्ञापनहरू । सामग्री भित्रको इनलाइन विज्ञापनहरू।
- फुटर । तलको नेविगेशन, लेखक जानकारी, कपीराइट सूचना, नि: शुल्क ब्यानर विज्ञापनहरू, र सम्बन्धित लिङ्कहरू।
तालिकामा ती पाँच तत्वहरू राख्नुको सट्टा, सामग्रीको विभिन्न भागहरू परिभाषित गर्न HTML5 सेटिङ् तत्वहरू प्रयोग गर्नुहोस्, र त्यसपछि पृष्ठको सामग्री तत्वहरू राख्नको लागि CSS पोजिटिङ् प्रयोग गर्नुहोस्।
तपाईंको सामग्री खण्डहरू पहिचान गर्दै
तपाईंले आफ्नो साइटको विभिन्न सामग्री क्षेत्रहरू परिभाषित गरे पछि, तपाईंलाई यसलाई आफ्नो HTML मा लेख्न आवश्यक छ। जब तपाइँ सामान्यतया, कुनै पनि अर्डरमा आफ्नो खण्डहरू राख्न सक्नुहुन्छ, यो तपाइँको पृष्ठको सबैभन्दा महत्त्वपूर्ण भागहरू पहिलो स्थानको लागि राम्रो विचार हो। यस दृष्टिकोणले खोज इन्जिन अनुकूलनसँग पनि मद्दत गर्नेछ।
पोजीटिङ् प्रदर्शन गर्न, पृष्ठलाई तीन स्तम्भहरू तर कुनै हेडर वा फुटरसँग कल्पना गर्नुहोस्। तपाईं कुनै पनि प्रकारको लेआउट सिर्जना गर्न को लागी स्थितिमा प्रयोग गर्न सक्नुहुन्छ।
तीन-स्तम्भ लेआउटको लागि, तीन खण्डहरू परिभाषित गर्नुहोस्: बायाँ स्तम्भ, दायाँ स्तम्भ र सामग्री।
यी खण्डहरू सामग्री र दुई सेक्शन तत्वहरूको लागि दुई स्तम्भहरूका लागि ARTICLE तत्वको प्रयोग गरी अनन्तता गरिनेछ। सबै कुरामा यसको पहिचान पनि विशेषता हुनेछ। जब तपाईं आईडी विशेषता प्रयोग गर्नुहुन्छ, तपाइँले प्रत्येक आईडीको लागि एक अद्वितीय नामको वर्णन गर्नु पर्छ।
सामाग्री पोषण गर्दै
CSS प्रयोग गर्दै, तपाईंको आईडी' तत्वहरू को लागि स्थिति परिभाषित गर्नुहोस्। तपाईंको पोष्ट जानकारी भण्डारणमा भण्डार गर्नुहोस् यो जस्तै:
#content {
}
यी तत्व भित्रको सामग्री धेरै ठाउँको रूपमा उठ्न सक्दछ, जसको कारणले हालको स्थान वा पृष्ठको चौडाइको 100 प्रतिशत। कुनै निश्चित चौडाइलाई बेवास्ता बिना खण्डको स्थानलाई असर गर्न, प्याडिंग वा मार्जिन गुण परिवर्तन गर्नुहोस्।
यस लेआउटका लागि, दुई स्तम्भहरूलाई निश्चित चौडाईमा सेट गर्नुहोस् र त्यसपछि उनीहरूको स्थिति पूर्ण सेट गर्नुहोस्, ताकि तिनीहरू प्रभावित हुन सक्नेछ जुन तिनीहरू HTML मा भेटिन्छ।
# left-column {
स्थिति: पूर्ण;
बायाँ: 0;
चौडाई: 150px;
मार्जिन-बायाँ: 10px;
मार्जिन-शीर्ष: 20px;
रंग: # 000000;
padding: 3px;
}
# right-column {
स्थिति: पूर्ण;
बायाँ: 80%;
शीर्ष: 20px;
चौडाई: 140px;
padding-left: 10px;
z-index: 3;
रंग: # 000000;
padding: 3px;
}
त्यसपछि सामग्री क्षेत्रको लागि, मायाँ र दाँया मा सेट गर्नुहोस् ताकि सामग्री दुई बाहिर स्तम्भहरू ओभरल्याप गर्दैन।
#content {
top: 0px;
मार्जिन: 0px 25% 0 165px;
padding: 3px;
रंग: # 000000;
}
एचटीएमएल तालिकाको सट्टा CSS को प्रयोग गरेर तपाइँको पृष्ठको परिभाषा परिभाषित गर्न आवश्यक छ। थप भुक्तानीको लागी अधिक लचीला र उत्तरदायी डिजाइन र तपाईको पेजमा संरचनात्मक समायोजन बनाउन पछि सजिलै सजिलै हुन्छ।