- ब्लॉक, इसलिए वे अपने कंटेनर ब्लॉक की पूरी चौड़ाई ले लेंगे - तत्व . इस तरह के मार्कअप वाला पेज छोटी स्क्रीन पर अच्छा लगेगा, लेकिन उच्च रिज़ॉल्यूशन वाले उपकरणों पर, ऐसे पेजों का टेक्स्ट पढ़ने में असुविधाजनक होगा। इसलिए, आपको सामग्री के लिए एक कंटेनर टैग जोड़ना होगा - प्रत्येक अनुभाग की सामग्री:
और इसके लिए अधिकतम चौड़ाई निर्धारित करें, पैडिंग जो कम रिज़ॉल्यूशन वाले उपकरणों के स्क्रीन किनारों से सामग्री को अलग करेगी, साथ ही बाहरी पैडिंग जो कंटेनर को पैरेंट ब्लॉक के बीच में संरेखित करने की अनुमति देती है:
कंटेनर (चौड़ाई: 100%; अधिकतम-चौड़ाई: 1024पीएक्स; /*अधिकतम-चौड़ाई भिन्न हो सकती है*/ पैडिंग: 0 15पीएक्स; मार्जिन: 0 ऑटो; )
इस प्रकार, हमें अपने पृष्ठ के लिए एक फ्रेम मिला (इस मामले में अनुभागों की ऊंचाई आभासी है, क्योंकि सामग्री के बिना अनुभागों की ऊंचाई शून्य है)।
2. साइट हेडर का लेआउट और उसके तत्वों की स्थिति
आइए पहले खंड, वेब पेज के तथाकथित हेडर को चिह्नित करना शुरू करें। तत्व एक पृष्ठ/साइट पर परिचयात्मक जानकारी और नौवहन सहायता समूह के लिए डिज़ाइन किया गया है। टैग के अंदर जोड़ें वेबसाइट लोगो और नेविगेशन लिंक:
लोगो (फ्लोट: लेफ्ट;) नेवी (फ्लोट: राइट;) नेवी उल (मार्जिन: 0; पैडिंग: 0; लिस्ट-स्टाइल: कोई नहीं;) नेवी ली (डिस्प्ले: इनलाइन-ब्लॉक; / * तत्वों को लाइन अप करने का एक तरीका * /)
ब्लॉक तत्वों को एक लाइन पर रखने के कई तरीके हैं। उन सभी को पाठ में दिया गया है।
ध्यान दें कि रैपिंग लागू करने के बाद, टोपी चली गई है। ऐसा इसलिए है क्योंकि फ़्लोटिंग तत्व (जिसमें फ्लोट प्रॉपर्टी सेट है) सामान्य प्रवाह से हटा दिए जाते हैं और पैरेंट कंटेनर अब उनकी ऊंचाई नहीं देखता है, इसलिए तत्व और इसके अंदर वर्ग .container के साथ तत्व ढह गया। इस स्थिति को ठीक करने के लिए, .container वर्ग वाले तत्व के लिए स्ट्रीम क्लीनअप का उपयोग करें:
कंटेनर: के बाद (सामग्री: ""; प्रदर्शन: तालिका; स्पष्ट: दोनों;)
हम इसमें वर्टिकल पैडिंग भी जोड़ेंगे, इसके अंदर के तत्वों को हेडर के किनारों से अलग करेंगे। नतीजतन, शैलियाँ इस तरह दिखेंगी:
कंटेनर (चौड़ाई: 100%; अधिकतम-चौड़ाई: 1024पीएक्स; पैडिंग: 15पीएक्स; मार्जिन: 0 ऑटो; )
आइए उस स्थिति पर विचार करें जब कोई चित्र लोगो के रूप में कार्य करता है। इसे सीधे टैग के अंदर या बैकग्राउंड इमेज के रूप में जोड़ा जा सकता है। छवि की अपनी ऊंचाई होगी, जो नेविगेशन मेनू की ऊंचाई से बहुत भिन्न हो सकती है, इसलिए हमें हेडर तत्वों के लंबवत संरेखण की समस्या का सामना करना पड़ेगा।
हमारे उदाहरण में, लोगो की ऊंचाई 38px है, इसलिए हेडर के बीच में मेनू लिंक को संरेखित करने के लिए, हमें उनके लिए उपयुक्त लाइन ऊंचाई निर्धारित करने की आवश्यकता है:
नव ए (पाठ-सजावट: कोई नहीं; रेखा-ऊंचाई: 38px;) 7. शीर्ष लेख मेनू लिंक संरेखित करें
3. पेज के मुख्य भाग के लिए एक ग्रिड बनाएं
पृष्ठ का मुख्य भाग अक्सर विभिन्न चौड़ाई के ब्लॉकों का ग्रिड होता है। ऐसे ब्लॉकों की पोजिशनिंग भी फ्लोट प्रॉपर्टी का उपयोग करके की जाती है। ब्लॉक की प्रत्येक पंक्ति को .row वर्ग के साथ एक अतिरिक्त ब्लॉक के साथ लपेटा जाएगा:
.row वर्ग वाले तत्व के लिए, हम स्ट्रीम क्लीनअप भी लागू कर सकते हैं:
कंटेनर: के बाद,। पंक्ति: के बाद (सामग्री: ""; प्रदर्शन: तालिका; स्पष्ट: दोनों;)
पंक्तियों को एक दूसरे से अलग करने के लिए, आप एक निचला मार्जिन जोड़ सकते हैं:
पंक्ति (मार्जिन-नीचे: 15px;)
ग्रिड ब्लॉक की ऊंचाई उनकी सामग्री की ऊंचाई से निर्धारित होती है, इसलिए यह भिन्न हो सकती है:
ब्लॉक की ऊंचाई स्पष्ट रूप से निर्दिष्ट करके तय की जा सकती है, उदाहरण के लिए, .row div (ऊंचाई: 100px) । लेकिन इस मामले में, आपको यह सुनिश्चित करने की आवश्यकता है कि लेआउट में अनुकूलन क्षमता जोड़ते समय, ब्लॉक की सामग्री ब्लॉक के किनारे से आगे नहीं जाएगी।
यदि आपको पंक्ति ब्लॉक के लिए पृष्ठभूमि रंग सेट करने की आवश्यकता है, तो यह निम्नानुसार किया जा सकता है: .row वर्ग वाले तत्व के लिए, एक नया वर्ग जोड़ें जो आपको केवल इस पंक्ति को स्टाइल करने की अनुमति देगा (यह .row पंक्ति को बदल देगा) -एक), इसके लिए एक छोटे ब्लॉक की पृष्ठभूमि का रंग निर्दिष्ट करें, और लंबे ब्लॉक के लिए हम अपना खुद का रंग सेट करेंगे, यानी इस तरह हम एक पृष्ठभूमि सब्सट्रेट बनाएंगे।
लोरेन इपसाम डलार सिट आमेट।
डुइस लोबोर्टिस टेम्पोर टॉर्चर वेल इयाकुलिस। फ्यूस वॉलटपैट कमोडो लैकस, एगेट वेस्टिबुलम लोरेम सेम्पर एट।
पंक्ति-एक (पृष्ठभूमि: हल्का नीला;) यदि पृष्ठ के मुख्य भाग में केवल दो ब्लॉक हैं, तो एक अतिरिक्त आवरण पंक्ति को छोड़ा जा सकता है:
4. पेज फूटर लेआउट
पृष्ठ पाद लेख, या पाद लेख में आमतौर पर कॉपीराइट जानकारी, अतिरिक्त लिंक और इसी तरह की अन्य जानकारी होती है। यह सारी जानकारी कॉलम में भी रखी जाती है जो समान या अलग-अलग चौड़ाई की हो सकती है।
लॉजिकल मार्कअप और प्रेजेंटेशनल (भौतिक) के बीच अंतर करें। उदाहरण के लिए, इटैलिक टेक्स्ट टैग का उपयोग करके प्राप्त किया जा सकता है , और टैग की मदद से . पहले मामले में, इटैलिक को स्पष्ट रूप से निर्दिष्ट किया जाता है, और दूसरे में, पाठ पर एक तार्किक तनाव लागू किया जाता है, जो आमतौर पर इटैलिक में प्रदर्शित होता है। दूसरे शब्दों में, पहले दृष्टिकोण में, वे उपस्थिति द्वारा निर्देशित होते हैं, और दूसरे में - तार्किक उद्देश्य से। दूसरे दृष्टिकोण का लाभ उपयोग किए गए उपकरणों के प्रकार और वेब पेजों के डिजाइन से लेआउट की स्वतंत्रता है। यदि आप तार्किक लेआउट से चिपके रहते हैं, तो आप स्क्रीन, प्रिंट और पीडीए के लिए एक ही लेआउट का उपयोग कर सकते हैं, अलग-अलग स्टाइल फाइलों के साथ उपस्थिति को समायोजित कर सकते हैं।
परतों के साथ लेआउट परतें संरचनात्मक तत्व हैं जिन्हें पिक्सेल परिशुद्धता के साथ एक दूसरे के ऊपर ढेर करके वेब पेज पर रखा जा सकता है। लिपियों से आप परत मापदंडों को गतिशील रूप से बदल सकते हैं। यह पृष्ठ पर विभिन्न प्रभाव बनाना संभव बनाता है, जैसे ड्रॉप-डाउन मेनू, गेम, अनफोल्डिंग बैनर, फ्लोटिंग विंडो, और बहुत कुछ। कुछ समय पहले तक, फ़्रेम और टेबल मुख्य लेआउट टूल थे। फ़्रेम, उनकी कुछ समस्याओं के कारण, अतीत की बात बन रहे हैं: उदाहरण के लिए, HTML 5 मानक में अब फ़्रेम के लिए समर्थन शामिल नहीं है।
तालिकाओं का व्यापक रूप से विभिन्न मामलों में उपयोग किया जाता है: उनका उपयोग फ्रेम बनाने, मॉड्यूलर ग्रिड सेट करने, रंगीन पृष्ठभूमि बनाने, तत्वों को संरेखित करने आदि के लिए किया जाता है।
ऐसी तकनीकें न केवल सार्वभौमिक वेब पेजों के विकास को जटिल बनाती हैं, बल्कि दस्तावेज़ को लोड करने की गति में भी कमी लाती हैं। इस मामले में ब्राउज़र को उन तत्वों को डाउनलोड करना होगा जो उपयोगकर्ता को दिखाई नहीं दे रहे हैं और वास्तव में, उन्हें इसकी आवश्यकता नहीं है, लेकिन वे समग्र साइट ट्रैफ़िक में शामिल हैं।
टाइप बैठनेवाला
लेआउट डिजाइनर वेब पेजों के लेआउट में लगे हुए हैं। सामान्य स्थिति में, लेआउट डिज़ाइनर के कार्यों में शामिल हैं:
उपयुक्त मार्कअप भाषा का उपयोग करके वेब पेज कोड उत्पन्न करना। ये हो सकते हैं, उदाहरण के लिए, एचटीएमएल, एक्सएचटीएमएल, एक्सएमएल।
बिल्ट-इन मार्कअप लैंग्वेज टूल्स का उपयोग करके या CSS कैस्केडिंग स्टाइल शीट्स का उपयोग करके पहले बनाए गए पेज कोड को स्टाइल करना
हालाँकि, वह अक्सर निम्नलिखित सॉफ़्टवेयर का उपयोग करता है:
कोड लिखने और संपादित करने के लिए टेक्स्ट एडिटर या HTML एडिटर
एक वेब डिजाइनर से एक लेआउट डिजाइनर द्वारा प्राप्त ग्राफिक लेआउट के तथाकथित "स्लाइसिंग" के लिए एक ग्राफिक प्रोग्राम
और कभी-कभी मदद का सहारा भी लेते हैं:
WYSIWYG संपादक, जिसमें उपयोगकर्ता उन सभी तत्वों को व्यवस्थित करता है जो ग्राफिकल यूजर इंटरफेस का उपयोग करके HTML का उपयोग करके उत्पन्न किए जाने थे। कार्यक्रम तब दृश्य प्रतिनिधित्व को HTML कोड में परिवर्तित करता है। इस मामले में, लेखक को HTML का संपूर्ण ज्ञान होने की आवश्यकता नहीं है।
स्वचालित साइट लेआउट प्रोग्राम जो Adobe Photoshop ग्राफ़िक्स संपादक में बनाए गए डिज़ाइन लेआउट से छवियों और पाठ के साथ परतें निकालते हैं और इन परतों से HTML कोड बनाते हैं। यह एक बुनियादी ढांचा वेब पेज बनाता है, जो आगे के विकास के लिए तैयार है।
यह सभी देखें
टिप्पणियाँ
वेब और वेबसाइट
वैश्विक स्तर पर
स्थानीय स्तर पर
साइट के प्रकार
निर्माण और
लेआउट प्रकार,
तकनीकी
विपणन
समाज और संस्कृति
उचित वेबसाइट विकास एक जटिल बहु-चरणीय प्रक्रिया है। साइट लेआउट वेबसाइट विकास प्रक्रिया का एक अभिन्न अंग है। साइट लेआउट क्या है तैयार लेआउट के अनुसार वेब पेज बनाने की प्रक्रिया है। इस प्रक्रिया में ब्राउज़र के अनुकूल हाइपरटेक्स्ट मार्कअप भाषा एचटीएमएल का उपयोग करके पेज को कोड करना और कैस्केडिंग स्टाइल शीट्स (सीएसएस) का उपयोग करके इसे स्टाइल करना शामिल है। आपको साइट को स्वयं बनाने का प्रयास करने की आवश्यकता नहीं है, लेआउट डिज़ाइनर की सेवाओं को ऑर्डर करना अधिक समीचीन है। आखिरकार, इसे कई विशेषताओं को ध्यान में रखना चाहिए, लेआउट नियमों और विभिन्न ब्राउज़रों में दस्तावेज़ प्रदर्शित करने के लिए पैरामीटर दोनों।
अच्छे स्वाद के बुनियादी नियमों को ध्यान में रखते हुए साइट बनाना
लेआउट और पेज चौड़ाई डिजाइन
साइट का विकास, उस डिज़ाइन को नहीं तोड़ने के लिए जिसे मूल रूप से सोचा गया था, इस तथ्य को ध्यान में रखना चाहिए कि इंटरनेट उपयोगकर्ताओं के पास विभिन्न प्रस्तावों के साथ मॉनिटर हैं। इस मामले में, साइट के डिज़ाइन लेआउट के लिए दो विकल्प हैं: एक निश्चित-चौड़ाई वाली साइट और एक तरल साइट। एक निश्चित साइट की चौड़ाई इस तथ्य के आधार पर निर्धारित की जाती है कि, आंकड़ों के अनुसार, अधिकांश उपयोगकर्ता 1024x768 पिक्सेल के रिज़ॉल्यूशन वाले मॉनिटर का उपयोग करते हैं। इसलिए, क्षैतिज स्क्रॉल बार और डिज़ाइन विरूपण की उपस्थिति से बचने के लिए, आपको लगभग 800-990 पिक्सेल की औसत लेआउट चौड़ाई लेने की आवश्यकता है। लेआउट की इस पद्धति का नुकसान खाली स्थान का अक्षम उपयोग है। साइट का रबर लेआउट इस तथ्य के कारण प्राप्त होता है कि डिज़ाइन के लेआउट में माप की इकाइयाँ ज्यादातर प्रतिशत होती हैं, जो आपको लेआउट को ब्राउज़र विंडो की पूरी चौड़ाई तक फैलाने की अनुमति देती है। रबर लेआउट का लेआउट और डिज़ाइन सबसे बेहतर है।
क्रॉस-ब्राउज़र संगतता को ध्यान में रखते हुए साइटों का लेआउट
आज, कई लोकप्रिय ब्राउज़र हैं जिनका उपयोग लोग इंटरनेट ब्राउज़ करने के लिए करते हैं। इनमें शामिल हैं: इंटरनेट एक्सप्लोरर, ओपेरा, मोज़िला फ़ायरफ़ॉक्स, गूगल क्रोम, नेटस्केप नेविगेटर, सफारी और अन्य। उनमें से प्रत्येक के कई संस्करण हैं और प्रत्येक एक ही पृष्ठ को HTML प्रारूप में अलग-अलग तरीके से प्रदर्शित कर सकता है। सभी ब्राउज़र निर्माता हाइपरटेक्स्ट मार्कअप भाषा का उपयोग करने के लिए एक मानक पर आने का प्रयास करते हैं, लेकिन अभी भी असहमति है, इसलिए साइटों के लेआउट को क्रॉस-ब्राउज़र संगतता को ध्यान में रखना चाहिए।
स्वच्छ कोड वाली साइटों का सक्षम लेआउट
साइट को बिछाते समय अच्छे फॉर्म का एक और नियम एक साफ और सुंदर कोड है। इसका क्या मतलब है? इसका मतलब है कि पेज मार्कअप का एचटीएमएल कोड खूबसूरती से स्वरूपित है, इसमें टिप्पणियां और हाइलाइट किए गए तार्किक ब्लॉक शामिल हैं। कैस्केडिंग स्टाइल शीट (सीएसएस) का उपयोग करने से आप अनावश्यक टैग से कोड को साफ कर सकेंगे, और साइट के वजन को पूरी तरह से कम कर देंगे। कोड को सरल बनाने के लिए इन सभी जोड़तोड़ों का उपयोग करने वाली साइटों के लेआउट की आवश्यकता होती है, और इसे सही, संशोधित और अंतिम रूप देने पर उन्हें कम से कम समस्याओं का सामना करना पड़ेगा। सही कॉम्पैक्ट कोड खोज इंजन द्वारा साइट के अनुक्रमण की सुविधा प्रदान करेगा, और कम वजन आपकी साइट के लोड समय को कम करेगा।
साइटों का सारणीबद्ध और ब्लॉक लेआउट
वेबसाइट बनाने के दो मौलिक रूप से अलग-अलग तरीके हैं। पहला तरीका टेबल के साथ है। सारणीबद्ध लेआउट मार्कअप तत्वों का उपयोग करता है जो बाहरी प्रभावों को प्राप्त करने के लिए उनके द्वारा किए जाने वाले शब्दार्थ के अनुरूप नहीं होते हैं, जहां तक कि तालिकाओं का मूल रूप से एक पृष्ठ फ्रेम बनाने का इरादा नहीं था, लेकिन मानक डेटा इनपुट के लिए परोसा गया था। सारणीबद्ध लेआउट का उपयोग करके साइट को बाहर करने के लिए, कई नेस्टेड तालिकाओं का उपयोग करना अक्सर आवश्यक हो जाता है। यह दृष्टिकोण अक्सर ब्राउज़र के लिए पृष्ठों को संसाधित करना बहुत कठिन बना देता है, दस्तावेज़ का आकार बढ़ाता है और फ़ाइलों की लोडिंग को धीमा कर देता है, और कोड में त्रुटियों का कारण बन सकता है। यह अधिक सुविधाजनक और सही है, सामग्री और डिजाइन को अलग करने के बारे में विश्वासों के दृष्टिकोण से, परतों (ब्लॉकों) का उपयोग करके साइट बनाना। साइटों का ब्लॉक लेआउट अधिक अवसर देता है, जिससे आप कोड को अधिक कॉम्पैक्ट बना सकते हैं, और वेब पेज लोड करने की गति बढ़ा सकते हैं। CSS का उपयोग करते हुए, परत गुण सेट अप करने के लिए बहुत अधिक सुविधाजनक होते हैं। लेआउट लेयर्स की मदद से, आप एक साइट को और अधिक कुशलता से विकसित कर सकते हैं जो ब्राउज़रों में सही ढंग से प्रदर्शित होगी।
वेबसाइट लेआउट पेशेवरों का मामला है
किसी पेशेवर से साइट ऑर्डर करना बेहतर है। पेशेवर रूप से डिज़ाइन की गई वेबसाइट की एक एकीकृत शैली होती है और यह डिज़ाइन अवधारणा के सभी तत्वों को प्रदर्शित करती है। इसमें अच्छी नौवहन उपयोगिता गुण हैं और एक अनुभवहीन उपयोगकर्ता को भी साइट पर आसानी से नेविगेट करने की अनुमति देता है। साइट लेआउट कभी-कभी कुछ काम करने वाले उपकरणों की आवश्यकता को ध्यान में रखता है: एक शक्तिशाली कंप्यूटर जिसमें रैम की बड़ी आपूर्ति होती है। और अंत में, केवल अनुभव वाला पेशेवर ही विभिन्न ब्राउज़रों के व्यवहार की पेचीदगियों को समझता है और साइट पृष्ठों के डिज़ाइन को सटीक रूप से प्रदर्शित करने के लिए विभिन्न शैली तत्वों का सही ढंग से उपयोग करता है।
अक्सर सवाल उठता है कि लेआउट क्या है? सरल शब्दों में, लेआउट एक दस्तावेज़ पृष्ठ पर घटक तत्वों (पाठ, शीर्षक, चित्र, टेबल) की व्यवस्था है। लेआउट निम्न प्रकार का होता है:
किताब
अखबार और पत्रिका
वेब दस्तावेज़ लेआउट
हम पहले दो के विवरण को छोड़ देंगे और सीधे वेब पेजों के लेआउट पर जाएंगे। यह क्या है, इसे बेहतर ढंग से समझने के लिए साइट बनाने की प्रक्रिया पर विचार करें। सबसे पहले, वे एक डिज़ाइन लेआउट बनाते हैं: प्रत्येक पृष्ठ और उसके सभी तत्वों को ड्रा करें। नतीजतन, उन्हें साइट की एक छवि मिलती है, लेकिन यह सिर्फ एक "चित्र" है।
अगला, परिणामी लेआउट को ब्राउज़र में प्रदर्शित करने की आवश्यकता है, ताकि सभी तत्व "जीवन में आ जाएं" और उपयोगकर्ता के कार्यों का जवाब दें। इस स्तर पर, लेआउट डिजाइनर खेल में आता है। HTML मार्कअप भाषा का उपयोग करके, यह ऐसे दस्तावेज़ बनाता है जिन्हें ब्राउज़र समझता है और उन्हें परिचित वेब पेजों के रूप में प्रदर्शित करता है।
लेआउट के तरीके
वेब पेजों को बिछाते समय, दो मुख्य विधियाँ होती हैं:
सारणीबद्ध लेआउट
ब्लॉक लेआउट
सारणीबद्ध लेआउट मुख्य हुआ करते थे। तालिकाओं का उपयोग करने वाले लेआउट का लाभ इसका सरल निष्पादन और विभिन्न ब्राउज़रों में लगभग समान प्रदर्शन है। नुकसान - एक जटिल और विशाल संरचना, जो कई बार कोड की मात्रा (ब्लॉक की तुलना में) बढ़ा देती है। सारणीबद्ध लेआउट को बदलने के लिए, आपको मौजूदा संरचना में लंबे समय तक तल्लीन करने के लिए बहुत समय और प्रयास खर्च करने की आवश्यकता है।
आज तक, वे एक सारणीबद्ध लेआउट के साथ साइट बनाना जारी रखते हैं, लेकिन पेशेवरों ने लंबे समय से अधिक लचीले एक - ब्लॉक पर स्विच किया है। सारणीबद्ध लेआउट का उपयोग केवल तालिकाओं को प्रदर्शित करने के लिए करने की अनुशंसा की जाती है।
ब्लॉक लेआउट वेब विकास वातावरण में मुख्य है। ब्लॉक लेआउट में, दस्तावेज़ फ़्रेम में टैग होते हैं
. इसका मुख्य लाभ सिमेंटिक लेआउट की अवधारणा है, अर्थात सामग्री और डिजाइन को अलग करना।
छोटा कोड उदाहरण:
सारणीबद्ध लेआउट
ब्लॉक लेआउट कोड
नतीजा वही है:
यहां तक कि सबसे सरल लेआउट के लिए, कोड में अंतर पहले से ही दिखाई दे रहा है, और जैसे-जैसे तत्व बढ़ते हैं, अंतर तेजी से बढ़ेगा।
लेआउट कार्यक्रम
एक साधारण वेब पेज बनाने के लिए, आप एक नियमित नोटपैड के साथ प्राप्त कर सकते हैं। अधिक जटिल परियोजनाओं के लिए, आप विशेष HTML संपादकों के बिना नहीं कर सकते। वे कोड को हाइलाइट करते हैं, जो लेआउट प्रक्रिया को बहुत सरल करता है। एक पेशेवर वातावरण में, निम्नलिखित कार्यक्रमों का उपयोग किया जाता है:
नोटपैड++
मैक्रोमीडिया ड्रीमविवर
माइक्रोसॉफ्ट फ्रंट पेज
कॉफी कप HTML संपादक
NetBeans
HTML पृष्ठ संपादकों को नियमित और दृश्य में विभाजित किया गया है। दृश्य संपादक का उपयोग करके, एक अनुभवहीन उपयोगकर्ता भी एक पृष्ठ बना सकता है। लेकिन यह समझा जाना चाहिए कि दृश्य संपादक बहुत सारे अतिरिक्त कोड (कचरा) जोड़ता है और लेआउट डिजाइनर को html भाषा के लचीलेपन का 100% उपयोग करने के अवसर से वंचित करता है।
लेआउट के दौरान क्या समस्याएं आती हैं?
साइट लेआउट में मुख्य समस्या विभिन्न ब्राउज़रों में एक ही दस्तावेज़ का एक ही प्रदर्शन नहीं है। फ़ायरफ़ॉक्स के लिए एक उच्च-गुणवत्ता वाला पृष्ठ बनाने के बाद, इसे ओपेरा में थोड़ा अलग तरीके से प्रदर्शित किया जा सकता है, और पूरी तरह से इंटरनेट एक्सप्लोरर में फैलाया जा सकता है।
कारण यह है कि प्रत्येक ब्राउज़र विभिन्न कंपनियों द्वारा विकसित किया जाता है और विभिन्न तकनीकों और नियमों का उपयोग करता है। एक मानक पर आने के प्रयास पहले से ही किए जा रहे हैं, लेकिन अंतिम परिणाम अभी भी दूर है।
अक्सर लेआउट पर उचित ध्यान नहीं दिया जाता है। इस दृष्टिकोण के साथ, साइट की सबसे रचनात्मक डिजाइन और जटिल कार्यक्षमता को भी बर्बाद किया जा सकता है। यदि आपके व्यक्तिगत ब्लॉग के विज़िटर आपको क्षमा कर देंगे, तो किसी कॉर्पोरेट वेबसाइट या स्टोर का ढहने वाला लेआउट कंपनी की छवि को गंभीर रूप से प्रभावित करेगा। पेशेवरों को काम सौंपना सबसे अच्छा उपाय है।
पहले, इंटरनेट पर, एक सारणीबद्ध प्रकार का लेआउट व्यापक था, जिसके लिए . हालांकि, समय के साथ, साइट संरचना बनाने का यह तरीका पुराना हो गया, और इसे एक ब्लॉक लेआउट द्वारा बदल दिया गया।
ब्लॉक लेआउट और सारणीबद्ध के बीच अंतर
यदि सारणीबद्ध लेआउट का अर्थ है कि पृष्ठ की सामग्री टैग के अंदर है
, तो ब्लॉक लेआउट की अवधारणा सार्वभौमिक टैग के सक्रिय उपयोग पर आधारित है
, जिसके अंदर अन्य टैग सहित सामग्री रखी गई है।
ब्लॉक लेआउट सारणीबद्ध लेआउट के नुकसान से रहित है - इसे खोज इंजन द्वारा बेहतर अनुक्रमित किया जाता है, इसका कोड इतना फैला हुआ नहीं है, और ब्लॉक
, जिसे वे "लेयर्स" कहना बहुत पसंद करते हैं, मूल रूप से सार्वभौमिक, यानी "हर चीज के लिए" के रूप में कल्पना की गई थी, जबकि
एक तालिका है जिसका उपयोग सारणीबद्ध डेटा प्रदर्शित करने के लिए किया जाना चाहिए और इससे अधिक कुछ नहीं।
ब्लॉक लेआउट का एकमात्र वास्तविक नुकसान यह है कि इस पर बनी साइटों को ब्राउज़र में अलग तरह से प्रदर्शित किया जा सकता है। इससे बचने के लिए, आपको लेआउट को "क्रॉस-ब्राउज़र" बनाना होगा, जो कि किसी भी ब्राउज़र द्वारा समान रूप से प्रदर्शित किया जाता है।
ब्लॉक लेआउट का सार
एक ग्राफिकल एडिटर में एक साइट लेआउट बनाया जाता है: यह चिह्नित किया जाता है कि पृष्ठ का कौन सा क्षेत्र (हेडर, बॉटम, साइडबार, मुख्य सामग्री) स्थित होगा और यह कितना स्थान लेगा, चित्र, पृष्ठभूमि तैयार की जाती है।
पृष्ठ के प्रत्येक भाग को अपने स्वयं के ब्लॉक में रखा गया है
: साइट का शीर्ष - पहले में, मेनू - दूसरे में, सामग्री - तीसरे में, आदि। प्रत्येक ब्लॉक HTML का उपयोग करके सामग्री से भरा होता है, और सीएसएस मार्कअप का उपयोग करके भी स्थित और स्टाइल किया जाता है।
अंतिम HTML दस्तावेज़ ब्लॉक का एक सेट है
अंदर सामग्री के साथ। स्टाइल अक्सर टैग के साथ पेज से जुड़ी एक अलग सीएसएस फ़ाइल में होता है
चावल। 1. पृष्ठ के मुख्य भाग