10 उपयोगी Dreamweaver टिप्स और ट्रिक्स शुरुआती के लिए

एक Dreamweaver उपयोगकर्ता निश्चित रूप से लगता है कि यह एक बिजलीघर क्या है। आज के बाजार में सबसे प्रसिद्ध आईडीई (एकीकृत विकास पर्यावरण) में से कई सुविधाओं, विकल्पों और विवादों में से एक के साथ पैक किया गया है। यह उन मानदंडों को पूरा नहीं कर सकता है जो कुछ डेवलपर्स ने मांग की थी, हालांकि, ड्रीमविवर निर्विवाद रूप से विकास, सहयोग और कोडिंग टूल की एक सभ्य श्रेणी प्रदान करता है। ये विकल्प और उपकरण खेदजनक कम सहज मेनू की परतों के नीचे छिपे हुए हैं, यही कारण है कि हम आज के पोस्ट में ट्यूटोरियल प्रदान कर रहे हैं.

हम आपको अपनी पहुंच में शीघ्रता से सहायता करने के लिए ड्रीमविवर के कुछ सबसे शक्तिशाली कार्यों के साथ-साथ कई अन्य सहायक तरकीबें दिखाएंगे जो आपको विकास के समय को लुभाएंगे और आपके कोड की गुणवत्ता में काफी सुधार करेंगे। कूदने के बाद पूरी सूची.

1. डायनेमिक व्यू विथ “सीधा प्रसारण”

हम पहले से ही जानते हैं कि डीडब्ल्यू हमारी खुली फ़ाइलों का एक स्थिर दृश्य प्रदान करता है, लेकिन इसके बारे में क्या "गतिशील विचार" वर्डप्रेस जैसे एप्लिकेशन का उपयोग करें?

सबसे पहले, हमें करने की आवश्यकता है कहना DW क्या सेटिंग्स प्रस्तुत करने के लिए उपयोग करने के लिए हमारे"गतिशील विचार" सही ढंग से। ऐसा करने के लिए, चयन करें HTTP अनुरोध सेटिंग्स वहाँ से देखें> लाइव देखें विकल्प मेनू, फिर दर्ज करें प्राप्त या पद पैरामीटर आपको अपने एप्लिकेशन को सही ढंग से देखने की आवश्यकता है.

फिर स्विच करके सीधा प्रसारण डीडब्ल्यू में, यह पुराने की जगह लेता है डिजाइन देखें अपने पेज के लाइव, पिक्सेल-परिपूर्ण वेबकीट प्रतिपादन के साथ फलक; लाइव जावास्क्रिप्ट के साथ पूरा करें, DOM जोड़तोड़, डेटाबेस क्वेरी, सर्वर-साइड कोड, और सीएसएस प्रदान किया गया, न कि आपके द्वारा देखे गए प्लेसहोल्डर आइकन के बजाय डिजाइन देखें.

2. "कोड नेविगेटर" डीडब्ल्यू का फायरबग है

इसे एक कदम आगे ले जाना सभी के बारे में है कोड नेविगेटर और जब में सीधा प्रसारण विंडो, ALT-क्लिकिंग (मैक के लिए कमांड-ऑप्शन-क्लिक) विंडो में कहीं भी, तुरंत उस कोड को प्रस्तुत करता है जो उस आइटम को प्रदान करता है। जैसा कि आप वर्तमान में फ़ायरफ़ॉक्स / फायरबग में देख सकते हैं.

3. बर्फ़ीली जावास्क्रिप्ट

अजाक्स की गतिशील प्रकृति के कारण, कई बार हमें एक ऐसे पृष्ठ के साथ बातचीत करने की आवश्यकता होती है जहां कुछ वस्तुओं का प्रतिपादन नहीं किया जाता है या पहले पृष्ठ पर उपलब्ध नहीं होता है। ये वे आइटम हैं जो पेज लोड होने के कुछ समय बाद पेज में इंजेक्ट किए जाते हैं। यहाँ एक उदाहरण है:

आप पूरी तरह से जावास्क्रिप्ट में लागू किया गया है कि एक उपकरण टिप की स्टाइल को बदलना चाहते हो सकता है। आज से पहले, आपको अपनी स्क्रिप्ट के माध्यम से अपना रास्ता खोजना होगा कि क्या और कहाँ बनाया जा रहा है.

इसके बजाय, यह प्रयास करें:

