हेडलाइनहरू सजावट गर्न फन्टहरू, बोर्डहरू र छविहरू प्रयोग गर्नुहोस्
धेरै वेब पृष्ठहरूमा हेडलाइनहरू सामान्य छन्। वास्तवमा, कुनै पनि पाठ कागजातमा कम से कम एक शीर्षक भएको हुन्छ ताकि तपाईं पढ्नु भएका शीर्षकको शीर्षक जान्दछन्। यी शीर्षकहरू एचटीएमएल शीर्षक तत्वहरू - h1, h2, h3, h4, h5, र h6 को प्रयोग गरेर कोडित गरिएको छ।
केहि साइटहरूमा, तपाइँ यी शीर्षकहरू यी तत्वहरू प्रयोग नगरी यो शीर्षकहरू कोडित छन्। यसको सट्टा, हेडलाइन्सहरूले विशेष वर्ग गुणहरूसँग थपिएका अनुच्छेदहरू प्रयोग गर्न सक्दछ, वा वर्ग तत्वहरूसँग विभाजन। यस गलत अभ्यासको बारेमा मैले प्रायः कारण भनेको डिजाइनर "हेडिंग हेराइहरू मन परेन"। पूर्वनिर्धारित रूपमा, शीर्षकहरू बोल्डमा प्रदर्शित हुन्छन् र तिनीहरू आकारमा ठूला हुन्छन्, विशेष गरी एच 1 र एच 2 तत्वहरू जुन पृष्ठको बाँकी बाहेक धेरै फन्ट फन्ट साइजमा प्रदर्शन गर्दछ। ध्यान राख्नुहोस् यो यी तत्वहरूको पूर्वनिर्धारित रूप हो! सीएसएसको साथ, तपाईं हेडिंग हेर्नु भए तापनि तपाई चाहनुहुन्छ! तपाईं फन्ट साइज परिवर्तन गर्न सक्नुहुन्छ, बोल्ड हटाउनुहोस्, र धेरै धेरै। शीर्षकहरू पृष्ठको हेडलाइनहरू कोड गर्न उचित तरिका हो। यहाँ केही कारणहरू छन्।
हेडिंग ट्यागहरू किन प्रयोग गर्नुहोस् डिभिजन र स्टाइलिङ भन्दा बढी
खोज इन्जिनहरू जस्तै हेडिंग ट्यागहरू
यो शीर्षकहरू प्रयोग गर्ने सबैभन्दा उत्तम कारण हो, र तिनीहरूलाई सही क्रममा प्रयोग गर्नुहोस् (जस्तै h1, त्यसपछि h2, त्यसपछि h3, आदि)। खोज इन्जिनले शीर्ष शीर्षक ट्याग भित्र समावेश टेक्स्टमा राख्दछन् किनभने त्यहाँ त्यो पाठको आधारभूत मान हो। अन्य शब्दहरूमा, तपाईंको पृष्ठ शीर्षक H1 लेबल गरेर, तपाईंले खोजी इन्जिन स्पाइडरलाई बताउनुहुन्छ जुन पृष्ठको # 1 फोकस हो। H2 हेडिंग्स # 2 जोर, र यति मा।
तपाईं आफ्नो हेडलाइनहरू परिभाषित गर्न कुन कक्षाहरू प्रयोग गर्नुभन्दा सम्झना राख्नुहुन्छ
जब तपाइँ जान्नुहुन्छ कि तपाइँका सबै वेब पेजहरू H1 जो बोल्ड, 2em, र पहेंलो हुने गर्दछन्, त्यसपछि तपाईले तपाईको शैलीपट्टीमा एक पटक परिभाषित गर्न सक्नुहुनेछ र गरे। 6 महिना पछि, जब तपाइँ अर्को पृष्ठ थप्दै हुनुहुन्छ भने, तपाइँ भर्खरै तपाइँको पृष्ठको शीर्षमा H1 ट्याग थप्नु हुन्छ, तपाईलाई अन्य पृष्ठहरूमा फर्कन आवश्यक छैन कि तपाइँ कुन शैली आइडी वा क्लाउड जुन तपाईले मुख्य परिभाषित गर्न प्रयोग गर्नुहोला शीर्षक र उप-प्रमुखहरू।
तिनीहरू एक मजबूत पेज आउटलाइन प्रदान गर्छन्
रूपरेखा पाठ पढ्न सजिलो बनाउँदछ। यसैले धेरै अमेरिकी स्कूलहरूले विद्यार्थीहरूलाई रूपरेखा लेख्न अघि सिकेपछि उनी पेपर लेख्न सिके। जब तपाइँ हेडलाइन ट्यागलाई आउटलाइन ढाँचामा प्रयोग गर्नुहुन्छ, तपाईंको पाठसँग स्पष्ट ढाँचा छ जुन छिट्टै स्पष्ट हुन्छ। साथै, त्यहाँ उपकरणहरू छन् जुन पृष्ठ रूपरेखा एक समक्रमण उपलब्ध गराउन समीक्षा गर्न सक्छन्, र यी शीर्षक रेखाको लागि शीर्षक ट्यागमा निर्भर गर्दछ।
तपाईंको पृष्ठले शैलियन्टलाई समेत घृणा गर्दछ
सबैजनाले शैली पाना हेर्न वा प्रयोग गर्न सक्दैनन् (र यो # 1 मा आउँछ - खोज इन्जिनहरूले तपाईंको पृष्ठको सामग्री (पाठ) हेर्न, शैली पानाहरू होइन)। यदि तपाइँ हेडिंग ट्यागहरू प्रयोग गर्नुहुन्छ भने, तपाइँ आफ्नो पृष्ठहरू अधिक पहुँचयोग्य बनाउनुहुन्छ किनकि शीर्षकले जानकारी प्रदान गर्दछ जुन DIV ट्याग होइन।
यो स्क्रिन पाठक र वेबसाइट पहुँचको लागि सहयोगी छ
शीर्षकहरूको उचित प्रयोग कागजातमा एक तार्किक संरचना सिर्जना गर्दछ। यो कुन स्क्रिन पाठकहरूले प्रयोगकर्तालाई अक्षम पार्ने व्यक्तिको पहुँच गर्न, दृष्टि हानीसँग प्रयोगकर्तालाई "पढ" साइट प्रयोग गर्नेछ।
पाठ र तपाईंको हेडलाइनहरूको फन्ट स्टाइल गर्नुहोस्
हेडिंग ट्यागको "ठूलो, साहस, र बदसूरत" समस्याबाट टाढाको सबै भन्दा राम्रो तरिका हो कि तपाईले तिनीहरूलाई हेर्न चाहानु भएको पाठ शैली हो। वास्तवमा, जब म नयाँ वेबसाइटमा काम गरिरहेको छु, म सामान्य रूपमा अनुच्छेद, h1, h2, र h3 शैलीहरू लेख्छु। म सामान्यतया केवल फन्ट परिवार र साइज / वजनको साथ छु। उदाहरणका लागि, यो नयाँ साइटको लागि एक प्रारम्भिक शैली पाना हुन सक्छ (यी केवल केहि उदाहरण शैलीहरू जुन प्रयोग गर्न सकिन्छ):
शरीर, html {मार्जिन: 0; padding: 0; } p {फन्ट: 1em एरिड, जेनेभा, हेलभेटिका, सेन्स सेरिफ; } h1 {फन्ट: बोल्ड 2em "टाइम्स न्यु रोमन", टाइम्स, सेरिफ; } h2 {फन्ट: बोल्ड 1.5em "टाइम्स न्यु रोमन", टाइम्स, सेरिफ; } h3 {फन्ट: बोल्ड 1.2em एरिड, जिनेवा, हेलभेटिका, सेन्स सेरिफ; }तपाईं आफ्नो शीर्षकको फन्टहरू परिमार्जन गर्न वा पाठ शैली वा पाठ रङ परिवर्तन गर्न सक्नुहुनेछ। यी सबै तपाईंको "बदसूरत" शीर्षकलाई बढी जीवित र तपाईंको डिजाईनको साथमा राख्नु हुनेछ।
h1 {फन्ट: बोल्ड इटालिक 2em / 1em "टाइम्स न्यु रोमन", "एमएस सेरिफ", "न्यू यर्क", सेरिफ; मार्जिन: 0; padding: 0; रंग: # e7ce00; }बर्डर माथि हेडलाइनहरू ड्रेस गर्न सक्नुहुन्छ
तपाईंको सुर्खियों सुधार गर्न सीमाहरू एक उत्कृष्ट तरिका हो। र सीमाना थप्न सजिलो छ। तर सीमानाहरूसँग प्रयोग गर्न नबिर्सनुहोस् - तपाईंलाई आफ्नो शीर्षकको प्रत्येक पक्षमा सिमाना पर्दैन। र तपाईले मात्र सादा बोरिंग सिमाना भन्दा बढी प्रयोग गर्न सक्नुहुनेछ।
h1 {फन्ट: बोल्ड इटालिक 2em / 1em "टाइम्स न्यु रोमन", "एमएस सेरिफ", "न्यू यर्क", सेरिफ; मार्जिन: 0; padding: 0; रंग: # e7ce00; सीमा-माथि: ठोस # e7ce00 मध्यम; सीमा-तल: बिन्दु # e7ce00 पतली; चौडाई: 600px; }मैले मेरो नमूना शीर्षकमा शीर्ष र तल्लो सीमानालाई केहि रोचक दृश्य शैलीहरू परिचय गर्न थपे। तपाईं सीमाहरू थप्न सक्नुहुनेछ जुन तपाइँ चाहानुहुन्छ कि तपाइँ शैली डिजाइन प्राप्त गर्न चाहानुहुन्छ।
आफ्नो शीर्षकलाई पनि थप Pizazz को लागि पृष्ठभूमि छविहरू थप्नुहोस्
धेरै वेब साइटहरूमा हेडर सेक्शन पृष्ठको शीर्षमा रहेको छ जुन एक शीर्षक समावेश गर्दछ - सामान्यतया साइट शीर्षक र ग्राफिक। प्रायजसो डिजाइनरहरू यसलाई दुई फरक तत्त्वको रूपमा सोच्छन्, तर तपाईंसँग छैन। यदि ग्राफिक त्यहाँ मात्र शीर्षक सजाने को लागी छ भने, किन किन हेडिङ शैलीहरूमा थपिदैन?
h1 {फन्ट: बोल्ड इटालिक 3em / 1em "टाइम्स न्यु रोमन", "एमएस सेरिफ", "न्यू यर्क", सेरिफ; पृष्ठभूमि: #fff url ("fancyheadline.jpg") दोहोरो दोहोरो; padding: 0.5em 0 9 0px 0; text-align: center; मार्जिन: 0; सीमा-तल: ठोस # e7ce00 0.25em; रंग: # e7ce00; }यो शीर्षकमा चाल यो हो कि म जान्दछु मेरो छवि 9 0 पिक्सल लामो छ। यसैले मैले 90px (padding: 0.5 0 9 0px 0p;) को शीर्षक को तल्लोमा padding जोडयो। तपाईं हेडलाइनको पाठ पाउन चाहानुहुन्छ जहाँ तपाइँ यो चाहानुहुन्छ भनेर मार्जिन, रेखा-उचाइ, र प्याडिङसँग खेल्न सक्नुहुन्छ।
तस्बिरहरू प्रयोग गर्दा सम्झँदा यो कुरा हो कि यदि तपाइँसँग एक लेआउटत्मक वेबसाइट छ (जुन तपाइँले गर्नुपर्छ) कि स्क्रिन आकार र यन्त्रहरूमा आधारित परिवर्तनहरू, तपाईलाई शीर्षकमा सधैँ एकै आकारमा हुने छैन। यदि तपाइँलाई आफ्नो शीर्षक सही आकार हुन आवश्यक छ भने, यो समस्या हुन सक्छ। यो सामान्यतया उनीहरूले हेडलाइनमा पृष्ठभूमि छविहरू जोगिनका कारणहरूमध्ये एक हो, किनकि तिनीहरू कहिलेकाहीँ हेर्न सक्दछन्।
हेडलाइनहरूमा छवि प्रतिस्थापन
यो वेब डिजाइनरहरूको लागि अर्को लोकप्रिय प्रविधि हो किनभने यो तपाईंलाई ग्राफिकल हेडलाइन सिर्जना गर्न र त्यस छविको साथ हेडिंग ट्यागको पाठलाई प्रतिस्थापन गर्न दिन्छ। यो वेब डिजाइनरबाट सच्चा बहुमूल्य अभ्यास धेरै कम फन्टहरूमा पहुँच थियो र उनीहरूको काममा थप विदेशी फन्टहरू प्रयोग गर्न चाहन्थे। वेब फन्टहरूको उदय साँच्चै परिवर्तन भएको छ कि डिजाइनरहरू साइटहरू कसरी पुग्छन्। हेडलाइनहरू अब विस्तृत फन्टको सेटमा लिन सकिन्छ र छविहरू इम्बेडेड गरिएका फन्टहरूसँग अब आवश्यक पर्दैन। यस्तो रूपमा, तपाइँ केवल पुरानो साइटहरूमा सुर्खियोंका लागि CSS छवि प्रतिस्थापन फेला पार्नेछ जुन अझ बढी आधुनिक अभ्यासहरूमा अपडेट गरिएको छैन।
जेनिफर क्रिनिन द्वारा मूल लेख। 9/6/17 मा जेरेमी गिरर्ड द्वारा सम्पादित