अपनी साइट पर दृश्य संकेत जोड़ें

Sep 11, 2025
कैसे करना है

यह वेबसाइट उपयोगकर्ताओं के लिए केवल एक लिंक पर क्लिक करने के लिए कष्टप्रद है कि वेब पेज ब्याज की नहीं है, अपना समय बर्बाद कर रहा है। पृष्ठभूमि पृष्ठभूमि में एक तस्वीर का उपयोग करने से उपयोगकर्ताओं को पृष्ठ लोड करने से पहले किसी लिंक से अपेक्षा करने के लिए एक संकेत देने का एक शानदार तरीका है। आप इस तकनीक का एक महान उदाहरण देख सकते हैं इवान Aivazvsky जीवन साइट ।

पृष्ठ पृष्ठभूमि का उपयोग करने से डिस्लेक्सिक पाठकों या उन लोगों की सहायता भी हो सकती है जो अंग्रेजी को एक अतिरिक्त भाषा के रूप में बोलते हैं। इन मामलों में आप उपयोगकर्ता को अतिरिक्त जानकारी को बहुत अधिक पाठ के साथ ओवरलोड किए बिना संवाद कर सकते हैं।

    [2 9] एक आकर्षक उपयोगकर्ता अनुभव बनाने के लिए 10 कदम

किसी भी प्रभाव के साथ जो पृष्ठभूमि छवियों के साथ पाठ को जोड़ता है, सुनिश्चित करें कि आपका टेक्स्ट हर समय पठनीय बना रहता है। यह आपके नेविगेशन लिंक पर अर्ध-पारदर्शी रंग रखकर हासिल किया जा सकता है। रंग अंधापन जैसे मुद्दों के लिए यूएक्स पठनीयता पर भी विचार करें जो प्रभावित करता है कि उपयोगकर्ता रंगीन पाठ की व्याख्या करने में सक्षम हैं।

यहां हम आपको दिखाएंगे कि उपयोगी के साथ एक इंटरैक्टिव नेविगेशन डिस्प्ले कैसे बनाएं और सुलभ इशारा देना।

इस ट्यूटोरियल के लिए फाइलें डाउनलोड करें यहां [4 9] ।

The Ivan Aivazvsky life site changes the background images as you hover over links (click the image to go to the website)

इवान Aivazvsky Life साइट पृष्ठभूमि छवियों को बदलती है क्योंकि आप लिंक पर होवर करते हैं (वेबसाइट पर जाने के लिए छवि पर क्लिक करें)

01. HTML दस्तावेज़ बनाएँ

मुख्य एचटीएमएल दस्तावेज़ टेम्पलेट बनाएं, जिसमें एचटीएमएल कंटेनर सिर और शरीर अनुभाग को संग्रहित करता है।

हेड सेक्शन विवरण जानकारी जैसे दस्तावेज़ शीर्षक, साथ ही बाहरी संसाधनों के लिंक - यानी सीएसएस और जावास्क्रिप्ट स्टोर करता है।

शरीर दस्तावेज़ सामग्री को संग्रहीत करता है। शरीर की एक महत्वपूर्ण विशेषता 'डेटा-थीम' विशेषता है जिसे उसने लागू किया है - सीएसएस प्रस्तुति परिवर्तनों को ट्रिगर करने के लिए जावास्क्रिप्ट द्वारा संशोधित किया जाएगा। 

 & lt;! डॉक्टाइप एचटीएमएल और जीटी;
& lt; html & gt;
& lt; हेड और जीटी;
& lt; शीर्षक & gt; नेविगेशन पृष्ठभूमि & lt; / शीर्षक & gt;
& lt; लिंक rel = "stylesheet" प्रकार = "टेक्स्ट / सीएसएस" Href = "styles.css" / & gt;
& lt; स्क्रिप्ट प्रकार = "टेक्स्ट / जावास्क्रिप्ट" src = "code.js" & gt; & lt; / स्क्रिप्ट & gt;
& lt; / सिर & gt;
& lt; बॉडी डेटा-थीम और जीटी;
*** चरण 2
& lt; / शरीर & gt;
& lt; / html & gt;

02. नेविगेशन HTML जोड़ें

पृष्ठ सामग्री में एक नेविगेशन कंटेनर होता है जिसमें लिंक होते हैं। नेविगेशन की आईडी और चाइल्ड लिंक के शीर्षक का उपयोग जावास्क्रिप्ट द्वारा इंटरैक्शन के लिए सुनने के लिए किया जाएगा और शरीर के कंटेनर के हिस्से के रूप में परिभाषित 'डेटा-थीम' विशेषता को बदल दिया जाएगा। 

 & lt; nav id = "mainnav" & gt;
