ड्रीमवेवर आपकी वेबसाइट के लिए ड्रॉप-डाउन मेनू बनाना आसान बनाता है। लेकिन सभी एचटीएमएल रूपों की तरह वे थोड़ा मुश्किल हो सकते हैं। यह ट्यूटोरियल आपको Dreamweaver में ड्रॉप-डाउन मेनू बनाने के चरणों के माध्यम से चलाएगा।
Dreamweaver कूद मेनू
ड्रीमवेवर 8 आपकी वेबसाइट पर नेविगेशन के लिए एक जंप मेनू बनाने के लिए एक विज़ार्ड भी प्रदान करता है। मूल ड्रॉप-डाउन मेनू के विपरीत, यह मेनू वास्तव में कुछ समाप्त होने पर कुछ करेगा। काम करने के लिए अपना ड्रॉप-डाउन फॉर्म प्राप्त करने के लिए आपको कोई जावास्क्रिप्ट या सीजीआई लिखना नहीं होगा। यह ट्यूटोरियल भी बताता है कि एक कूद मेनू बनाने के लिए ड्रीमवेवर 8 विज़ार्ड का उपयोग कैसे करें।
20 में से 01
पहले फॉर्म बनाएं
एचटीएमएल फॉर्म और ड्रीमवेवर के बारे में महत्वपूर्ण नोट:
कूद मेनू जैसे विशेष जादूगरों को छोड़कर, ड्रीमवेवर आपको एचटीएमएल फॉर्म "काम" बनाने में मदद नहीं करता है। इसके लिए आपको एक सीजीआई या जावास्क्रिप्ट चाहिए। अधिक जानकारी के लिए कृपया मेरा ट्यूटोरियल HTML फॉर्म वर्क बनाना देखें।
जब आप अपनी वेबसाइट पर एक ड्रॉप-डाउन मेनू जोड़ रहे हैं, तो आपको जिस चीज की आवश्यकता है वह चारों ओर घूमने के लिए एक रूप है। ड्रीमवेवर में, सम्मिलित करें मेनू पर जाएं और फॉर्म पर क्लिक करें, फिर "फॉर्म" चुनें।
20 में से 02
डिज़ाइन व्यू में प्रपत्र प्रदर्शित करता है
ड्रीमवेवर डिज़ाइन व्यू में दृष्टि से अपना फॉर्म स्थान दिखाता है, इसलिए आप जानते हैं कि अपने फॉर्म तत्व कहां रखना है। यह महत्वपूर्ण है, क्योंकि ड्रॉप-डाउन मेनू टैग फॉर्म तत्व के बाहर मान्य नहीं हैं (और काम नहीं करेंगे)। जैसा कि आप छवि में देख सकते हैं, फ़ॉर्म डिज़ाइन व्यू में लाल बिंदीदार रेखा है।
20 में से 03
सूची / मेनू चुनें
ड्रीमवेवर में ड्रॉप-डाउन मेनू को "सूची" या "मेनू" आइटम कहा जाता है। तो अपने फॉर्म में एक जोड़ने के लिए, आपको सम्मिलित करें मेनू पर फॉर्म मेनू में जाना होगा और "सूची / मेनू" चुनें। सुनिश्चित करें कि आपका कर्सर आपके फॉर्म बॉक्स की लाल बिंदीदार रेखा के भीतर था।
20 में से 04
विशेष विकल्प विंडो
ड्रीमवेवर विकल्पों में एक्सेसिबिलिटी पर एक स्क्रीन है। मैं ड्रीमवेवर मुझे सभी अभिगम्यता विशेषताओं को दिखाने का विकल्प चुनता हूं। और यह स्क्रीन इसका परिणाम है। फॉर्म एक ऐसी जगह है जहां कई वेबसाइटें पहुंच में आती हैं और इन पांच विकल्पों को भरकर आपके ड्रॉप-डाउन मेनू तुरंत अधिक सुलभ होंगे।
20 में से 05
फॉर्म पहुंच
अभिगम्यता विकल्प हैं:
लेबल
यह क्षेत्र का नाम है। यह आपके फॉर्म तत्व के बगल में पाठ के रूप में दिखाई देगा।
लिखें कि आप अपने ड्रॉप-डाउन मेनू को क्या कॉल करना चाहते हैं। यह एक प्रश्न या संक्षिप्त वाक्यांश हो सकता है कि ड्रॉप-डाउन मेनू उत्तर देगा।
अंदाज
एचटीएमएल में ब्राउज़र में आपके फॉर्म लेबल्स की पहचान करने के लिए एक लेबल टैग शामिल है। आपके विकल्पों को टैग टैग पर "के लिए" विशेषता का उपयोग करने के लिए ड्रॉप-डाउन मेनू और टैग के साथ लेबल टेक्स्ट को लपेटना है, यह पहचानने के लिए कि कौन सा फ़ॉर्म टैग संदर्भित करता है या लेबल टैग का उपयोग नहीं करता है।
मैं विशेषता के लिए उपयोग करना पसंद करता हूं, तब यदि मुझे किसी कारण से लेबल को स्थानांतरित करने की आवश्यकता है तो यह अभी भी सही फॉर्म फ़ील्ड से जुड़ा होगा।
पद
आप ड्रॉप-डाउन मेनू से पहले या उसके बाद अपना लेबल डाल सकते हैं।
आगमन चाबी
यह वह कुंजी है जिसे सीधे उस फॉर्म फ़ील्ड पर जाने के लिए Alt या Option कुंजी के साथ उपयोग किया जा सकता है। इससे आपके फॉर्म को माउस की आवश्यकता के बिना उपयोग करना बहुत आसान हो जाता है। एचटीएमएल में एक एक्सेस कुंजी कैसे सेट करें
टैब इंडेक्स
यह वह ऑर्डर है जिसमें वेब पेज के माध्यम से टैब पर कीबोर्ड का उपयोग करते समय फॉर्म फ़ील्ड का उपयोग किया जाना चाहिए। Tabindex को समझना
जब आपने अपना एक्सेसिबिलिटी विकल्प अपडेट किया है, तो ठीक क्लिक करें।
20 में से 06
मेनू का चयन करें
एक बार आपके ड्रॉप-डाउन मेनू में डिज़ाइन व्यू में प्रदर्शित होने के बाद, आपको इसमें विभिन्न तत्व जोड़ने होंगे। पहले इसे क्लिक करके ड्रॉप-डाउन मेनू का चयन करें। ड्रीमवेवर यह दिखाने के लिए कि आपने इसे चुना है, ड्रॉप-डाउन मेनू के आस-पास एक और बिंदीदार रेखा डालेगी।
20 में से 07
मेनू गुण
गुण मेनू उस ड्रॉप-डाउन मेनू के लिए सूची / मेनू गुणों में बदल जाएगा। वहां आप अपना मेनू एक आईडी दे सकते हैं (जहां यह कहता है "चयन करें"), तय करें कि क्या आप इसे लिस या मेनू होना चाहते हैं, इसे अपनी स्टाइल शीट से स्टाइल क्लास दें, और ड्रॉप-डाउन को मान असाइन करें।
सूची और मेनू के बीच क्या अंतर है?
ड्रीमवेवर मेनू ड्रॉप-डाउन मेनू को किसी भी ड्रॉप-डाउन पर कॉल करता है जो केवल एक चयन की अनुमति देता है। एक "सूची" ड्रॉप-डाउन में एकाधिक विकल्पों की अनुमति देती है और एक से अधिक आइटम उच्च हो सकती है।
यदि आप एक ड्रॉप-डाउन मेनू को कई पंक्तियों के ऊपर रखना चाहते हैं, तो इसे "सूची" प्रकार में बदलें और "चयन" बॉक्स को अनचेक छोड़ दें।
20 में से 08
नई सूची आइटम जोड़ें
अपने मेनू में नए आइटम जोड़ने के लिए, "सूची मूल्य ..." बटन पर क्लिक करें। यह उपरोक्त विंडो खुल जाएगा। पहले बॉक्स में अपने आइटम लेबल में टाइप करें। यह पृष्ठ पर प्रदर्शित होगा। यदि आप मूल्य को खाली छोड़ देते हैं, तो यह भी फॉर्म में भेजा जाएगा।
20 में से 09
अधिक और पुनरावृत्ति जोड़ें
अधिक आइटम जोड़ने के लिए प्लस आइकन पर क्लिक करें। यदि आप सूची बॉक्स में उन्हें फिर से ऑर्डर करना चाहते हैं, तो दाईं ओर ऊपर और नीचे तीरों का उपयोग करें।
20 में से 10
सभी आइटम मान दें
जैसा कि मैंने चरण 8 में उल्लेख किया है, यदि आप मूल्य को खाली छोड़ देते हैं, तो लेबल फॉर्म पर भेजा जाएगा। लेकिन आप अपने सभी आइटम मूल्यों को अपने फॉर्म में वैकल्पिक जानकारी भेजने के लिए दे सकते हैं। आप मेनू मेनू जैसे चीजों के लिए इसका बहुत उपयोग करेंगे।
20 में से 11
एक डिफ़ॉल्ट चुनें
वेब पेज को प्रदर्शित करने के लिए डिफ़ॉल्ट जो भी ड्रॉप-डाउन आइटम को डिफ़ॉल्ट आइटम के रूप में सूचीबद्ध किया जाता है। लेकिन अगर आप एक अलग चुनना चाहते हैं, तो इसे प्रॉपर्टी मेनू पर "प्रारंभ में चयनित" बॉक्स में हाइलाइट करें।
20 में से 12
डिज़ाइन व्यू में अपनी सूची देखें
एक बार जब आप गुणों को संपादित कर लेंगे, तो Dreamweaver आपके ड्रॉप-डाउन सूची को डिफ़ॉल्ट मान के साथ दिखाएगा।
20 में से 13
कोड दृश्य में अपनी सूची देखें
यदि आप कोड दृश्य पर स्विच करते हैं, तो आप देख सकते हैं कि ड्रीमवेवर आपके ड्रॉप-डाउन मेनू को बहुत साफ कोड के साथ जोड़ता है। केवल अतिरिक्त विशेषताएं हैं जिन्हें हमने एक्सेसिबिलिटी विकल्पों के साथ जोड़ा है। कोड सभी इंडेंट और पढ़ने और समझने में बहुत आसान है। यह चयनित = "चयनित" विशेषता में भी डालता है क्योंकि मैंने ड्रीमवेवर को बताया है कि मैं एक्सएचटीएमएल लिखने के लिए डिफ़ॉल्ट हूं।
20 में से 14
ब्राउज़र में सहेजें और देखें
यदि आप दस्तावेज़ को सहेजते हैं और इसे किसी वेब ब्राउज़र में देखते हैं, तो आप देख सकते हैं कि आपका ड्रॉप-डाउन मेनू ऐसा लगता है जैसे आप इसकी अपेक्षा करेंगे।
20 में से 15
लेकिन यह कुछ भी नहीं करता है
हमने जो मेनू बनाया है वह ठीक दिखता है, लेकिन यह कुछ भी नहीं करता है। इसे कुछ करने के लिए, आपको फ़ॉर्म पर एक फॉर्म एक्शन सेट अप करने की आवश्यकता है, जो एक पूरी तरह से अन्य ट्यूटोरियल है।
सौभाग्य से, ड्रीमवेवर में एक अंतर्निहित ड्रॉप-डाउन मेनू फॉर्म है जिसे आप फॉर्म, सीजीआई, या स्क्रिप्टिंग के बारे में जानने के बिना तुरंत अपनी साइट पर उपयोग कर सकते हैं। इसे जंप मेनू कहा जाता है।
ड्रीमवेवर जंप मेनू नाम और यूआरएल के साथ एक ड्रॉप-डाउन मेनू सेट करता है। फिर आप मेनू में कोई आइटम चुन सकते हैं और वेब पेज उस स्थान पर जायेगा, जैसे कि आपने एक लिंक पर क्लिक किया था।
सम्मिलित करें मेनू पर जाएं और फॉर्म चुनें और फिर मेनू पर जाएं।
20 में से 16
जंप मेनू विंडो
मानक ड्रॉप-डाउन मेनू के विपरीत, जंप मेनू आपके मेनू आइटमों का नाम देने के लिए एक नई विंडो खुलता है और फ़ॉर्म को कैसे काम करना चाहिए इसके बारे में विवरण जोड़ना।
पहले आइटम के लिए, "untitled1" टेक्स्ट को उस चीज़ में बदलें जिसे आप पढ़ना चाहते हैं और उस यूआरएल को जोड़ दें जो उस लिंक पर जाना चाहिए।
20 में से 17
अपने जंप मेनू में आइटम जोड़ें
अपने कूद मेनू में एक नया आइटम जोड़ने के लिए जोड़ें आइटम पर क्लिक करें। अपनी इच्छा के अनुसार कई आइटम जोड़ें।
20 में से 18
जंप मेनू विकल्प
एक बार जब आप अपने इच्छित लिंक जोड़ लेते हैं, तो आपको अपने विकल्पों का चयन करना चाहिए:
यूआरएल खोलें
यदि आपके पास फ़्रेमसेट है, तो आप लिंक को एक अलग फ्रेम में खोल सकते हैं। या आप मुख्य विंडो का विकल्प किसी विशेष लक्ष्य में बदल सकते हैं ताकि यूआरएल एक नई विंडो या अन्य जगहों पर खुल जाएगा।
मेनू का नाम
अपने मेनू को पृष्ठ के लिए एक अद्वितीय आईडी दें। यह आवश्यक है ताकि लिपि सही ढंग से काम करेगी। यह आपको एक ही रूप में एकाधिक कूद मेनू रखने की अनुमति देता है - बस उन्हें सभी अलग-अलग नाम दें।
मेनू के बाद जाओ बटन डालें
मैं इसे चुनना पसंद करता हूं क्योंकि मेनू बदलते समय कभी-कभी स्क्रिप्ट काम नहीं करती है। यह भी अधिक सुलभ है।
यूआरएल परिवर्तन के बाद पहली आइटम का चयन करें
अगर आपके पास पहला मेनू आइटम के रूप में "एक का चयन करें" जैसे संकेत हैं तो इसका चयन करें। यह बीमा करेगा कि वह आइटम पृष्ठ पर डिफ़ॉल्ट रहता है।
20 में से 1 9
जंप मेनू डिजाइन देखें
अपने पहले मेनू की तरह ही, ड्रीमवेवर डिस्प्ले व्यू में डिफॉल्ट आइटम को डिफॉल्ट आइटम के साथ सेट करता है। फिर आप ड्रॉप-डाउन मेनू को संपादित कर सकते हैं जैसे कि आप किसी और को करेंगे।
यदि आप इसे संपादित करते हैं, तो सुनिश्चित करें कि आइटम पर कोई भी आईडी न बदलें, अन्यथा स्क्रिप्ट काम नहीं कर सकती है।
20 में से 20
ब्राउज़र में कूदें मेनू
फ़ाइल को सहेजना और F12 को मारना आपके पसंदीदा ब्राउज़र में पृष्ठ प्रदर्शित करेगा। वहां आप एक विकल्प का चयन कर सकते हैं, "जाओ" पर क्लिक करें और कूद मेनू काम करता है!