ड्रीमविवर में ड्रॉप डाउन बॉक्स कैसे जोड़ें (चित्रों के साथ)

विषयसूची:

ड्रीमविवर में ड्रॉप डाउन बॉक्स कैसे जोड़ें (चित्रों के साथ)
ड्रीमविवर में ड्रॉप डाउन बॉक्स कैसे जोड़ें (चित्रों के साथ)

वीडियो: ड्रीमविवर में ड्रॉप डाउन बॉक्स कैसे जोड़ें (चित्रों के साथ)

वीडियो: ड्रीमविवर में ड्रॉप डाउन बॉक्स कैसे जोड़ें (चित्रों के साथ)
वीडियो: आपके कंप्यूटर के लिए शीर्ष 10 सर्वश्रेष्ठ मुफ़्त सॉफ़्टवेयर (2023) 2024, जुलूस
Anonim

यह विकिहाउ आपको सिखाता है कि किसी वेबपेज के लिए ड्रॉप-डाउन बॉक्स बनाने के लिए Adobe Dreamweaver का उपयोग कैसे करें। ड्रॉप-डाउन बॉक्स वे मेनू होते हैं जो आपके वेबपेज पर किसी आइटम पर क्लिक करने पर "ड्रॉप डाउन" करते हैं, इस प्रक्रिया में अधिक विकल्प प्रस्तुत करते हैं।

कदम

ड्रीमविवर चरण 1 में एक ड्रॉप डाउन बॉक्स जोड़ें
ड्रीमविवर चरण 1 में एक ड्रॉप डाउन बॉक्स जोड़ें

चरण 1. एक ड्रीमविवर प्रोजेक्ट खोलें।

ऐसा करने के लिए प्रोजेक्ट की फ़ाइल पर डबल-क्लिक करें। यदि आप एक नया Dreamweaver प्रोजेक्ट बनाना चाहते हैं, तो आप इसके बजाय Dreamweaver खोलेंगे, क्लिक करें फ़ाइल क्लिक करें नया, और किसी भी ऑन-स्क्रीन संकेतों का पालन करें।

ड्रीमविवर चरण 2 में एक ड्रॉप डाउन बॉक्स जोड़ें
ड्रीमविवर चरण 2 में एक ड्रॉप डाउन बॉक्स जोड़ें

चरण 2. एक आदेशित सूची बनाएं।

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

  • यहां बिंदु का नाम आपके ड्रॉप-डाउन मेनू के उत्प्रेरक के रूप में कार्य करेगा (उदा., वह बटन जिस पर कोई होवर करता है या ड्रॉप-डाउन मेनू खोलने के लिए टैप करता है)।
  • यदि आपके पास पहले से ही एक सूची आइटम है जिसे आप ड्रॉप-डाउन मेनू में बदलना चाहते हैं, तो इस चरण को छोड़ दें।
ड्रीमविवर चरण 3 में एक ड्रॉप डाउन बॉक्स जोड़ें
ड्रीमविवर चरण 3 में एक ड्रॉप डाउन बॉक्स जोड़ें

चरण 3. अपनी सूची का नाम निर्धारित करें।

