ड्रीमविवर ट्यूटोरियल


ड्रीमविवर ट्यूटोरियल एक वेबसाइट बना रहा हैजैसा कि आप जानते हैं, यह साइट एक वेबसाइट बनाने के बारे में है। आप WordPress, Joomla या Drupal का उपयोग करके विभिन्न तरीके सीख सकते हैं। यहां तक ​​कि हमारे पास पुराने दिनों की तरह शुद्ध एचटीएमएल (जाहिर है एचटीएमएल 5, नवीनतम संस्करण) का उपयोग करने पर एक गाइड है। शुरुआती के लिए इस ड्रीमविवर ट्यूटोरियल में, आप एक और सीखेंगे.


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

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

यह एक लंबी सवारी होगी। हालांकि, आप इस बात से चकित होंगे कि आप इस सहज ज्ञान युक्त कार्यक्रम में कितनी जल्दी पहुंचेंगे.

Contents

ड्रीमवेवर क्या है और यह क्या कर सकता है?

सतह पर, ड्रीमविवर एक आईडीई (एकीकृत विकास पर्यावरण) है। इसका मतलब है कि यह सॉफ्टवेयर का एक टुकड़ा है जो वेब डिज़ाइन और विकास को आसान बनाने के लिए विभिन्न उपकरणों को जोड़ता है.

जो बात इसे विशेष बनाती है वह यह है कि यह कहीं सीएमएस (जहां आप अपनी वेबसाइट के बारे में विजुअल इंटरफेस के माध्यम से सब कुछ नियंत्रित करते हैं) और शुद्ध कोड एडिटर हैं। यहाँ विभिन्न भाग कैसे काम करते हैं.

विज़ुअल डिज़ाइन इंटरफ़ेस के माध्यम से वेबसाइट बनाएँ

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

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

दूसरी ओर, यदि आप कोडिंग करने में सक्षम हैं, तो ड्रीमविवर के पास इसके लिए सभी आवश्यक उपकरण भी हैं.

एक पूर्ण कोड संपादक के रूप में काम करता है

ड्रीमविवर का दूसरा भाग पूरी तरह से चित्रित कोड संपादक है। यह सभी मानक कार्यों से सुसज्जित है, जिसमें शामिल हैं:

  • वाक्य – विन्यास पर प्रकाश डालना – इसका मतलब है कि Dreamweaver विभिन्न तत्वों (जैसे ऑपरेटर, चर, आदि) को अलग-अलग रंगों में हाइलाइट करता है ताकि कोड को पढ़ने और सही करने में आसानी हो।.
  • कोड पूर्णता – कोड पूर्णता आपके फोन पर स्वतः पूर्ण के समान कार्य करता है। लिखना प्रारंभ करें और संपादक जो लिखना चाह रहे हैं उसके लिए सुझाव देगा। इस तरह, आपको पूरी तरह से सब कुछ टाइप नहीं करना होगा.
  • कोड का ढहना – कोड को पढ़ने के लिए कोड को आसान बनाने के लिए कोड का पतन एक और विशेषता है। यह आपको अपने कोड के कुछ हिस्सों को नेत्रहीन रूप से सिकोड़ने की अनुमति देता है जब आपको उनकी आवश्यकता नहीं होती है। इस तरह, आपको पूरी फ़ाइल को स्क्रॉल नहीं करना पड़ेगा, लेकिन केवल उन हिस्सों से ही काम कर सकते हैं, जिन पर आपको काम करना है.

ड्रीमविवर वेब डिजाइन (एचटीएमएल 5, सीएसएस) के लिए सबसे महत्वपूर्ण भाषाओं का समर्थन करता है, जावास्क्रिप्ट, PHP) और भी बहुत कुछ.

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

बहुत अधिक विशेषताएं हैं और आप शुरुआती के लिए आगामी ड्रीमविवर ट्यूटोरियल में कार्रवाई में उनमें से कई देखेंगे.

ड्रीमविवर सेटअप और वेबसाइट डिजाइनिंग प्रक्रिया (चरण-दर-चरण)

पहले कदम के रूप में, आपको आधिकारिक Adobe वेबसाइट से Dreamweaver प्राप्त करने की आवश्यकता है.

आप यहां या अपने क्रिएटिव क्लाउड क्लाइंट से निःशुल्क परीक्षण प्राप्त कर सकते हैं.

शुरुआती मूल्य निर्धारण के लिए dreamweaver ट्यूटोरियल

चरण 1. डाउनलोड और स्थापित करें

जब आप आधिकारिक वेबसाइट से प्रोग्राम प्राप्त करते हैं, तो बस इंस्टॉलेशन फ़ाइल डाउनलोड करें, इसे निष्पादित करें और निर्देशों का पालन करें.

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