& lt; a href = "#" शीर्षक = "पृष्ठ 1" & gt; पृष्ठ 1 & lt; / a & gt;
& lt; a href = "#" शीर्षक = "पृष्ठ 2" & gt; पृष्ठ 2 & lt; / a & gt;
& lt; a href = "#" शीर्षक = "पृष्ठ 3" & gt; पृष्ठ 3 & lt; / a & gt;
& lt; / nav & gt;

03. CSS फ़ाइल आरंभ करें

एचटीएमएल सामग्री अब पूरी हो गई है, इसलिए 'styles.css' नामक एक नई फ़ाइल बनाएं। यह फ़ाइल सीएसएस स्वरूपण नियमों को संग्रहीत करती है जो दृश्य प्रस्तुति को नियंत्रित करती हैं। इस फ़ाइल को HTML दस्तावेज़ और उसके शरीर को एक सफेद पृष्ठभूमि और काले पाठ का उपयोग करके पूर्ण स्क्रीन पर प्रदर्शित करने के लिए नियमों के साथ शुरू करें।

[9 5] एचटीएमएल, बॉडी { प्रदर्शन क्षेत्र; चौड़ाई: 100%; ऊंचाई: 100%; मार्जिन: 0; पैडिंग: 0; फ़ॉन्ट-परिवार: हेल्वेटिका, सैन्स-सेरिफ़; रंग: # 000; }

04. दृश्यों के लिए नियम निर्धारित करें

प्रभाव के लिए एक महत्वपूर्ण घटक दस्तावेज़ निकाय पर लागू 'डेटा-थीम' विशेषता का उपयोग है। एक नियम डेटा के डिफ़ॉल्ट व्यवहार को परिभाषित करने के लिए सेट किया गया है - जिसे हम पृष्ठभूमि स्थिति के लिए उपयोग करेंगे और संक्रमण बदलते हैं।

यह प्रत्येक व्यक्तिगत विषय के लिए इन नियम परिभाषाओं को दोहराने की आवश्यकता से बचाता है, जो आपके वेब पृष्ठों को बनाए रखने में आसान बनाता है।

[9 5] [डेटा-थीम] { संक्रमण: पृष्ठभूमि 1s; पृष्ठभूमि: नो-रिपीट सेंटर सेंटर; पृष्ठभूमि आकार: कवर; }

05. विषय का डिजाइन

प्रत्येक विषय का डिज़ाइन डेटा-थीम विशेषता के मान का उपयोग करके सेट किया गया है।

वांछित प्रभाव प्राप्त करने के लिए, हम विषय के प्रत्येक संस्करण के लिए एक अलग पृष्ठभूमि छवि सेट कर रहे हैं। पिछला चरण उन सभी डिफ़ॉल्ट सेटिंग्स का ख्याल रखता है जो इन विषयों को विरासत में लेंगे।

[9 5] [डेटा-थीम = "पृष्ठ 1"] { पृष्ठभूमि-छवि: यूआरएल (image1.jpg); } [डेटा-थीम = "पृष्ठ 2"] { पृष्ठभूमि-छवि: यूआरएल (image2.jpg); } [डेटा-थीम = "पृष्ठ 3"] { पृष्ठभूमि-छवि: यूआरएल (image3.jpg); }

06. एक नेविगेशन कंटेनर जोड़ें

नेविगेशन कंटेनर का उपयोग यह सुनिश्चित करने के लिए किया जाता है कि स्क्रीन के बीच में एक सतत चौड़ाई के साथ लिंक प्रस्तुत किए जाते हैं। क्षैतिज मार्जिनिंग के लिए उपयोग की जाने वाली 50% की चौड़ाई और ऑटो गणना लागू की जाती है। यह दृष्टिकोण उपयोगकर्ता के स्क्रीन रिज़ॉल्यूशन / आकार के बावजूद स्थिरता की गारंटी प्रदान करता है। 

 # मैनेव {
  प्रदर्शन क्षेत्र;
  चौड़ाई: 50%;
  मार्जिन: 0 ऑटो 0 ऑटो; }

07. शैली नेविगेशन लिंक

