ड्रीमविवर में ड्रॉप-डाउन मेनू कैसे बनाएं

विषयसूची:

ड्रीमविवर में ड्रॉप-डाउन मेनू कैसे बनाएं
ड्रीमविवर में ड्रॉप-डाउन मेनू कैसे बनाएं
Anonim

क्या पता

  • पर जाएं इन्सर्ट > फॉर्म > फॉर्म । फॉर्म पर डॉटेड रेड लाइन पर क्लिक करें और Insert> Form > List/Menu पर जाएं। पहुंच-योग्यता विकल्प चुनें।
  • मेनू पर क्लिक करें और उसके गुणों का चयन करें, फिर नए मेनू आइटम जोड़ने के लिए मानों की सूची चुनें। अधिक आइटम जोड़ने के लिए धन चिह्न क्लिक करें।
  • आइटम मान जोड़ें और एक डिफ़ॉल्ट आइटम चुनें। क्रिया जोड़ने के लिए, सम्मिलित करें > फॉर्म > जंप मेनू पर जाएं। जंप मेनू में आइटम जोड़ें और सहेजें।

Dreamweaver आपकी वेबसाइट के लिए ड्रॉप-डाउन मेनू बनाना आसान बनाता है। लेकिन सभी HTML रूपों की तरह, वे थोड़े मुश्किल हो सकते हैं। यह ट्यूटोरियल आपको Dreamweaver में ड्रॉप-डाउन मेनू बनाने के चरणों के बारे में बताएगा।

ड्रीमविवर जंप मेनू

Dreamweaver 8 आपकी वेब साइट में नेविगेशन के लिए एक जंप मेनू बनाने के लिए एक विजार्ड भी प्रदान करता है। मूल ड्रॉप-डाउन मेनू के विपरीत, जब आप समाप्त कर लेंगे तो यह मेनू कुछ करेगा। अपना ड्रॉप-डाउन फॉर्म काम करने के लिए आपको कोई जावास्क्रिप्ट या सीजीआई लिखने की आवश्यकता नहीं होगी। यह ट्यूटोरियल यह भी बताता है कि जंप मेनू बनाने के लिए ड्रीमविवर 8 विज़ार्ड का उपयोग कैसे करें।

सबसे पहले, फॉर्म बनाएं

Image
Image

जंप मेनू जैसे विशेष जादूगरों को छोड़कर, Dreamweaver आपको HTML फॉर्म "काम" करने में मदद नहीं करता है। इसके लिए आपको एक सीजीआई या जावास्क्रिप्ट चाहिए।

जब आप अपनी वेब साइट पर एक ड्रॉप-डाउन मेनू जोड़ रहे हैं, तो सबसे पहले आपको इसके चारों ओर एक फॉर्म की आवश्यकता होती है। Dreamweaver में, सम्मिलित करें मेनू पर जाएँ और प्रपत्र पर क्लिक करें, फिर "फ़ॉर्म" चुनें।

डिज़ाइन दृश्य में प्रपत्र प्रदर्शित करता है

Image
Image

Dreamweaver आपके प्रपत्र स्थान को डिज़ाइन दृश्य में नेत्रहीन रूप से दिखाता है, इसलिए आप जानते हैं कि अपने प्रपत्र तत्वों को कहाँ रखना है क्योंकि ड्रॉप-डाउन मेनू टैग प्रपत्र तत्व के बाहर मान्य नहीं हैं (और काम नहीं करेंगे)। जैसा कि आप छवि में देख सकते हैं, प्रपत्र डिज़ाइन दृश्य में लाल बिंदीदार रेखा है।

सूची/मेनू चुनें

Image
Image

ड्रीमविवर में ड्रॉप-डाउन मेनू को "सूची" या "मेनू" आइटम कहा जाता है। तो अपने फॉर्म में एक जोड़ने के लिए, आपको सम्मिलित करें मेनू पर फॉर्म मेनू में जाना होगा और "सूची/मेनू" चुनें। सुनिश्चित करें कि आपका कर्सर आपके फॉर्म बॉक्स की लाल बिंदु वाली रेखा के भीतर था।

विशेष विकल्प विंडो

Image
Image

ड्रीमविवर ऑप्शंस में एक्सेसिबिलिटी पर एक स्क्रीन है। यदि आप इन पांच विकल्पों को भरते हैं तो आपके ड्रॉप-डाउन मेनू तुरंत अन्य वेबसाइटों की तुलना में अधिक पहुंच योग्य होंगे।

फॉर्म एक्सेसिबिलिटी

Image
Image

पहुंच विकल्प हैं:

लेबल

लेबल फ़ील्ड आपके प्रपत्र तत्व के बगल में टेक्स्ट के रूप में दिखाई देता है। अपने ड्रॉप-डाउन मेनू के लिए एक नाम टाइप करें। यह एक प्रश्न या संक्षिप्त वाक्यांश हो सकता है जिसका ड्रॉप-डाउन मेनू उत्तर देगा।

