साइटों को डिजाइन करते समय, आपको अक्सर एक मौलिक प्रश्न हल करना पड़ता है: विभिन्न स्क्रीन रिज़ॉल्यूशन के साथ खोले जाने पर पृष्ठ का व्यवहार क्या होगा? यहां दो विकल्प हैं - "रबर" (स्ट्रेचिंग) साइट पेज या स्टेटिक। पहले विकल्प पर चर्चा की जाएगी। लेआउट के लिए आपकी प्राथमिकता जो भी हो, खिंचाव डिजाइन का मुख्य सिद्धांत सापेक्ष मापनीयता है।
यह आवश्यक है
- - एचटीएमएल का ज्ञान;
- - एचटीएमएल कोड संपादित करने के लिए कार्यक्रम।
अनुदेश
चरण 1
अपने साइट टेम्पलेट के लिए मुख्य फ़ाइल का चयन करें, जो मुख्य मार्कअप को दर्शाएगा। यह index.html या index.php फ़ाइल हो सकती है। सबसे अच्छा दृश्य साइट टेम्पलेट संपादन सॉफ्टवेयर में से एक मैक्रोमीडिया ड्रीमवेअर है। इस कार्यक्रम के आधार पर आवश्यक संपादन किया जाएगा।
टेम्पलेट फ़ाइल खोलें या "फ़ाइल" - "नया", श्रेणी - "आधार पृष्ठ" - "एचटीएमएल" या श्रेणी "गतिशील पृष्ठ" - "PHP" कमांड द्वारा एक नया बनाएं। यहां हम सामान्य मामले पर विचार करते हैं जब साइट संरचना दो फाइलों में से एक में दर्ज की जाती है।
चरण दो
यह लंबे समय से कोई रहस्य नहीं है कि विभिन्न प्रकार के लेआउट हैं - टेबल पर, डिव-ब्लॉक पर और संयुक्त (एक ही समय में टेबल और ब्लॉक)। टेबल लेआउट के लिए html टैग जिम्मेदार है
प्रत्येक संपत्ति के लिए एक प्रतिशत (100%) निर्दिष्ट करें। यह किसी भी ज्यामिति के साथ स्क्रीन पर टेबल सेल को स्वचालित रूप से खींचने के प्रभाव को प्राप्त करेगा। यह 19 इंच का मॉनिटर या स्मार्टफोन हो सकता है - उनमें से प्रत्येक सामग्री को सही ढंग से पुन: पेश करेगा।
चरण 3
यदि आपको टेबल सेल के बीच बिल्कुल पत्राचार निर्दिष्ट करने की आवश्यकता है, तो निम्न उदाहरण का उपयोग करें:
| … … सेल 1 की सामग्री। … | … … सेल 2 की सामग्री। … |
यहां आप देखेंगे कि तालिका के लिए परिभाषित सभी चीजों में से एक को 30% की चौड़ाई के साथ निर्दिष्ट किया गया है। एक साधारण गणना से पता चलता है कि दूसरी सेल के लिए 100% -30% = 70% रहता है। याद रखें कि इस मामले में तालिका कक्षों में से एक में चौड़ाई विशेषता सेट नहीं होनी चाहिए। ब्राउज़र अपने आप सभी गणना करेगा और तालिका को कोशिकाओं के साथ सही ढंग से फैलाएगा। टेबल के अंदर की सामग्री भी अलग-अलग स्क्रीन पर सही ढंग से खिंचेगी और सिकुड़ेगी।
चरण 4
डिव लेआउट वाली स्थिति में, टैग ब्लॉक डिफ़ॉल्ट रूप से स्क्रीन की पूरी चौड़ाई तक फैले होते हैं और एक के बाद एक बाएं से दाएं, ऊपर से नीचे तक का अनुसरण करते हैं। उनकी ज्यामिति को परिष्कृत करने के लिए, एक CCS वर्ग या पहचानकर्ता (ID) बनाएँ, जिसमें आप निर्दिष्ट करते हैं, उदाहरण के लिए, विशेषताएँ और/या आकार की श्रेणी और बॉक्स (बॉक्स) की स्थिति के लिए। निर्दिष्ट शैली को साइट मार्कअप फ़ाइल से लिंक करना न भूलें और वर्ग (आईडी) को वांछित टैग से बांधें। आमतौर पर इसे स्क्रिप्ट की शुरुआत में रखा जाता है, जो भविष्य की सभी साइट ज्यामिति को परिभाषित करता है:
… … साइट सामग्री। …
या इस तरह:
… … साइट सामग्री। …
CSS नियम का कोड इस प्रकार होगा:
… मेरी कक्षा {
चौड़ाई: 30%;
ऊंचाई: 50%;
}
#मेरी आईडी {
चौड़ाई: 30%;
ऊंचाई: 50%;
}