नेविगेशन कंटेनर के अंदर दिए गए लिंक को कंटेनर की चौड़ाई को अनुकूलित करने के लिए सेट ब्लॉक के रूप में प्रदर्शित किया जाना चाहिए। इसका मतलब है कि उनकी 100% चौड़ाई कंटेनर की चौड़ाई से परिभाषित की जाती है। यह सुनिश्चित करने के लिए कि वे पृष्ठभूमि छवियों से बाहर खड़े हैं, पैडिंग, सीमाओं और पृष्ठभूमि रंग भी लागू होते हैं। 

 # मैनेव ए {
  प्रदर्शन क्षेत्र;
  चौड़ाई: 100%;
  पृष्ठभूमि: आरजीबीए (255,255,255, .3);
  रंग: # 000;
  पैडिंग: 1em;
  मार्जिन-टॉप: .5em;
  सीमा: 1px ठोस; }
# मैनेव ए: होवर {
  पृष्ठभूमि: आरजीबीए (0,0,0, .5);
  रंग: #fff; }

08. इवेंट श्रोताओं को लिंक करें

सीएसएस अब पूरा हो गया है, इसलिए जावास्क्रिप्ट के लिए 'code.js' नामक एक नई फ़ाइल बनाएं।

प्रभाव को एक माउसओवर घटना पर सुनने और प्रतिक्रिया करने के लिए नेविगेशन के अंदर प्रत्येक लिंक की आवश्यकता होती है जहां उपयोगकर्ता एक लिंक पर हो जाता है। यह श्रोता दस्तावेज़ निकाय के डेटा-थीम विशेषता के लिए लिंक का 'शीर्षक' मान लागू करता है - इसलिए सीएसएस में शैलियों को ट्रिगर करना।

पृष्ठ विंडो लोड होने के बाद, नेविगेशन लिंक नोड्स को सरणी में रखा जाता है, जिस पर लूप के लिए ईवेंट श्रोता को लागू करने के लिए उपयोग किया जाता है। 

 window.addeventlistener ("लोड", फ़ंक्शन () {
  var nodes = document.queryellecterall ("# मेननाव ए");
  के लिए (var i = 0; i & lt; nodes.length; i ++) {
  नोड्स [i] .AddeventListener ("माउसओवर", फ़ंक्शन () {
  document.body.setattribute ("डेटा-थीम", यह .getattribute ("शीर्षक"));
  });
  }
});

यह आलेख मूल रूप से वेब डिजाइनर अंक 262 में दिखाई दिया। यहां खरीदें !

संबंधित आलेख:

    [2 9] 2017 के लिए 10 वेबसाइट नेविगेशन रुझान
[2 9] एक आकर्षक उपयोगकर्ता अनुभव बनाने के लिए 10 कदम [4 9] [2 9] लियोनी वाटसन पर क्यों पहुंच वेब डिज़ाइन प्रक्रियाओं का एक अभिन्न हिस्सा होना चाहिए [4 9]

कैसे करना है - सर्वाधिक लोकप्रिय लेख

Cloud storage for photos and images: How to choose the best cloud for your work

कैसे करना है Sep 11, 2025

(छवि क्रेडिट: गेट्टी छवियां) [1 9] क्लाउड स्टोर�..

Tiktok पर एक वीडियो कैसे संपादित करें

कैसे करना है Sep 11, 2025

(छवि क्रेडिट: मेबेल Wynne) [1 9] Tiktok पर एक वीडियो को स�..

मांसपेशियों को कैसे आकर्षित करें

कैसे करना है Sep 11, 2025

गति में मांसपेशियों को आकर्षित करने के बारे में ज..

घटक को एनिमेट करने के लिए प्रतिक्रिया वसंत का उपयोग कैसे करें

कैसे करना है Sep 11, 2025

(छवि क्रेडिट: मैट क्राउच) [1 9] प्रतिक्रिया वसं�..

How to create an app with Vue.js

कैसे करना है Sep 11, 2025

जावास्क्रिप्ट पारिस्थितिक तंत्र एक दशक से अधिक �..

एक रंगीन विचलन प्रभाव बनाएं

कैसे करना है Sep 11, 2025

रंगीन विचलन (विरूपण), जिसे 'रंग फ्रिंजिंग' भी कहा ज�..

What is a terminator line?

कैसे करना है Sep 11, 2025

प्रकाश के कई पहलू हैं जिन्हें आपको फॉर्म को व्यक्..

तेलों में अपने ब्रशस्ट्रोक में सुधार

कैसे करना है Sep 11, 2025

तेल पेंट्स मजबूत और रोचक ब्रशवर्क को प्राप्त करने के लिए आदर्श माध्यम प्�..

श्रेणियाँ