दबाएं कोड टैब और सुनिश्चित करें कि आप पर हैं सोर्स कोड सेटिंग, फिर अपनी ऑर्डर की गई सूची के कोड तक स्क्रॉल करें (यह "के बीच होगा"

"टैग और एक"

"टैग) और शीर्ष के ऊपर " "टैग" की तलाश करें

टैग। उद्धरणों में शब्द आपकी सूची का नाम है।

  • यदि आपको कोई नाम दिखाई नहीं देता है, तो टैग (जहां नाम सूची के आपके पसंदीदा नाम को संदर्भित करता है) को सीधे ऊपर डालें

    उपनाम।

ड्रीमविवर चरण 4 में एक ड्रॉप डाउन बॉक्स जोड़ें
ड्रीमविवर चरण 4 में एक ड्रॉप डाउन बॉक्स जोड़ें

चरण 4। बुलेट बिंदु निकालें।

सुनिश्चित करें कि आप पर क्लिक करके सही जगह पर हैं डिज़ाइन टैब और फिर क्लिक करें सीएसएस डिजाइनर विंडो के ऊपरी-दाएँ कोने में टैब करें, फिर निम्न कार्य करें:

  • क्लिक + "चयनकर्ता" शीर्षक के दाईं ओर।
  • #name ul टाइप करें जहां "name" आपकी सूची का नाम है।
  • दबाएँ दो बार दर्ज करें।
  • नीचे स्क्रॉल करें और क्लिक करें सूची-शैली-प्रकार के तल पर फलक में सीएसएस डिजाइनर टैब।
  • क्लिक कोई नहीं परिणामी पॉप-अप मेनू में।
ड्रीमविवर चरण 5 में एक ड्रॉप डाउन बॉक्स जोड़ें
ड्रीमविवर चरण 5 में एक ड्रॉप डाउन बॉक्स जोड़ें

चरण 5. क्षैतिज रूप से प्रदर्शित करने के लिए अपनी आदेशित सूची बदलें।

ऐसा करने के लिए:

  • क्लिक + "चयनकर्ता" शीर्षक के दाईं ओर।
  • #name li टाइप करें जहां "name" आपकी सूची का नाम है।
  • के नीचे फलक में "फ्लोट" शीर्षक खोजें सीएसएस डिजाइनर टैब।
  • दबाएं बाएं "फ्लोट" शीर्षक के दाईं ओर तुरंत बटन।
ड्रीमविवर चरण 6 में एक ड्रॉप डाउन बॉक्स जोड़ें
ड्रीमविवर चरण 6 में एक ड्रॉप डाउन बॉक्स जोड़ें

चरण 6. अपनी सूची के लिए एक सक्रिय टैग जोड़ें।

दबाएं + "चयनकर्ताओं" के दाईं ओर बटन, फिर #name a (जहां "नाम" आपकी सूची का नाम है) टाइप करें और Enter दो बार दबाएं।

ड्रीमविवर चरण 7 में एक ड्रॉप डाउन बॉक्स जोड़ें
ड्रीमविवर चरण 7 में एक ड्रॉप डाउन बॉक्स जोड़ें

चरण 7. एक पृष्ठभूमि रंग जोड़ें।

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

आपकी ड्रॉप-डाउन सूची के आइटम इस रंग का उपयोग करेंगे।

ड्रीमविवर चरण 8 में एक ड्रॉप डाउन बॉक्स जोड़ें
ड्रीमविवर चरण 8 में एक ड्रॉप डाउन बॉक्स जोड़ें

चरण 8. अपनी सूची की वस्तुओं को "ब्लॉक" प्रारूप का उपयोग करें।

यह प्रारूप सुनिश्चित करता है कि जब कोई सूची में किसी आइटम पर क्लिक या टैप करने के लिए जाता है, तो वे टेक्स्ट को ठीक से चुनने के बजाय इसे थोड़ा ऊपर या नीचे चुनकर खोल सकते हैं:

  • सुनिश्चित करें कि आपका #नाम ए आइटम में चुना गया है सीएसएस डिजाइनर टैब।
  • फलक में "डिस्प्ले" शीर्षक तक स्क्रॉल करें।
  • "डिस्प्ले" शीर्षक के दाईं ओर क्लिक करें, फिर क्लिक करें खंड मैथा परिणामी मेनू में।
ड्रीमविवर चरण 9 में एक ड्रॉप डाउन बॉक्स जोड़ें
ड्रीमविवर चरण 9 में एक ड्रॉप डाउन बॉक्स जोड़ें

चरण 9. यदि आवश्यक हो तो पैडिंग जोड़ें।

यदि आप देखते हैं कि आपकी सूची आइटम एक-दूसरे के खिलाफ जाम हो गए हैं, तो आप निम्न कार्य करके उनके बीच कुछ जगह रख सकते हैं:

  • सुनिश्चित करें कि आपका #नाम ए आइटम में चुना गया है सीएसएस डिजाइनर टैब।
  • फलक में "पैडिंग" शीर्षक तक स्क्रॉल करें।
  • कम से कम 5 पढ़ने के लिए ऊपर और नीचे "पीएक्स" टेक्स्ट फ़ील्ड बदलें।
  • बाएँ और दाएँ "px" टेक्स्ट फ़ील्ड को कम से कम 10 पढ़ने के लिए बदलें।
ड्रीमविवर चरण 10 में एक ड्रॉप डाउन बॉक्स जोड़ें
ड्रीमविवर चरण 10 में एक ड्रॉप डाउन बॉक्स जोड़ें

चरण 10. एक होवर रंग बनाएँ।

जब आप ड्रॉप-डाउन मेनू में किसी आइटम पर अपना माउस कर्सर घुमाएंगे तो यह रंग दिखाई देगा:

  • क्लिक + "चयनकर्ता" शीर्षक के दाईं ओर।
  • टाइप करें #nave a:hover (जहाँ "name" आपकी लिस्ट का नाम है) और Enter को दो बार दबाएँ।
  • "पृष्ठभूमि रंग" टैब पर क्लिक करें।
  • चुनते हैं पीछे का रंग और फिर पृष्ठभूमि रंग के लिए आपके द्वारा उपयोग किए गए रंग से हल्का रंग चुनें।
ड्रीमविवर चरण 11 में एक ड्रॉप डाउन बॉक्स जोड़ें
ड्रीमविवर चरण 11 में एक ड्रॉप डाउन बॉक्स जोड़ें

चरण 11. सीएसएस बंद करें।

दबाएं राय मेनू आइटम, चुनें शैली प्रतिपादन, और क्लिक करें प्रदर्शन शैलियाँ पॉप-आउट विंडो में विकल्प।

अगर प्रदर्शन शैलियाँ विकल्प धूसर हो गया है, अपने Dreamweaver दस्तावेज़ में कहीं भी क्लिक करें और पुनः प्रयास करें।

ड्रीमविवर चरण 12 में एक ड्रॉप डाउन बॉक्स जोड़ें
ड्रीमविवर चरण 12 में एक ड्रॉप डाउन बॉक्स जोड़ें

चरण 12. ड्रॉप-डाउन मेनू सामग्री बनाएं।

आप बुलेट बिंदु के नीचे उप-बिंदु जोड़कर ऐसा कर सकते हैं जिसे आप ड्रॉप-डाउन मेनू के बटन के रूप में उपयोग करना चाहते हैं:

  • सूची आइटम के दाईं ओर क्लिक करें जिसे आप ड्रॉप-डाउन मेनू में बदलना चाहते हैं, फिर ↵ Enter दबाएं।
  • Tab दबाएं।
  • अपने पहले ड्रॉप-डाउन मेनू आइटम का नाम टाइप करें, फिर Enter दबाएँ।
  • अगले ड्रॉप-डाउन मेन्यू का नाम टाइप करें, फिर ↵ एंटर दबाएं और आवश्यकतानुसार दोहराएं।
ड्रीमविवर चरण 13 में एक ड्रॉप डाउन बॉक्स जोड़ें
ड्रीमविवर चरण 13 में एक ड्रॉप डाउन बॉक्स जोड़ें

चरण 13. ड्रॉप-डाउन मेनू सामग्री को बुलेट आइटम से बांधें।

ऐसा करने के लिए:

  • क्लिक + "Selectors" के आगे, फिर #name ul ul टाइप करें और Enter को दो बार दबाएं।
  • नीचे स्क्रॉल करें और क्लिक करें प्रदर्शन, तब दबायें कोई नहीं पॉप-अप मेनू में।
  • ढूँढें और क्लिक करें पद, तब दबायें शुद्ध पॉप-अप मेनू में।
ड्रीमविवर चरण 14 में एक ड्रॉप डाउन बॉक्स जोड़ें
ड्रीमविवर चरण 14 में एक ड्रॉप डाउन बॉक्स जोड़ें

चरण 14. ड्रॉप-डाउन मेनू स्वयं बनाएं।

ऐसा करने के लिए आपको एक और चयनकर्ता जोड़ना होगा:

  • क्लिक + "Selectors" के आगे, फिर #name ul li:hover > ul टाइप करें और Enter को दो बार दबाएं।
  • ढूँढें और क्लिक करें प्रदर्शन, तब दबायें खंड मैथा परिणामी पॉप-अप मेनू में।
ड्रीमविवर चरण 15 में एक ड्रॉप डाउन बॉक्स जोड़ें
ड्रीमविवर चरण 15 में एक ड्रॉप डाउन बॉक्स जोड़ें

चरण 15. ड्रॉप-डाउन मेनू की सामग्री को लंबवत प्रदर्शित करें।

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

  • क्लिक + "Selectors" के आगे, फिर #name ul ul li टाइप करें और Enter को दो बार दबाएं।
  • "फ्लोट" शीर्षक खोजें।
  • "कोई नहीं" पर क्लिक करें () "फ्लोट" शीर्षक के दाईं ओर विकल्प।
ड्रीमविवर चरण 16 में एक ड्रॉप डाउन बॉक्स जोड़ें
ड्रीमविवर चरण 16 में एक ड्रॉप डाउन बॉक्स जोड़ें

चरण 16. अपना प्रोजेक्ट सहेजें।

ऐसा करने के लिए Ctrl+S (Windows) या ⌘ Command+S (Mac) दबाएं।

यदि आपने इस परियोजना के लिए एक नई ड्रीमविवर फ़ाइल बनाई है, तो आपको एक नाम दर्ज करना होगा, एक स्थान सहेजें का चयन करना होगा, और क्लिक करना होगा सहेजें अपनी फाइल को सेव करने के लिए।

सिफारिश की: