"हेडर", या वेब पेज का शीर्ष, आपकी साइट को विशिष्ट बनाता है, इसे दूसरों से अलग करने और आपके इंटरनेट प्रोजेक्ट की बारीकियों को प्रतिबिंबित करने की अनुमति देता है। एक मूल और अच्छी तरह से बनाए गए हेडर की मदद से, आप किसी भी वेब पेज को सजा सकते हैं और परिष्कृत कर सकते हैं, और हेडर को स्वयं बनाने के लिए, आपको यह सीखना होगा कि इस वेब तत्व को कैसे लेआउट करना है।
अनुदेश
चरण 1
यदि आप चाहते हैं कि आपकी साइट में स्थिर, स्थिर आयाम हों, तो आपको एक स्थिर शीर्षलेख बनाना होगा जो स्क्रीन की चौड़ाई में परिवर्तन के आधार पर नहीं बदलता है। हेडर की चौड़ाई और ऊंचाई निर्धारित करें (उदाहरण के लिए, 996x230) और निम्नलिखित सीएसएस कोड का उपयोग करके शीर्ष ब्लॉक में एक पृष्ठभूमि छवि डालें, जहां हेडर-1.jpg
पृष्ठभूमि: # a6b7d3 url (img / शीर्षलेख-1.jpg) दोहराना नहीं;
चौड़ाई: 996px;
ऊंचाई: 230 पीएक्स;
} इस प्रकार के हेडर के लिए HTML कोड इस तरह दिखेगा:
चरण दो
यदि साइट इस तरह से बनाई गई है कि इसके आयामों को स्क्रीन की चौड़ाई में समायोजित किया जाता है, तो हेडर को सभी प्रमुख मॉनिटर संकल्पों को ध्यान में रखते हुए टाइपसेट होना चाहिए। ऐसे हेडर की अधिकतम चौड़ाई 1920 पिक्सल होनी चाहिए। ऐसा हेडर डालने के लिए, CSS कोड का उपयोग करें: #header {background: # a6b7d3 url (img / Header-2.jpg) नो-रिपीट सेंटर; ऊंचाई: 250px;} इस मामले में HTML कोड पिछले वाले के समान है। सीएसएस कोड को कुछ मापदंडों में बदल दिया गया है - अब इसमें हेडर छवि को केंद्रित करने के लिए एक विशेषता है, जो इसे किसी भी स्क्रीन चौड़ाई में पृष्ठभूमि में फिट करने की अनुमति देती है।
चरण 3
आप एक अधिक जटिल शीर्षलेख भी बना सकते हैं, कई पृष्ठभूमि ब्लॉकों में काटकर, जो व्यूपोर्ट के आकार के आधार पर उनकी स्थिति बदल देगा। इस तरह के हेडर के लिए सीएसएस अधिक जटिल और व्यापक है, और इसमें ब्राउज़र विंडो के फ़्लोटिंग आयामों के अनुसार कई पृष्ठभूमि तत्वों को दोहराना शामिल है जिसमें आपकी साइट देखी जा सकती है।