में अपना पेज रेंडर करें सीधा प्रसारण, फिर मारा F6 किसी भी समय जावास्क्रिप्ट को फ्रीज करने की अनुमति देता है, जिससे आप पृष्ठ में किसी भी डायनामिक आइटम से संबंधित कोड को लक्षित और विच्छेदित कर सकते हैं.

4. लाइव देखें का अगला सबसे अच्छा दोस्त - "लाइव कोड"

उपयोग करते समय सीधा प्रसारण, आप भी चालू कर सकते हैं लाइव कोड. लाइव कोड जैसे ही आप होवर करेंगे, अपने कोड को अपडेट करेंगे और तत्वों और वस्तुओं के साथ क्लिक और इंटरैक्ट करेंगे लाइव देखें खिड़की!

5. स्वचालित जावास्क्रिप्ट पूर्णता

ड्रीमविवर एक बुद्धिमान और पूर्ण HTML और सीएसएस कोड पूरा करने के साथ आता है, लेकिन जावास्क्रिप्ट के बारे में क्या? यदि आप Dreamweaver में jQuery या प्रोटोटाइप को कोड करते हैं, तो आपको पता होना चाहिए कि एपीआई एक्सटेंशन हैं जो जावास्क्रिप्ट कोड को पूरा करते हैं। यह आवश्यक टाइपिंग को कम करता है और फास्ट कोडर्स के लिए बहुत काम आ सकता है.

अधिक पढ़ने, या डाउनलोड करने के लिए यहां क्लिक करें:

• Dreamweaver के लिए jQuery एपीआई एक्सटेंशन
• ड्रीमविवर के लिए प्रोटोटाइप एपीआई एक्सटेंशन

6. मक्खी पर सुशोभित कोड

क्या आपका कोड पृष्ठ कोड की असंगठित, गड़बड़ लाइनों की तरह दिखता है? उपयोग स्रोत स्वरूपण लागू करें सुविधा और अपनी प्राथमिकताओं के लिए इसे पुन: स्वरूपित करें। उन्हें जल्दी से साफ करने के लिए, क्लिक करें फॉर्मेट सोर्स कोड के तल पर आइकन कोडिंग टूलबार (संपादन> टूलबार> कोडिंग) और चुनें कोड प्रारूप सेटिंग्स अपना पसंदीदा स्वरूपण सेट करने के लिए.

आप प्रारूपण विकल्प से भी पहुँच सकते हैं कमांड> स्रोत स्वरूपण लागू करें या केवल इसे चुनकर कोड के चुनिंदा ब्लॉक में लागू करें चयन करने के लिए स्रोत स्वरूपण लागू करें विकल्प.

7. जासूसी करना

बस क्लिक करें ड्रीमविवर आइकन बढ़ाएँ (यह आपके अनुप्रयोग बार में गियर की तरह दिखता है) और चुनें वेब विजेट के लिए ब्राउज़ करें. यह आपको एडोब एक्सचेंज में ले जाएगा जहां आप विक्रेताओं जैसे याहू, JQuery और कई अन्य लोगों से अतिरिक्त विजेट पा सकते हैं.

8. तोड़फोड़ और सपना देखने वाला

और हां, ड्रीमविवर सबवर्सन (एसवीएन) का समर्थन करता है। डेवलपर्स के लिए जो अपने प्रोजेक्ट के संशोधन नियंत्रण को बनाए रखने के लिए SVN का उपयोग करते हैं, यह एक अच्छी खबर हो सकती है। ड्रीमविवर डेवलपर एंड्रयू वोल्मर चर्चा करते हैं आप ड्रीमविवर के साथ सबवर्सेशन का उपयोग कैसे कर सकते हैं.

9. कोई अधिक निरर्थक शैलियाँ

कई लोग Dreamweaver का उपयोग वर्ड प्रोसेसर की तरह, नेत्रहीन रूप से सामग्री को अपडेट करने के लिए करते हैं। Dreamweaver CS4 से पहले, यह अनावश्यक सीएसएस नियमों के परिणामस्वरूप हो सकता है .वर्ग 1, .class2, और इसी तरह। Dreamweaver CS4 में, बस अपना स्विच करें संपत्ति निरीक्षक सेवा मेरे एचटीएमएल मोड (इंस्पेक्टर के बाईं ओर स्थित HTML आइकन पर क्लिक करें) और आप केवल अनावश्यक HTML मार्कअप को सम्मिलित करते हुए, उस अनावश्यक सीएसएस को अलविदा कह देंगे.

10. फॉर्म वैलिडेशन को आसान बनाया

अपने प्रपत्र फ़ील्ड को मान्य करना चाहते हैं, लेकिन चिंतित हैं कि आपको खरोंच से पुनर्निर्माण करना होगा? कोई चिंता नहीं। बस एक मौजूदा फॉर्म एलिमेंट को चुनें, जैसे कि टेक्स्ट फ़ील्ड, और लागू करें स्प्री वैलिडेशन विजेट वहाँ से सम्मिलित करें> चंचल मेनू. फिर न्यूनतम या अधिकतम वर्ण जैसे सत्यापन आवश्यकताओं को सीधे से नियंत्रित करें संपत्ति निरीक्षक.

बोनस: 3 और

11. संबंधित फ़ाइलों को आसानी से एक्सेस करें

जब आप HTML या PHP फ़ाइल खोलते हैं, तो आपको अब दस्तावेज़ विंडो के शीर्ष पर निर्भर फ़ाइल नामों की एक पंक्ति दिखाई देगी, जैसे CSS, जावास्क्रिप्ट और यहां तक ​​कि PHP के लिए फ़ाइलें भी शामिल हैं। आप आसानी से इन फ़ाइलों पर स्विच कर सकते हैं, परिवर्तन कर सकते हैं और उन्हें सहेज सकते हैं, सभी बिना उन्हें खोले भी। जब आप संबंधित फ़ाइल बार में किसी भी फ़ाइल पर क्लिक करते हैं तो आपको उसका स्रोत कोड दृश्य और डिज़ाइन दृश्य में मूल पृष्ठ दिखाई देगा। या आपके मौजूदा चयन को प्रभावित करने वाले CSS स्रोत कोड को जल्दी से एक्सेस करने के लिए कोड नेविगेटर का उपयोग करें.

12. ब्राउज़र संगतता की जाँच करें

उस दस्तावेज़ को खोलें जिसे आप संगतता के लिए जांचना चाहते हैं; उसी मेनू बार से जहां कोड / स्प्लिट / डिज़ाइन दृश्य एक्सेस किए जाते हैं, 'के लिए सबसे दाईं ओर देखें'चेक पेज'बटन.

इसे क्लिक करने से ड्रॉप डाउन मेनू का विस्तार होगा, 'ब्राउज़र संगतता की जाँच करें'। ब्राउज़र संगतता परिणाम विंडो किसी भी समस्या के साथ खिड़की के नीचे दिखाएगा जिसे आपको संबोधित करने की आवश्यकता है.

नोट: यह मैक पर IE के नए संस्करणों की जाँच नहीं करेगा! परीक्षण के लिए किस ब्राउज़र का उपयोग करना है, यह चुनने के लिए चेक पेज > सेटिंग्स मेनू से.

13. PHP पेज का पूर्वावलोकन करें

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

शुरू करना

1. सबसे पहले, चयन करें साइट -> नयी जगह शीर्ष नेविगेशन से.
2. आप दोनों को देखेंगे बुनियादी तथा उन्नत साइट परिभाषा विकल्प टैब। का चयन करके आगे बढ़ते हैं उन्नत साइट परिभाषा टैब.
3. उपयुक्त बॉक्स में साइट के लिए एक फ़ोल्डर नाम दर्ज करें (इस उदाहरण के लिए हम फ़ोल्डर नाम के रूप में "myphp" का उपयोग करेंगे).
4. "डिफ़ॉल्ट छवियां फ़ोल्डर" फ़ील्ड में अपना नाम दर्ज करके "छवियां" नाम का एक और फ़ोल्डर बनाएं.
5. के नीचे स्थानीय जानकारी, फ़ील्ड में निम्नलिखित मानों का इनपुट करें:
   • साइट का नाम: साइट का नाम। केवल Dreamweaver में उपयोग किया जाना है
   • स्थानीय रूट फ़ोल्डर: यह उस साइट का नाम है जिसमें आप काम कर रहे होंगे। संघर्षों को कम करने के लिए या भ्रमित करने वाले नामों को एक तरह से साइटों का नाम देना सुनिश्चित करें।.
   • डिफ़ॉल्ट छवियाँ फ़ोल्डर: यह वैकल्पिक है, लेकिन इसे अभी बनाने की सलाह दी जाती है क्योंकि अधिकांश साइटें कुछ हद तक छवियों का उपयोग करेंगी। यह वह जगह है जहां डीडब्ल्यू कोडिंग चरण के दौरान आपके दस्तावेज़ों में चित्र सम्मिलित करने के लिए 'दिखेगा'.
   • लिंक से संबंधित: यह परिभाषित करता है कि ड्रीमविवर में दस्तावेज़ को कैसे संभाला जाएगा। आप दस्तावेज़ या रूट का चयन कर सकते हैं। दोनों के बीच अंतर हैं:
     • दस्तावेज़ सापेक्ष - आपके द्वारा काम की जा रही फ़ाइल और लिंक की जा रही आइटम के सापेक्ष एक पथ सम्मिलित करेगा.
     • रूट रिलेटिव - उपयोग / जो दस्तावेज़ / फ़ाइल को रूट फ़ोल्डर के संबंध में लिंक करने का कारण बनता है.
     • एक अन्य विकल्प सर्वर कॉन्फ़िगरेशन फ़ाइलों में कुछ कॉन्फ़िगरेशन जोड़ना है। अधिक उन्नत कार्य होने के कारण, हम अभी के लिए दस्तावेज़-सापेक्ष का उपयोग करने के लिए चिपके रहेंगे.
   • HTTP पता: अपनी परियोजना के लिए साइट रूट फ़ोल्डर दर्ज करें
   • केस-संवेदी लिंक: ड्रीमविवर जाँच करेगा कि क्या सर्वर पर अपलोड करते समय प्रोजेक्ट की किसी भी फ़ाइल में केस-संवेदी समस्या हो सकती है। आपके द्वारा उपयोग किए जाने पर सूचनाएँ दिखाई जाएँगी: साइट -> लिंक लिंक की जाँच करें। आप चाहें तो इसकी जाँच कर सकते हैं। मैं व्यक्तिगत रूप से इसे जाँच नहीं छोड़ता क्योंकि मैं हमेशा लोअरकेस में फ़ाइलों का नाम देता हूं। अपरकेस अक्षर अनुशंसित नहीं है.
   • कैश: सक्षम कैश की जाँच करें.
6. में दूरस्थ जानकारी पृष्ठ, या तो अपने एफ़टीपी या अन्य एक्सेस को किसी दूरस्थ सर्वर पर सेट करें या एक्सेस को किसी पर भी न छोड़ें.
7. में परीक्षण सर्वर पृष्ठ उस विकल्प का चयन करता है जो फ़ाइल प्रकार / सिस्टम से संबंधित है जिसे आप परीक्षण कर रहे हैं.
8. संस्करण नियंत्रण इस उदाहरण के लिए उपयोग नहीं किया जाएगा ताकि आप इसे तब तक खाली छोड़ सकें जब तक कि इससे परिचित न हों.
9. क्लोकिंग आपको अपनी साइटों के फ़ोल्डर में .psd, .fla, और अन्य स्रोत फ़ाइलों को रखने की अनुमति देता है और आपकी साइट को अपलोड / अपडेट करते समय DW उन्हें अवहेलना करेगा।.
10. डिजाइन नोट्स वेब डिज़ाइन टीम के लिए आदर्श हैं क्योंकि यह फाइलों में किए गए बदलावों पर ध्यान देता है। यह इस तरह से उपयोग करने के लिए डिफ़ॉल्ट और ठीक से जाँच की है.
11. छोड़ना फ़ाइल स्तंभ देखें, योगदान, तथा टेम्पलेट्स जैसे अकरण.
12. चंचल पृष्ठ केवल स्प्री एसेट फ़ोल्डर को इंगित करता है जो स्वचालित रूप से ड्रीमविवर के साथ शामिल है। इसे बदलने की कोई आवश्यकता नहीं है। एक बार हर सेटिंग समाप्त हो जाने पर, क्लिक करें ठीक.

Dreamweaver में PHP का पूर्वावलोकन करें

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

बस इतना ही। हैप्पी Dreamweaver'ing :-)

संपादक की टिप्पणी: इस पोस्ट के द्वारा लिखा गया है जेसी मैटलॉक Hongkiat.com के लिए। पिछले 6 वर्षों से, जेसी यूआई डिजाइन, ऐप डेवलपमेंट और वेब ट्रेंड में खुद को डुबो रहा है। वह एक छोटे, हालांकि बहुत प्रतिभाशाली विकास टीम के संस्थापक और डिज़ाइन लीड हैं, जो बीस्पोक ऐप डेवलपमेंट पर केंद्रित है.