चरण 2. पहला स्टार्टअप

जब आप पहली बार Dreamweaver शुरू करेंगे, तो आपको यह स्क्रीन दिखाई देगी.

पहला स्टार्टअप

यदि आपने पहले कभी प्रोग्राम का उपयोग नहीं किया है, तो चुनें नहीं, मैं नया हूं. जब आप करते हैं, तो Dreamweaver आपको एक सेटअप विज़ार्ड के माध्यम से ले जाता है। पहला कदम यह चुनना है कि डेवलपर्स के लिए कार्यक्षेत्र का उपयोग करना है या एक मानक कार्यक्षेत्र है.

गाइड पर काम करने का सपना देखने वाले का चयन करें

चूंकि यह एक ड्रीमविवर शुरुआती ट्यूटोरियल है, मानक संस्करण चुनें। उसके बाद, आप अपने कार्यक्षेत्र के लिए चार अलग-अलग विकल्पों में से एक रंग विषय चुन सकते हैं.

सपनों की नाव पर चलने वाले गाइड रंग योजना चुनते हैं

अंतिम चरण यह चुनना है कि क्या नमूना फ़ाइल, नई या मौजूदा परियोजना के साथ शुरू करना है या एक ट्यूटोरियल देखना है.

आखिरी कदम में गाइड पर सपने देखने वाला

एक नए या मौजूदा फ़ोल्डर के साथ शुरू करने के लिए चुनें और आप सेटअप प्रक्रिया के साथ किया जाता है। बहुत बढ़िया!

अब एक प्रोजेक्ट शुरू करते हैं और ड्रीमविवर के साथ एक वेबसाइट बनाना सीखते हैं.

चरण 3. एक नई साइट शुरू करें

पहला कदम एक नई साइट बनाना है। उसके लिए, पर जाएं साइट> नई साइट. यह आपको इस स्क्रीन पर मिलेगा:

dreamweaver में एक नई साइट बनाएं

पहला कदम अपनी साइट को एक नाम देना है। फिर, आपको यह चुनने की आवश्यकता है कि इसे कहाँ सहेजना है। यह आप पर निर्भर है, लेकिन आमतौर पर यह सरलता के लिए सभी परियोजनाओं को एक स्थान पर रखने के लिए समझ में आता है.

आपके पास अपने नए प्रोजेक्ट को Git रिपॉजिटरी के साथ जोड़ने की संभावना है। यह एक अच्छा विचार हो सकता है क्योंकि यह आपको देता है संस्करण नियंत्रण लेकिन आप इसे अभी के लिए छोड़ सकते हैं.

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

जो हमारे लिए महत्वपूर्ण है स्थानीय जानकारी के अंतर्गत एडवांस सेटिंग.

dreamweaver में डिफ़ॉल्ट छवियों फ़ोल्डर को सक्षम करें

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

अभी के लिए यही है, क्लिक करें सहेजें अपने कार्यक्षेत्र में वापस जाने के लिए.

स्टेप 4. अपनी होमपेज फाइल बनाएं

अब जब आपने प्रोजेक्ट साइट बना ली है, तो पहली फ़ाइल के लिए समय है। हम मुखपृष्ठ से शुरू करेंगे.

यदि ड्रीमविवर आपको स्वयं ही विकल्प प्रदान नहीं करता है, तो जाएं फ़ाइल> नया। आप या तो पूरी तरह से नई फ़ाइल बना सकते हैं या मौजूदा टेम्पलेट का उपयोग कर सकते हैं। कार्यक्रम उनमें से कुछ के साथ आता है (देखें स्टार्टर टेम्पलेट)। अभी, हम इसके बजाय एक नया बनाएँगे.

dreamweaver में एक नई फ़ाइल बनाएँ

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

ड्रीमव्हीवर में ताजा परियोजना

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

चरण 5. एक हैडर बनाएँ

पृष्ठ में एक तत्व सम्मिलित करने के लिए, आपको पहले उसका स्थान चुनना होगा। या तो खाली पृष्ठ पर क्लिक करें (Dreamweaver स्वचालित रूप से चुनेंगे) तत्व यदि आप करते हैं) या स्क्रीन के कोड भाग में कर्सर को उसी तत्व में रखें.

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

dreamweaver में हेडर तत्व डालें

एक साधारण क्लिक पृष्ठ में इसे सम्मिलित करता है। आप यह भी देख सकते हैं कि यह HTML दस्तावेज़ के अंदर दिखाई देता है.

हेडर दृश्य इंटरफ़ेस और कोड संपादक में दिखाई देता है

सरल, सही?

अब आप हेडर के अंदर टेक्स्ट को बदलेंगे और इसे हेडिंग में भी बदलेंगे। दोनों के लिए – सबसे पहले नीचे कोड संपादक में पाठ को चिह्नित करें.

हेडर टेक्स्ट को ड्रीमविवर में चिह्नित करें

इसके बाद, वापस जाएं सम्मिलित करें, बगल में तीर पर क्लिक करें शीर्षक और चुनें एच 1. यह पृष्ठ शीर्षक को H1 HTML टैग में लपेटता है। शीर्षकों के टैग के बारे में अधिक जानकारी के लिए, पढ़ें यह लेख.

उसके बाद, आप अपने पृष्ठ के लिए एक शीर्षक भी लिख सकते हैं। अपनी वास्तविक वेबसाइट में, आप कीवर्ड के साथ कुछ वर्णनात्मक चुनेंगे, न कि केवल माय टेस्ट वेबसाइट में आपका स्वागत है उदाहरण के अनुसार.

dreamweaver में हेडर बदल दिया

ठीक है, आपने अभी एक पेज हेडर बनाया है! फिलहाल यह अभी भी थोड़ा कच्चा है, इसलिए इसे अगले सीएसएस के माध्यम से बदल दें.

चरण 6. एक सीएसएस फ़ाइल बनाएँ

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

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

पहला कदम अपने नए हेडर को सीएसएस क्लास या आईडी देना है। उस प्रक्रिया के दौरान, Dreamweaver आपको एक स्टाइल शीट फ़ाइल बनाने के लिए भी संकेत देगा। स्क्रीन के निचले दाएं भाग में DOM मेनू पर जाएं जो आपकी संपूर्ण साइट संरचना को सूचीबद्ध करता है। सुनिश्चित करें कि आपका हेडर चुना गया है.

लाइव दृश्य में, अब आप इसे छोटे लेबल के साथ नीले रंग में चिह्नित करेंगे और सबसे नीचे एक धन चिह्न होगा.

Dreamweaver में css फ़ाइल जोड़ें

प्लस साइन पर क्लिक करें और टाइप करें #header खुलने वाले क्षेत्र में हैशटैग का मतलब है कि आप एक असाइन कर रहे हैं आईडी एक वर्ग के विपरीत. एंटर दबाए। इसके बजाय उद्घाटन मेनू में पृष्ठ में परिभाषित करें चुनते हैं एक नई CSS फ़ाइल बनाएं. पॉप-अप में, चुनें ब्राउज़ और अपने साइट फ़ोल्डर में नेविगेट करें। फिर टाइप करें style.css (जो स्टाइल शीट के लिए मानक नाम है) फ़ाइल का नाम क्षेत्र और हिट सहेजें.

dreamweaver में स्टाइल शीट बनाएं

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

शैली पत्रक वेबसाइट में जोड़ा गया

बहुत बढ़िया! अब आप अपने पृष्ठ की स्टाइल बदलने के लिए तैयार हैं.

चरण 7. पृष्ठ शीर्षक के लिए एक सीएसएस चयनकर्ता बनाएं

पहली चीज जो आप करना चाहते हैं, वह है कि आप अपनी हेडिंग को बदल सकते हैं और उसे केंद्र में भी रख सकते हैं। उसके लिए, आपको सबसे पहले एक नया CSS चयनकर्ता बनाना होगा। एक चयनकर्ता हमारे पृष्ठ पर एक तत्व का नाम है जिसे आप गुण, जैसे रंग, आकार और बहुत कुछ असाइन कर सकते हैं.

अपने H1 शीर्षक को DOM दाईं ओर निचले दाईं ओर चिह्नित करें (जैसे आपने हेडर से पहले किया था)। फिर, इसके बाद, चुनें सीएसएस डिजाइनर.

शीर्षक तत्व के लिए स्टाइल तैयार करें

CSS चयनकर्ता बनाने के लिए, उस रेखा पर क्लिक करें जहाँ वह S कहती हैनिर्वाचकों और फिर प्लस सिंबल पर क्लिक करें। यह आपको अपने नाम के लिए एक चयनकर्ता को स्वचालित रूप से प्रस्तावित करना चाहिए # हैडर एच 1.

Dreamweaver में css selector बनाएं

इसे बनाने के लिए एंटर दबाएं। किया हुआ!

त्वरित नोट: CSS के लिए उन सभी नए लोगों के लिए, इस चयनकर्ता का मतलब है कि आप नामित तत्व को लक्षित कर रहे हैं h1 के भीतर नामक तत्व #header. इस तरह, आप सीएसएस के रूप में जो भी इनपुट करते हैं, वह केवल लिखित पाठ पर ही लागू होता है, न कि हेडर तत्व पर.

चरण 8. हेडलाइन फ़ॉन्ट बदलें

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

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

Dreamweaver में css विकल्प सक्षम करें

नए बटनों के साथ, आप लेआउट, पाठ, सीमा और पृष्ठभूमि के क्षेत्रों से कई सीएसएस गुण चुन सकते हैं। अधिक बटन आपको अपने स्वयं के नियमों को इनपुट करने का विकल्प देता है.

फ़ॉन्ट प्रकार बदलने के लिए, पर क्लिक करें टेक्स्ट शीर्ष पर विकल्प (वैकल्पिक रूप से, नीचे स्क्रॉल करें)। आगामी विकल्पों में, हॉवर ओवर करें फ़ॉन्ट परिवार और पर क्लिक करें मूलभूत अक्षर.

सपना परिवार में फ़ॉन्ट परिवार बदलें

यह आपको सामान्य फोंट के लिए कई विकल्प देगा, जिसमें उनकी कमियां भी होंगी (यदि उपयोगकर्ता ब्राउज़र प्राथमिक फ़ॉन्ट दिखाने में असमर्थ है)। आप पर क्लिक करना चाह सकते हैं फ़ॉन्ट्स प्रबंधित करें इस मेनू में आने के लिए नीचे:

एडोब एज वेब फोंट

यहाँ, आप एडोब से मुफ्त फोंट चुनने में सक्षम हैं एज वेब फ़ॉन्ट्स सेवा. या तो नाम से एक फ़ॉन्ट खोजें या बाईं ओर कई फ़िल्टर विकल्पों का उपयोग करके अपनी पसंद को कम करें जब तक कि आपको कुछ न मिले.

किसी भी टाइपफेस पर क्लिक करने पर यह ड्रीमविवर में शामिल हो जाता है। एक बार जब आप ऐसा कर लेते हैं, तो आप या तो सीधे उनका उपयोग कर सकते हैं या फिर जा सकते हैं कस्टम फ़ॉन्ट ढेर अपने खुद के कमबैक फोंट को परिभाषित करने के लिए.

ड्रीमवेवर में कस्टम फॉन्ट स्टैक बनाएं

अभी के लिए, बस मारो किया हुआ और फिर पर क्लिक करें डिफ़ॉल्ट फोंट फिर। इस बार अपना चुना हुआ कस्टम फ़ॉन्ट चुनें और voila – परिवर्तन सभी आवश्यक कोडिंग सहित किया जाता है.

Dreamweaver में बदल फ़ॉन्ट

यदि आप अपने पर क्लिक करते हैं style.css शीर्ष पर फ़ाइल, आप देखेंगे कि सभी मार्कअप को भी जोड़ा गया है.

ड्रीमविवर में अपडेटेड स्टाइल शीट

चरण 9. हेडलाइन को बदलें और इसका आकार बदलें

पाठ अभी भी बेहतर दिख सकता है। अगला कार्य इसे केंद्र में रखना और फ़ॉन्ट आकार को बढ़ाना है। उसके लिए, आप नामक एक अन्य सुविधा का भी उपयोग कर सकते हैं शीघ्र संपादित.

इसका उपयोग करने के लिए, कोड दृश्य पर जाएं और उस हिस्से पर राइट-क्लिक करें जिसे आप संपादित करना चाहते हैं। इस मामले में, यह पर है

ब्रैकेट.

dreamweaver में त्वरित संपादन मेनू खोलें

यहाँ, चुनें शीघ्र संपादित शीर्ष पर। यह नीचे इस तत्व से जुड़े सीएसएस को खोल देगा। अब आप पूरी शैली की शीट फ़ाइल (जो बहुत लंबी हो सकती है) को खोजे बिना अतिरिक्त गुण इनपुट कर सकते हैं। पाठ को केंद्र में रखने और इसे बड़ा करने के लिए, इसमें निम्न कोड जोड़ें.

फ़ॉन्ट-आकार: 42 पीएक्स;
पाठ-संरेखित करें: केंद्र;

टाइप करते समय, ड्रीमविवर आपके द्वारा इनपुट करने की कोशिश कर रहे प्रस्तावों को भी आसान बना देगा। यह कोड पूरा होने की विशेषता है जो पहले बताई गई थी.

जब आप कर लेंगे, तो यह इस तरह दिखेगा:

ड्रीमव्यूवर में त्वरित संपादन के माध्यम से सीएसएस बदलें

ध्यान दें कि पाठ पहले ही लाइव दृश्य में बदल चुका है। अब, दबाएं Esc शैली पत्रक पर त्वरित, संपादित और शीर्ष छोड़ने के लिए। आप पाएंगे कि नया सीएसएस उपयुक्त स्थान पर जोड़ा गया है.

बहुत अच्छा, सही?

वैसे, अगर आप कभी भी इस बारे में अनिश्चित नहीं हैं कि सीएसएस संपत्ति का क्या मतलब है, बस इसे राइट-क्लिक करें और चुनें क्विक डॉक्स (या प्रेस Ctrl + K)। तब ड्रीमविवर आपको एक स्पष्टीकरण देगा.

ड्रीमवेवर क्विक डॉक्स

चरण 10. अधिक सामग्री जोड़ें

अब तक आपने जो कुछ भी सीखा है, उसके साथ आप एक अल्पविकसित साइट बना सकते हैं। इस ड्रीमविवर ट्यूटोरियल के लिए, हमने निम्नलिखित कार्य किए हैं:

  • शीर्षकों और पैराग्राफ के लिए डिफॉल्ट डिफ़ॉल्ट फोंट
  • एक नेविगेशन बार को जोड़ा और उसमें होमपेज का लिंक बनाया
  • अंदर दो और बक्से के साथ सामग्री के लिए एक डिव बॉक्स जोड़ा
  • उनमें से एक को बाएं और एक को दाएं से घुमाया नाव संपत्ति
  • प्रतिशत तक उनकी चौड़ाई सीमित करें ताकि वे क्षैतिज रूप से संरेखित कर सकें
  • एक बिना शीर्षक वाली सूची सहित बाईं ओर एक नमूना शीर्षक और डमी पाठ जोड़ा गया
  • एक प्रपत्र बनाया गया (ड्रॉप-डाउन मेनू का उपयोग करें) सम्मिलित करें), दो टेक्स्ट फ़ील्ड और एक सबमिट बटन
  • सीएसएस मार्जिन और पैडिंग के माध्यम से तत्वों के चारों ओर जोड़ा गया
  • बशर्ते पृष्ठभूमि के रंग और सीमाएँ
  • एक पाद लेख और एक कॉपीराइट संदेश बनाया

यहाँ परिणाम है:

उन्नत डिजाइन के साथ वेबसाइट

उदाहरण के लिए कोड:

चूंकि यह थोड़ा उन्नत है और हर कोई नहीं जानता कि यह कैसे करना है, आप नीचे HTML और सीएसएस पा सकते हैं ताकि आप इसे अपने लिए फिर से संगठित कर सकें। पहले HTML:





index.html

 



घर

मुख्य सामग्री के लिए नमूना शीर्षक

लॉरेम इप्सम डोलर अमेट, कंसेटेटुर एडिपिसिंग एलीट। पेलेरेसेक स्कैलरिस्क आईडी इस्ट एमेट ओर्नारे। सस्पेंडिसे इगेट इलीट मील। इम्पिडिएट नीलामकर्ता लेओ वाइटे ब्लांडिट में.

  • एटिम् टेम्पप्स urna condimentum libero varius
  • यूट कोडो रिसस फिनिबस
  • ड्यूस ओडियो लक्सस, एलिमेंट इगेट सेमी फिनीबस
  • मोलिस डिग्निसिम एनीम.
  • क्विस्क मोलेस्टी सुस्पिलिट ओडियो वेल फैसिलिसिसिस

करैबिटुर वेस्टिबुलम, लॉरम एक टिसिनडंट डैपिबस, इरैट सेमी रोंस्कस निस्ला, नॉन डैपिबस क्म मील एसी लिगुला। वेस्टिबुलम आईडी औल्टर एरोस, एनईसी पोर्टरिटर ओडियो। नून प्रभावोत्पादक टर्पिस सेड नुल्ला वेस्टिबुलम विवर्रा। मेकेनस इयाकुलिस मील ऑर्नारे, डेपीबस लेक्टस इन, फैसिलिसिस निसल.

कार्रवाई के लिए नमूना कॉल!

लॉरेम इप्सम डोलर अमेट, कंसेटेटुर एडिपिसिंग एलीट। पेलेरेसेक स्कैलरिस्क आईडी इस्ट एमेट ओर्नारे। सस्पेंडिसे इगेट इलीट मील.

कॉपीराइट © 2017 मेरी काल्पनिक वेबसाइट

और फिर सीएसएस:

@charset "utf-8";

तन {
पृष्ठभूमि-रंग: # F5F5F5;
मार्जिन-टॉप: 0px;
मार्जिन-राइट: 0px;
मार्जिन-नीचे: 0px;
मार्जिन-वाम: 0px;
}

पी,
ए,
उल,
ol,
ली,
लेबल,
इनपुट {
font-family: muli, sans-serif;
फ़ॉन्ट-शैली: सामान्य;
फ़ॉन्ट-वजन: 300;
फ़ॉन्ट-आकार: 17px;
}

एच 1, एच 2, एच 3, एच 4, एच 5 {
font-family: karla, sans-serif;
फ़ॉन्ट-शैली: सामान्य;
फ़ॉन्ट-वजन: 400;
पाठ-परिवर्तन: अपरकेस;
}

# जयधर {
पैडिंग-टॉप: 25 पीएक्स;
पैडिंग-बॉटम: 25 पीएक्स;
पृष्ठभूमि-रंग: # फफूंद;
बॉर्डर-बॉटम: 4px सॉलिड # EB232F;
}

# हैडर एच 1 {
font-family: aguafina-script;
फ़ॉन्ट-शैली: सामान्य;
फ़ॉन्ट-वजन: 400;
फ़ॉन्ट-आकार: 42 पीएक्स;
पाठ-संरेखित करें: केंद्र;
मार्जिन-टॉप: 0px;
मार्जिन-बॉटम: 0px;
पाठ-परिवर्तन: कोई नहीं;
}

#पथ प्रदर्शन {
मार्जिन-राइट: ऑटो;
मार्जिन-वाम: ऑटो;
अधिकतम-चौड़ाई: 1140px;
मार्जिन-टॉप: 10 पीएक्स;
मार्जिन-नीचे: 10px;
}

#navigation {
रंग: # EB232F;
}

.मुख्य {
प्रदर्शन क्षेत्र;
मार्जिन-टॉप: 15 पीएक्स;
मार्जिन-राइट: ऑटो;
मार्जिन-वाम: ऑटो;
मार्जिन-नीचे: 15px;
दोनों को साफ करो;
अतिप्रवाह: ऑटो;
अधिकतम-चौड़ाई: 1140px;
}

.मुख्य # मुख्य-दाई {
सही नाव;
चौड़ाई: 37.5%;
प्रदर्शन क्षेत्र;
}

.मुख्य # मुख्य-बाएँ {
बाईंओर तैरना;
चौड़ाई: 57%;
प्रदर्शन क्षेत्र;
पैडिंग-राइट: 20 पीएक्स;
}

.मुख्य # मुख्य-सही .cta {
पाठ-संरेखित करें: केंद्र;
}

.मुख्य # मुख्य-सही .फॉर्म {
चौड़ाई: 92%;
मार्जिन-राइट: ऑटो;
मार्जिन-वाम: ऑटो;
}

# मुख्य-दाईं ओर .form div {
मार्जिन-नीचे: 10px;
}

# मुख्य-दाईं ओर .label {

}

# मुख्य-दाईं ओर .txtfield {
चौड़ाई: 100%;

}

.मुख्य # मुख्य-दाएँ # बटन #
पाठ-संरेखित करें: केंद्र;
पैडिंग-टॉप: 7 पीएक्स;
पैडिंग-बॉटम: 7 पीएक्स;
मार्जिन-वाम: ऑटो;
मार्जिन-राइट: ऑटो;
स्थिति: रिश्तेदार;
प्रदर्शन क्षेत्र;
पैडिंग-राइट: 36 पीएक्स;
पैडिंग-लेफ्ट: 36 पीएक्स;
सीमा: कोई नहीं;
पृष्ठभूमि-रंग: # EB232F;
रंग: # फाफ;
कर्सर: सूचक;
}

.पाद {
प्रदर्शन क्षेत्र;
पैडिंग-टॉप: 25 पीएक्स;
पैडिंग-बॉटम: 25 पीएक्स;
पाठ-संरेखित करें: केंद्र;
}

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

चरण 11. ब्राउज़र और मोबाइल डिवाइस पर पूर्वावलोकन करें

हमने यह सब कैसे किया? ठीक है, सबसे पहले, हम शायद वेबसाइटों की तुलना में थोड़ा अधिक अनुभवी हैं जो आप हैं। इसलिए, हमारे पास उचित वेब पेज बनाने के तरीके के बारे में मेरे दिमाग में पहले से ही कदम हैं.

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

आरंभ करने के लिए, निचले दाएं कोने में वास्तविक समय पूर्वावलोकन बटन पर क्लिक करें.

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

यह पूर्वावलोकन विकल्प खोल देगा.

dreamweaver में वास्तविक समय पूर्वावलोकन विकल्प

ब्राउज़र नामों में से एक पर क्लिक करने पर उसमें आपकी वेबसाइट परियोजना खुल जाएगी। आप अपने फोन या टैबलेट के साथ QR कोड को स्कैन कर सकते हैं (उदाहरण के लिए) फ़ायरफ़ॉक्स क्वांटम) या अपने डिवाइस पर लाइव पूर्वावलोकन शुरू करने के लिए अपने ब्राउज़र में प्रदर्शित पता टाइप करें.

बस जागरूक रहें, इसके लिए आपको अपने एडोब आईडी और पासवर्ड को इनपुट करना होगा। आपके पास Dreamweaver के लिए साइन अप करने से होना चाहिए.

सबसे अच्छी बात: ड्रीमविवर में आपके द्वारा किए गए कोई भी परिवर्तन ब्राउज़र में उसी समय दिखाई देंगे, जब आप उन्हें बनाते हैं.

इसने मुझे साइट को तेज़ी से जोड़ने में कैसे मदद की? सबसे पहले, आपकी स्क्रीन के आकार के आधार पर, ब्राउज़र में प्रदर्शन मूल रूप से करीब हो सकता है जो आप ड्रीमविएवर में देखते हैं।.

दूसरे, ब्राउज़र में साइट की जांच करने से मुझे परिवर्तनों का परीक्षण करने के लिए डेवलपर टूल का उपयोग करने की अनुमति मिलती है.

ब्राउज़र में डेवलपर उपकरण

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

फोन संस्करण पर एक नज़र से पता चलता है कि अभी भी बहुत काम करना बाकी है.

मोबाइल वास्तविक समय पूर्वावलोकन में

यह हमें हमारे अगले बिंदु पर सही लाता है.

चरण 12. मीडिया क्वेरी जोड़ें

अपनी वेबसाइट को सभी उपकरणों पर काम करने के लिए, आपको एक तथाकथित मीडिया क्वैश्चंस जोड़ने की जरूरत है। ये सशर्त सीएसएस वक्तव्य हैं जो ब्राउज़र को कुछ स्क्रीन आकार या विशेष उपकरणों पर केवल ऊपर या नीचे शैली पर लागू करने के लिए कहते हैं। इस तरह, आप छोटे स्क्रीन पर लेआउट को बदल सकते हैं.

अब तक, आपने केवल वैश्विक शैलियों को परिभाषित किया है। इसका मतलब है कि शैलियों को पूरी साइट पर लागू किया जाता है। अब आप सीखेंगे कि छोटी स्क्रीन के लिए सशर्त शैलियों को कैसे जोड़ा जाए.

सबसे पहले, पर जाएं सीएसएस डिजाइनर. सुनिश्चित करें कि जिस फ़ाइल को आप कोड जोड़ना चाहते हैं, वह चयनित है सूत्रों का कहना है. के तहत प्लस साइन मारा @media.

यह आपको यह विकल्प पैनल देता है:

dreamweaver में मीडिया क्वेरी मेनू

आप मीडिया प्रश्नों के लिए शर्तों को परिभाषित कर सकते हैं, जैसे कि वे उन उपकरणों पर लागू होते हैं जो अभिविन्यास, संकल्प और बहुत कुछ करते हैं। आप प्लस साइन के साथ कई शर्तें भी जोड़ सकते हैं.

हमारे उदाहरण के लिए और क्या महत्वपूर्ण है अधिकतम चौड़ाई स्थापना। इसके साथ, आप कस्टम सीएसएस को परिभाषित करने में सक्षम हैं जो केवल एक निश्चित अधिकतम स्क्रीन आकार पर लागू होगा.

मान लें कि आप पहले फ़ोन पर चीज़ें ठीक करना चाहते हैं, इसलिए आप इसमें लिखें अधिकतम चौड़ाई 375 पिक्सल के। जब आप करते हैं, तो आप नीचे सीएसएस कोड देख सकते हैं.

dreamweaver में मीडिया क्वेरी बनाएँ

क्लिक करने पर क्या होने वाला है ठीक है यह है कि स्क्रीन के शीर्ष पर एक हरे रंग की रेखा दिखाई देती है। यह नेत्रहीन मीडिया क्वेरी का प्रतिनिधित्व करता है। इसे क्लिक करें और स्क्रीन स्वचालित रूप से उस आकार में कूद जाती है.

dreamweaver में मीडिया क्वेरी बनाएं

चरण 13. सशर्त सीएसएस जोड़ें

मोबाइल के लिए डिज़ाइन को सही करने के लिए, पहली चीज जो हमें करने की ज़रूरत है वह कोड को समाप्त करना है जो साइट पर दो तत्वों को एक दूसरे के बगल में व्यवस्थित करता है। उसके लिए स्पष्ट रूप से पर्याप्त जगह नहीं है.

आप उसी तरह से कर सकते हैं जब आपने पहले सीएसएस में हेरफेर किया था, केवल इस बार जब आप ऐसा करते हैं तो आपके पास एक मीडिया क्वेरी सक्रिय है.

सबसे पहले – अपने DOM दृश्य में तत्व पर नेविगेट करें। वहां से इसके लिए एक नया CSS चयनकर्ता बनाएं। फिर, इसके सेट करें चौड़ाई सेवा ऑटो, नाव सेवा कोई नहीं (इसे बाईं ओर जाने से रोकने के लिए) और पक्षों में कुछ पैडिंग जोड़ें ताकि सामग्री स्क्रीन के किनारे पर न दिखे.

सही मोबाइल डिजाइन

बहुत बेहतर लग रहा है, क्या यह नहीं है? उसी तरह, आप उन सभी को सही दिखने के लिए पृष्ठ पर अन्य सभी तत्वों के सीएसएस को बदल सकते हैं.

यह मूल रूप से मीडिया प्रश्नों के लिए है। आप टेबलेट और अन्य आकारों के लेआउट को समायोजित करने के लिए उसी विधि का उपयोग कर सकते हैं.

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

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

dreamweaver में शॉर्टकट के माध्यम से मीडिया क्वेरी बनाएं

चरण 14. अपनी साइट को सर्वर पर अपलोड करें

हम उपयोग करने की सलाह देते हैं Bluehost (सहबद्ध लिंक) अपने Dreamweaver साइट की मेजबानी करने के लिए.

एक बार जब आप डिज़ाइन भाग के साथ हो जाते हैं, तो आप साइट को अपने सर्वर पर अपलोड करने के लिए बहुत अधिक तैयार होते हैं। जैसा कि बहुत शुरुआत में बताया गया है, ड्रीमविवर भी इसे बहुत आसान बनाता है.

सबसे पहले, पर जाएं साइट> साइटें प्रबंधित करें. मेनू से अपनी वर्तमान वेबसाइट चुनें और चुनें संपादित करें नीचे बाईं ओर। निम्न विंडो में, पर क्लिक करें सर्वर.

dreamweaver में दूरस्थ सर्वर विन्यास

अपने एफ़टीपी सर्वर से कनेक्ट करने के लिए सभी महत्वपूर्ण डेटा इनपुट करें। नाम आपके ऊपर है, बाकी (FTP पता, उपयोगकर्ता नाम, पासवर्ड) आपके होस्टिंग प्रदाता से आता है। फ़ाइलों को और अपनी लाइव साइट के वेब पते को रखने के लिए कौन सी निर्देशिका निर्दिष्ट करना न भूलें! अंतिम भाग महत्वपूर्ण है ताकि ड्रीमविवर साइट-सापेक्ष आंतरिक लिंक बना सके.

के अंतर्गत उन्नत आपके पास कुछ और विकल्प हैं (चाहे सहेजने पर फ़ाइलें स्वचालित रूप से अपलोड करें)। आप आमतौर पर चीजों को वैसे ही रख सकते हैं जैसे वे हैं। मारो सहेजें दो बार और आप कर रहे हैं.

अब जाना है फ़ाइलें पैनल (या तो ऊपरी दाईं ओर या के माध्यम से विंडो> फाइलें) और अपने सर्वर से कनेक्ट करने के लिए सबसे बाईं ओर के प्रतीक पर क्लिक करें:

साइट को रिमोट सर्वर पर अपलोड करें

एक बार कनेक्शन स्थापित हो जाने के बाद, उन फ़ाइलों का चयन करें जिन्हें आप अपलोड करना चाहते हैं और ऐसा करने के लिए ऊपर की ओर इंगित करने वाले तीर पर क्लिक करें। एक बार यह हो जाने के बाद, आपकी साइट आपके वेब पते से उपलब्ध होनी चाहिए.

बहुत बढ़िया! आपने बस ड्रीमविवर के साथ एक सरल साइट बनाई और अपलोड की!

ड्रीमविवर ट्यूटोरियल – अंतिम शब्द

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

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

अब तक आपको एक ठोस समझ है कि ड्रीमविवर कैसे काम करता है और वेबसाइट बनाने के लिए आप इसका उपयोग कैसे कर सकते हैं। अब यह आप पर निर्भर करता है कि आप कितना गहरा गोता लगाएँ और अगले चरणों का पता लगाएँ.

मत भूलना: ड्रीमविवर वेबसाइट बनाने का सिर्फ एक तरीका है। कई और भी हैं और आप यहाँ पर बहुत सारी जानकारी पा सकते हैं। सौभाग्य!

क्या आपने पहले ड्रीमविवर का इस्तेमाल किया है? आप की राय क्या है? ऊपर जोड़ने के लिए कुछ भी? नीचे टिप्पणी अनुभाग में हमें बताएं!

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map