Dreamweaver आपल्या वेबसाइटसाठी ड्रॉप-डाउन मेनू तयार करणे सोपे करते. पण सर्व HTML स्वरूपाप्रमाणे ते थोडी अवघड असू शकतात. हे ट्यूटोरियल आपल्याला Dreamweaver मधील ड्रॉप-डाउन मेनू तयार करण्यासाठी चरणाद्वारे घेऊन जाईल.
Dreamweaver Jump Menus
ड्रीम इक्विव्हर 8 तुमच्या वेबसाईटवर नेव्हिगेशनसाठी जंप मेनू तयार करण्यासाठी एक विझार्ड देखील प्रदान करतो. मूलभूत ड्रॉप-डाउन मेनूच्या विपरीत, आपण समाप्त केल्यावर हे मेनू वास्तविकपणे काहीतरी करेल आपले ड्रॉप-डाउन फॉर्म कार्य करण्यासाठी आपल्याला कोणत्याही JavaScript किंवा CGI लिहिण्याची गरज नाही. हे ट्यूटोरियल देखील जंप मेनू तयार करण्यासाठी ड्रीमइव्हर 8 विझार्ड कसे वापरावे हे स्पष्ट करते.
01 ते 20
प्रथम फॉर्म तयार करा
महत्वाचे टीप एचटीएमएल फॉर्म्स आणि ड्रीमइव्हर बद्दल:
जंप मेन्यूसारख्या विशेष विझार्ड वगळता, ड्रीमइव्हर आपल्याला HTML फॉर्म "कार्य" करण्यास मदत करत नाही. त्यासाठी तुम्हाला CGI किंवा जावास्क्रिप्ट ची आवश्यकता आहे. कृपया माझे ट्यूटोरियल पहा अधिक माहितीसाठी एचटीएमएल फॉर्मस काम.
जेव्हा आपण आपल्या वेबसाइटवर एक ड्रॉप-डाउन मेनू जोडत असतो, तेव्हा आपल्याला आवश्यक असलेली सर्वप्रथम ती घेरण्याचा एक फॉर्म आहे Dreamweaver मध्ये, समाविष्ट करा मेनूवर जा आणि फॉर्म क्लिक करा, नंतर "फॉर्म" निवडा.
02 चा 20
डिझाईन दृश्य मध्ये फॉर्म डिस्प्ले
ड्रीमविव्हर डिझाइन दृश्यामध्ये आपला फॉर्म स्थान दृश्यमान दर्शवितो, म्हणून आपल्या फॉर्मचे घटक कुठे ठेवावेत हे आपल्याला माहिती आहे. हे महत्त्वपूर्ण आहे, कारण ड्रॉप-डाउन मेनू टॅग फॉर्म घटकाच्या बाहेर वैध (आणि कार्य करणार नाहीत) नाहीत. जसे आपण चित्रात पाहू शकता, हा फॉर्म डिझाइन दृश्यात लाल बिंदू असलेला रेखा आहे.
03 चा 20
सूची / मेनू निवडा
ड्रॉप-डाउन मेनूला Dreamweaver मधील "list" किंवा "menu" आयटम असे म्हणतात. आपल्या फॉर्ममध्ये एक जोडण्यासाठी, आपल्याला समाविष्ट करा मेनूवर फॉर्म मेनूमध्ये जाण्याची आवश्यकता आहे आणि "सूची / मेनू" निवडा. आपला कर्सर आपल्या फॉर्म बॉक्सच्या लाल बिंदू असलेल्या चौकटीत असल्याचे सुनिश्चित करा.
04 चा 20
विशेष पर्याय विंडो
Dreamweaver पर्यायांमध्ये प्रवेशयोग्यता वर एक स्क्रीन आहे. मला स्वप्नवत आहे की मला सर्व ऍक्सेसिबिलिटी विशेषता प्रदान करते. आणि हा पडदा त्याचा परिणाम आहे. फॉर्म्स असे एक असे स्थान आहे जेथे अनेक वेबसाइट्स प्रवेशयोग्यतेत खाली येतात आणि या पाच पर्यायांनी भरून आपले ड्रॉप-डाउन मेनू लगेचच अधिक प्रवेश करता येईल.
05 चा 20
फॉर्म प्रवेशयोग्यता
प्रवेश पर्याय आहेत:
लेबल
हे क्षेत्रासाठी नाव आहे हे आपल्या फॉर्म घटकाच्या बाजूला असलेले मजकूर म्हणून दर्शविले जाईल
आपण आपल्या ड्रॉप-डाउन मेनू वर कॉल करु इच्छिता ते लिहा. हे एक प्रश्न किंवा लहान वाक्यांश असू शकते जे ड्रॉप-डाउन मेनू उत्तर देईल.
शैली
ब्राउझरमध्ये आपल्या फॉर्म लेबला ओळखण्यासाठी HTML टॅगमध्ये लेबल टॅगचा समावेश आहे. आपल्या निवडी म्हणजे लेबल टॅगवर "for" गुणधर्म वापरण्यास, टॅग कोणते संदर्भित करतात हे ओळखण्यासाठी, किंवा लेबल टॅगचा वापर न करण्यासाठी, ड्रॉप-डाउन मेनू आणि टॅगसह लेबल मजकूर.
मी गुणविशेष साठी वापरण्यास प्राधान्य देतो, जर मला काही कारणास्तव लेबले हलविण्याची आवश्यकता असेल तर ती योग्य फॉर्म फील्डशी संलग्न केली जाईल.
स्थान
आपण ड्रॉप-डाउन मेनूमधून किंवा नंतर आपले लेबल ठेवू शकता.
प्रवेश की
ही की फील्ड आहे जे थेट किंवा ऑप्शन कीजसह थेट वापरता येते. यामुळे आपल्या फॉर्मला माऊसची गरज नसताना वापरणे सोपे होते. HTML मध्ये प्रवेश की कशी सेट करावी
टॅब अनुक्रमणिका
वेब पृष्ठाद्वारे टॅब्लेटचा वापर करताना हा फॉर्म ज्या फॉर्म फिल्डमध्ये ऍक्सेस केला जावा. टॅबंडॅक्स समजून घेणे
आपण आपले प्रवेशयोग्यता पर्याय अद्यतनित केले तेव्हा, ओके क्लिक करा.
06 चा 20
मेनू निवडा
एकदा आपल्याकडे ड्रॅग-डाउन मेनू डिझाइन दृश्यात प्रदर्शित झाल्यानंतर, आपल्याला त्यास विविध घटक जोडण्याची आवश्यकता आहे. प्रथम त्यावर क्लिक करून ड्रॉप-डाउन मेनू निवडा. आपण ते निवडले आहे हे दर्शविण्यासाठी फक्त ड्रॉप-डाउन मेनूच्या आसपास एक क्षितिझी पंखे दिसेल.
07 ची 20
मेनू गुणधर्म
त्या ड्रॉप-डाउन मेनूसाठी गुणधर्म मेनू सूची / मेनू गुणधर्मांमध्ये बदलेल. तेथे आपण आपल्या मेनूला एक आयडी (जेथे ते "निवडा" म्हणतात) देऊ शकता, ठरवा की आपण ते एखाद्या लायस किंवा मेन्यूचे असावे, ते आपल्या शैली पत्रकातील एक शैली वर्ग द्या आणि ड्रॉप-डाउन वर मूल्य नियुक्त करा
सूची आणि मेनूमध्ये काय फरक आहे?
Dreamweaver ड्रॉप डाउन मेन्यू ड्रॉप-डाउन मेनूला कॉल करते जे फक्त एका निवडीस परवानगी देतो. एक "सूची" ड्रॉप-डाउन मध्ये एकाधिक निवडी संमत करते आणि एकापेक्षा अधिक आयटम उच्च असू शकतात.
ड्रॉप-डाउन मेन्यूला एकापेक्षा जास्त ओळी असावयाचा असल्यास त्याला "सूची" प्रकारावर बदला आणि "सिलेक्शन" बॉक्स अनचेक करा.
08 ची 08
नवीन सूची आयटम जोडा
आपल्या मेनूमध्ये नवीन आयटम जोडण्यासाठी "सूची मूल्ये ..." बटणावर क्लिक करा. वरील विंडो उघडेल. प्रथम बॉक्समध्ये आपल्या आयटम लेबलमध्ये टाइप करा. हे पृष्ठावर प्रदर्शित होईल. आपण मूल्य रिक्त सोडल्यास, ते देखील फॉर्ममध्ये काय पाठविले जाईल ते देखील आहे
20 ची 09
अधिक जोडा आणि पुनर्क्रमित करा
अधिक आयटम जोडण्यासाठी अधिक चिन्हावर क्लिक करा आपण त्यांना सूची बॉक्समध्ये पुन्हा क्रम लावू इच्छित असल्यास, उजवीकडील वर आणि खाली बाण वापरा
20 पैकी 10
वस्तूंचे सर्व घटक द्या
पायरी 8 मध्ये नमूद केल्याप्रमाणे, जर आपण मूल्य रिक्त सोडले तर, फॉर्मला लेबल पाठविले जाईल. परंतु आपण आपल्या फॉर्मला वैकल्पिक माहिती पाठविण्यासाठी आपल्या सर्व आयटमची मूल्य देऊ शकता. आपण जंप मेनु सारख्या गोष्टींसाठी हे खूप वापर कराल.
11 पैकी 20
एक डीफॉल्ट निवडा
ड्रॉप-डाउन आयटम प्रदर्शित करण्यासाठी वेब पृष्ठे डीफॉल्ट आयटम म्हणून आधी सूचीबद्ध आहेत पण जर तुम्हाला वेगळे निवडलेले असेल तर गुणधर्म मेनूमधील "सुरवातीस निवडलेले" बॉक्समध्ये हायलाइट करा.
20 पैकी 12
डिझाइन दृश्य मध्ये आपली सूची पहा
एकदा आपण गुणधर्म संपादित करणे पूर्ण केल्यावर, Dreamweaver निवडलेल्या डीफॉल्ट मूल्यासह आपले ड्रॉप-डाउन सूची दर्शवेल.
20 पैकी 13
कोड दृश्य मध्ये आपली सूची पहा
आपण कोड दृश्यावर स्विच केले असल्यास, आपण पाहू शकता की ड्रीमइव्हर अतिशय स्वच्छ कोडसह आपल्या ड्रॉप-डाउन मेनूमध्ये जोडतो. ऍक्सेसिबिलिटी पर्यायासह आम्ही जोडले त्या अतिरिक्त गुणविशेष आहेत. कोड हा सर्व वाचलेला आणि समजण्यास सोपा आहे. हे निवडलेले = "निवडलेले" गुणधर्म दाबते कारण मी ड्रीमइव्हरला सांगितले आहे की मी एक्सएचटीएमएल लिहिण्यासाठी डिफॉल्ट आहे.
20 पैकी 14
ब्राउझरमध्ये जतन करा आणि पहा
आपण कागदजत्र जतन करुन ठेवल्यास ते वेब ब्राऊजरमधे पाहू शकता, तर आपण पाहू शकता की आपले ड्रॉप-डाउन मेनू आपल्याला अपेक्षित असल्याप्रमाणे दिसते.
20 पैकी 15
पण ते काही करत नाही
आम्ही वर तयार केलेली मेनू दंड दिसते, परंतु ती काही करत नाही. हे करण्यासाठी काहीतरी प्राप्त करण्यासाठी, आपण फॉर्मवर फॉर्म क्रिया सेट करणे आवश्यक आहे, जे पूर्णतः इतर ट्यूटोरियल आहे
सुदैवाने, Dreamweaver मध्ये एक अंतर्निहित ड्रॉप-डाउन मेनू फॉर्म आहे ज्याचा वापर आपण फॉर्म, CGIs, किंवा scripting बद्दल जाणून घेण्याची आवश्यकता न करता लगेचच आपल्या साइटवर करू शकता. यास Jump Menu म्हणतात.
Dreamweaver Jump मेनू नेम्स आणि URL सह एक ड्रॉप-डाउन मेनू सेट करते. नंतर आपण मेनूमध्ये आयटम निवडू शकता आणि वेब पृष्ठ त्या स्थानावर जाईल, जसे की आपण एका दुव्यावर क्लिक केले असेल तर
समाविष्ट करा मेनूवर जा आणि फॉर्म निवडा आणि त्यानंतर मेनू जा.
20 पैकी 16
मेनू विंडो जा
मानक ड्रॉप-डाउन मेनूम्याप्रमाणे, आपल्या मेनू आयटमला नावे देण्यासाठी आणि मेनूमध्ये फॉर्म कसे कार्य करावे याबद्दल माहिती जोडण्यासाठी जंप मेनू आपल्यासाठी नवीन विंडो उघडते.
प्रथम आयटमसाठी, "Untitled1" मजकूर आपण काय वाचू इच्छिता आणि त्यात दुवा जोडू इच्छिता ती URL बदला.
20 पैकी 17
आपल्या जाण्यासाठी मेनूमध्ये आयटम जोडा
आपल्या जाणा-या मेनूमध्ये नवीन आयटम जोडण्यासाठी ऍड आयटम्सवर क्लिक करा. आपल्याला पाहिजे तितक्या आयटम जोडा
18 पैकी 20
मेनू पर्याय जा
एकदा आपण इच्छित सर्व दुवे जोडल्यानंतर, आपण आपले पर्याय निवडावे:
मध्ये उघडा URL मध्ये
जर तुमच्याकडे फ्रेशसेट असेल तर आपण लिंक एका वेगळ्या फ्रेममध्ये उघडू शकता. किंवा आपण मेन विंडोचा पर्याय एका विशिष्ट लक्ष्यवर बदलू शकता जेणेकरून URL नवीन विंडोमध्ये किंवा अन्यत्र उघडेल.
मेनू नाव
आपल्या मेनूला पृष्ठासाठी एक अद्वितीय ID द्या हे आवश्यक आहे की स्क्रिप्ट योग्यरितीने कार्य करेल. हे आपल्याला एकाच कक्षात एकापेक्षा जास्त मेनू ठेवण्याची अनुमती देते - फक्त त्यांना सर्व भिन्न नावे द्या
मेनू नंतर जा बटण घाला
मला हे निवडणे आवडते कारण काहीवेळा जेव्हा मेनू बदलते तेव्हा स्क्रिप्ट कार्य करत नाही. हे अधिक प्रवेशजोगी आहे
URL बदल केल्यानंतर पहिला आयटम निवडा
प्रथम मेनू आयटम म्हणून "एक निवडा" म्हणून आपल्याला एखादा प्रॉमप्ट असल्यास हे निवडा. हे ते पृष्ठावर डीफॉल्ट राहतील हे सुनिश्चित करेल.
20 पैकी 1 9
मेनू डिझाईन दृश्य जंप करा
आपल्या प्रथम मेनू प्रमाणेच, Dreamweaver डिफॉल्ट दृश्यामध्ये डिझाइन दृश्यात आपले जाणे मेनू सेट करते. आपण इतर कोणत्याही जसे ड्रॉप-डाउन मेनू संपादित करु शकता
आपण ते संपादित केल्यास, आयटमवरील कोणत्याही आयडी बदलू नये हे सुनिश्चित करा अन्यथा स्क्रिप्ट कार्य करणार नाही.
20 पैकी 20
ब्राउझरमध्ये जा मुख्यपृष्ठ
फाईल सेव्ह करणे आणि F12 दाबून आपल्या पसंतीच्या ब्राउझरमध्ये पृष्ठ प्रदर्शित केले जाईल. तेथे आपण एक पर्याय निवडू शकता, "जा" क्लिक करा आणि जंप मेनू कार्य करते!