शैली

HTML में वेब ब्राउज़र में आपके प्रपत्र लेबल की पहचान करने के लिए एक लेबल टैग शामिल है। आपकी पसंद ड्रॉप-डाउन मेनू और लेबल टेक्स्ट को टैग के साथ लपेटना है, लेबल टैग पर "के लिए" विशेषता का उपयोग करने के लिए यह पहचानने के लिए कि यह किस फॉर्म टैग का संदर्भ देता है, या लेबल टैग का उपयोग बिल्कुल नहीं करना है।

स्थिति

आप ड्रॉप-डाउन मेनू के पहले या बाद में अपना लेबल लगा सकते हैं।

प्रवेश कुंजी

आगंतुक "छवि" या विकल्प कुंजियों के साथ एक एक्सेस कुंजी का उपयोग सीधे उस फ़ॉर्म फ़ील्ड पर जाने के लिए कर सकते हैं। यह कीबोर्ड शॉर्टकट आपके फ़ॉर्म को बिना माउस के उपयोग में बहुत आसान बनाता है। alt="

टैब इंडेक्स

टैब इंडेक्स यह है कि वेब पेज के माध्यम से टैब पर कीबोर्ड का उपयोग करते समय उपयोगकर्ताओं को फॉर्म फ़ील्ड तक कैसे पहुंचना चाहिए।

जब आप अपने एक्सेसिबिलिटी विकल्पों को अपडेट कर लें, तो ओके पर क्लिक करें।

मेनू चुनें

Image
Image

एक बार जब आप ड्रीमविवर डिज़ाइन व्यू में अपना ड्रॉप-डाउन मेनू प्रदर्शित कर लेते हैं, तो आपको विभिन्न तत्वों को जोड़ने की आवश्यकता होती है। सबसे पहले ड्रॉप-डाउन मेन्यू पर क्लिक करके उसे चुनें। Dreamweaver यह दिखाने के लिए कि आपने इसे चुना है, ड्रॉप-डाउन मेनू के चारों ओर एक और बिंदीदार रेखा लगाएगा।

मेनू गुण

Image
Image

गुण मेनू उस ड्रॉप-डाउन मेनू के लिए सूची/मेनू गुणों में बदल जाएगा। वहां आप अपने मेनू को एक आईडी दे सकते हैं (जहां यह "चुनें" कहता है), तय करें कि क्या आप इसे एक सूची या मेनू बनाना चाहते हैं, इसे अपनी स्टाइल शीट से स्टाइल क्लास दें, और ड्रॉप-डाउन को मान असाइन करें।

सूची और मेनू में क्या अंतर है?

Dreamweaver मेनू ड्रॉप-डाउन मेनू को कोई भी ड्रॉप-डाउन कॉल करता है जो केवल एक चयन की अनुमति देता है। एक "सूची" ड्रॉप-डाउन में कई विकल्पों की अनुमति देती है और एक से अधिक आइटम उच्च हो सकती है।

यदि आप चाहते हैं कि ड्रॉप-डाउन मेनू कई पंक्तियों में ऊंचा हो, तो इसे "सूची" प्रकार में बदलें और "चयन" बॉक्स को अनियंत्रित छोड़ दें।

नई सूची आइटम जोड़ें

Image
Image

अपने मेनू में नए आइटम जोड़ने के लिए, "सूची मान…" बटन पर क्लिक करें, जो उपरोक्त विंडो को खोलता है। फिर, पहले बॉक्स में अपना आइटम लेबल टाइप करें। यह पेज पर प्रदर्शित होगा।

और जोड़ें और फिर से क्रमित करें

Image
Image

अधिक आइटम जोड़ने के लिए प्लस आइकन पर क्लिक करें। यदि आप उन्हें सूची बॉक्स में पुनः क्रमित करना चाहते हैं, तो दाईं ओर ऊपर और नीचे तीरों का उपयोग करें।

सभी वस्तुओं का मूल्य दें

Image
Image

अगर आप वैल्यू को खाली छोड़ देते हैं, तो लेबल फॉर्म में चला जाएगा। लेकिन आप अपने सभी आइटम मान दे सकते हैं - अपने फॉर्म में वैकल्पिक जानकारी भेजने के लिए। आप जम्प मेन्यू और हाइपरलिंकिंग जैसी चीजों के लिए इसका बहुत उपयोग करेंगे।

एक डिफ़ॉल्ट चुनें

Image
Image

वेब पेज डिफ़ॉल्ट आइटम के रूप में पहले सूचीबद्ध ड्रॉप-डाउन आइटम को प्रदर्शित करने के लिए डिफ़ॉल्ट हैं। लेकिन यदि आप किसी भिन्न का चयन करना चाहते हैं, तो इसे गुण मेनू पर "आरंभ में चयनित" बॉक्स में हाइलाइट करें।

डिज़ाइन व्यू में अपनी सूची देखें

Image
Image

एक बार जब आप गुणों का संपादन कर लेते हैं, तो ड्रीमविवर आपकी ड्रॉप-डाउन सूची को चयनित डिफ़ॉल्ट मान के साथ दिखाएगा।

कोड व्यू में अपनी सूची देखें

Image
Image

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

ब्राउज़र में सहेजें और देखें

Image
Image

यदि आप दस्तावेज़ को सहेजते हैं और इसे वेब ब्राउज़र में देखते हैं, तो आप देख सकते हैं कि आपका ड्रॉप-डाउन मेनू वैसा ही दिखता है जैसा आप इसकी अपेक्षा करते हैं।

लेकिन यह कुछ नहीं करता…

Image
Image

हमने ऊपर जो मेनू बनाया है वह ठीक दिखता है, लेकिन यह कुछ नहीं करता है। इसे कुछ करने के लिए प्राप्त करने के लिए, आपको फॉर्म पर ही एक फॉर्म एक्शन सेट करना होगा।

सौभाग्य से, ड्रीमविवर में एक अंतर्निर्मित ड्रॉप-डाउन मेनू फॉर्म है जिसे आप फॉर्म, सीजीआई, या स्क्रिप्टिंग के बारे में जानने की आवश्यकता के बिना तुरंत अपनी साइट पर उपयोग कर सकते हैं। इसे जंप मेनू कहते हैं।

ड्रीमविवर जंप मेनू नामों और यूआरएल के साथ एक ड्रॉप-डाउन मेनू सेट करता है। फिर आप मेनू में एक आइटम चुन सकते हैं, और वेब पेज उस स्थान पर चला जाएगा, जैसे कि आपने किसी लिंक पर क्लिक किया था।

इन्सर्ट मेन्यू में जाएं और फॉर्म चुनें और फिर जम्प मेन्यू।

जंप मेनू विंडो

Image
Image

मानक ड्रॉप-डाउन मेनू के विपरीत, जंप मेनू आपके लिए एक नई विंडो खोलता है जिसमें आप अपने मेनू आइटम को नाम दे सकते हैं और इस बारे में विवरण जोड़ सकते हैं कि फ़ॉर्म को कैसे काम करना चाहिए।

पहले आइटम के लिए, "un titled1" टेक्स्ट को उस टेक्स्ट में बदलें जिसे आप पढ़ना चाहते हैं और एक URL जोड़ें।

अपने जंप मेनू में आइटम जोड़ें

Image
Image

अपने जम्प मेन्यू में एक नया आइटम जोड़ने के लिए ऐड आइटम पर क्लिक करें। जितने चाहें उतने आइटम जोड़ें।

जंप मेनू विकल्प

Image
Image

एक बार जब आप अपने इच्छित सभी लिंक जोड़ लेते हैं, तो आपको अपने विकल्प चुनने चाहिए:

यूआरएल खोलें

यदि आपके पास एक फ्रेमसेट है, तो आप लिंक को एक अलग फ्रेम में खोल सकते हैं। या आप मुख्य विंडो के विकल्प को एक विशेष लक्ष्य में बदल सकते हैं ताकि URL एक नई विंडो या अन्य जगहों पर खुले।

मेनू का नाम

अपने मेनू को पेज के लिए एक विशिष्ट आईडी दें। यह आवश्यक है ताकि स्क्रिप्ट सही ढंग से काम करे। यह आपको एक रूप में कई जंप मेनू रखने की भी अनुमति देता है - उन सभी को अलग-अलग नाम दें।

मेनू के बाद गो बटन डालें

मैं इसे चुनना पसंद करता हूं क्योंकि कभी-कभी मेनू बदलने पर स्क्रिप्ट काम नहीं करती है। यह अधिक सुलभ भी है।

यूआरएल बदलने के बाद पहले आइटम का चयन करें

इसे चुनें यदि आपके पास पहले मेनू आइटम के रूप में "एक का चयन करें" जैसा संकेत है। यह सुनिश्चित करेगा कि वह आइटम पृष्ठ पर डिफ़ॉल्ट बना रहे।

जंप मेन्यू डिजाइन व्यू

Image
Image

आपके पहले मेनू की तरह ही, Dreamweaver आपके जम्प मेनू को डिज़ाइन दृश्य में डिफ़ॉल्ट आइटम दृश्यमान के साथ सेट करता है। फिर आप किसी अन्य की तरह ड्रॉप-डाउन मेनू को संपादित कर सकते हैं।

यदि आप इसे संपादित करते हैं, तो सुनिश्चित करें कि आइटम पर कोई भी आईडी न बदलें; अन्यथा, स्क्रिप्ट काम नहीं कर सकती।

ब्राउज़र में मेनू जंप करें

Image
Image

फाइल को सेव करने और F12 दबाने पर पेज आपके पसंदीदा ब्राउज़र में प्रदर्शित होगा। वहां आप एक विकल्प का चयन कर सकते हैं, "जाओ" पर क्लिक करें और जम्प मेनू काम करता है।

सिफारिश की: