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

लेकिन आप Dreamweaver का उपयोग करके अपनी पहली वेबसाइट कैसे बनाते हैं?

ड्रीमविवर के साथ शुरुआत करना

इससे पहले कि आप इसके साथ काम करना शुरू करें, आपको Adobe Dreamweaver की एक प्रति प्राप्त करनी होगी, लेकिन एक निःशुल्क परीक्षण उपलब्ध है।

हेड टू द एडोब वेबसाइट, लॉग इन या खाता पंजीकृत करें, और आरंभ करने के लिए एडोब क्रिएटिव क्लाउड टूल डाउनलोड करें। यहां से, आप Adobe Dreamweaver डाउनलोड कर सकते हैं और पूरी गाइड के साथ शुरुआत कर सकते हैं।

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

चरण 1: एक ड्रीमविवर साइट बनाएं

Adobe Dreamweaver खोलें और पर जाएं साइट पृष्ठ के शीर्ष पर मेनू। चुनना नयी जगह, फिर अपनी वेबसाइट के लिए एक नाम चुनें और उसके लिए एक फ़ाइल स्थान चुनें।

instagram viewer

चरण 2: एक टेम्पलेट फ़ाइल बनाएँ

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

पर क्लिक करें नया बनाओ या जाना फ़ाइल > नया और चुनें एचटीएमएल टेम्पलेट से दस्तावेज़ का प्रकार सूची।

यह पहले से मौजूद कुछ HTML के साथ एक मूल टेम्पलेट बनाएगा। आप अपने प्रोजेक्ट के लिए इस HTML का उपयोग करेंगे, इसलिए इसे अगले चरणों के लिए रखने के लायक है।

​​​​​​

चरण 3: टेम्पलेट में एक हैडर बनाएँ

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

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

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

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

हेडर में लिंक वाले पेज अभी तक मौजूद नहीं हैं, इसलिए इसे छोड़ दें href संपत्ति तब तक खाली है जब तक आप उन्हें नहीं बनाते।

चरण 4: CSS के लिए एक स्टाइलशीट जोड़ें

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

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

चरण 5: टेम्पलेट में संपादन योग्य क्षेत्र जोड़ें

संपादन योग्य क्षेत्र HTML के अनुभाग बनाते हैं जो संपादन योग्य होते हैं जब आप अन्य पृष्ठ बनाने के लिए टेम्पलेट का उपयोग करते हैं। हमारी मुख्य पृष्ठ सामग्री इस तरह के क्षेत्र में पूरी तरह फिट बैठती है। के लिए जाओ डालना > टेम्पलेट > संपादन योग्य क्षेत्र अपने पृष्ठ में एक संपादन योग्य क्षेत्र जोड़ने के लिए।

चरण 6: टेम्पलेट में छवि/पाठ सामग्री जोड़ें

आपके द्वारा अभी जोड़ा गया संपादन योग्य क्षेत्र बिना किसी अतिरिक्त HTML के प्रयोग योग्य है, लेकिन जब आप अलग-अलग पृष्ठ बनाते हैं तब भी आप संपादित करने के लिए कुछ जोड़ सकते हैं। शुरू करने के लिए, यहां जाएं डालना और चुनें डिव अपनी वेबसाइट में एक नया div तत्व जोड़ने के लिए।

यह पृष्ठ पर टेक्स्ट सामग्री के लिए कंटेनर के साथ-साथ पृष्ठभूमि छवि जोड़ने के लिए एक जगह दोनों के रूप में काम करेगा। इस तत्व में एक वर्ग और एक आईडी है ताकि विभिन्न पृष्ठों में अलग-अलग सीएसएस गुण हों। इन अद्वितीय सीएसएस पृष्ठभूमि पैटर्न यदि आप अपनी Dreamweaver वेबसाइट को अगले स्तर पर ले जाना चाहते हैं तो यह बहुत अच्छा है।

अगला, यहां जाएं डालना > शीर्षकों > एच 1 आपके द्वारा अभी जोड़े गए div तत्व के अंदर एक शीर्षक जोड़ने के लिए। इन दोनों तत्वों को ठीक से काम करने के लिए कुछ CSS की आवश्यकता होती है। Div में पृष्ठभूमि-छवि, पृष्ठभूमि-आकार और ऊंचाई मान हैं। के लिए जाओ फ़ाइल > सभी को सुरक्षित करें यह सुनिश्चित करने के लिए कि आपका टेम्प्लेट अपडेट होता है।

​​​​​​

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

चरण 7: टेम्पलेट के साथ पेज जोड़ें

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

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

इस प्रक्रिया को तब तक दोहराएं जब तक आपके पास अपनी आवश्यकताओं को पूरा करने के लिए पर्याप्त पृष्ठ न हों। इसके लिए आपको किसी एक टेम्पलेट से चिपके रहने की आवश्यकता नहीं है; आप विभिन्न पेज लेआउट के लिए नए जोड़ सकते हैं।

चरण 8: टेम्पलेट में पेज लिंक जोड़ें

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

चरण 9: नए पेज पर CSS/HTML को ठीक करें

प्रत्येक पृष्ठ इस समय समान दिखाई देगा। यह सुनिश्चित करने के लिए कुछ कदम उठाने होंगे कि उनकी अपनी सामग्री है; अपनी नई वेबसाइट को पूरा करने के लिए नीचे दिए गए चरणों का पालन करें।

  • पृष्ठ शीर्षक को प्रतिबिंबित करने के लिए प्रत्येक पृष्ठ पर सामग्री div तत्व आईडी बदलें
  • एक अलग पृष्ठभूमि छवि के साथ नए तत्व आईडी के लिए सीएसएस कोड जोड़ें
  • प्रत्येक पृष्ठ पर शीर्षक बदलें

चरण 10: अपने ब्राउज़र में वेबसाइट का परीक्षण करें

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

अब आपको बस अपनी वेबसाइट को होस्ट करने के लिए कहीं और चाहिए। AWS S3 के साथ एक स्थिर साइट की मेजबानी शुरू करने के लिए एक महान जगह है।

एचटीएमएल और सीएसएस कोड

<!डॉक्ट टाइप एचटीएमएल>
<एचटीएमएल>
<सिर>
<मेटा वर्णसेट ="यूटीएफ-8">
<!-- TemplateBeginसंपादन योग्य नाम="सिद्धांत" -->
<शीर्षक>शीर्षक विहीन दस्तावेज़</title>
<!-- TemplateEndEditable -->
<लिंक href="../पेज-css.css" रिले ="शैली पत्रक" प्रकार ="पाठ/सीएसएस">
</head>
<तन>
<हेडर क्लास ="मुख्य-शीर्षक">
<डिव क्लास ="साइट-लोगो">MakeUseOf उदाहरण साइट</div>
<नौसेना वर्ग ="मुख्य मेन्यू">
<एक href="../होम.एचटीएमएल">घर</एक><एक href="../Lion.html">शेर</एक><एक href="../Tiger.html">बाघ</एक><एक href="../जगुआर.html">एक प्रकार का जानवर</एक><एक href="../हाउस Cat.html">घर की बिल्ली</एक>
</nav>
</header>
<!-- TemplateBeginसंपादन योग्य नाम="मुख्य सामग्री क्षेत्र" -->
<डिव क्लास ="मुख्य सामग्री" आईडी ="सिंह">
<एच 1>हे शेर!</h1>
</div>
<!-- TemplateEndEditable -->
</body>
</html>

यह HTML हमारे प्रोजेक्ट के लिए तैयार वेबसाइट बनाता है। आप इसे अलग करके देख सकते हैं कि यह कैसे काम करता है, लेकिन हम आपको अपनी वेबसाइट के लिए अपना स्वयं का HTML बनाने के लिए प्रोत्साहित करते हैं।

@ अक्षरसेट "यूटीएफ-8";
तन {
 मार्जिन: 0;
 पृष्ठभूमि: काला;
 फ़ॉन्ट-परिवार: गोथम, "हेल्वेटिका नियू", हेल्वेटिका, एरियल, "सान्स सेरिफ़";
}
.मेन-हेडर {
 प्रदर्शन: फ्लेक्स;
 पृष्ठभूमि: काला;
 पैडिंग: 20px;
}
साइट-लोगो {
 चौड़ाई: 30%;
 रंग सफेद;
 फोंट की मोटाई: बोल्ड;
 पाठ-रूपांतरण: अपरकेस;
}
।मुख्य मेन्यू {
 चौड़ाई: 70%;
 टेक्स्ट-एलाइन: राइट;
}
।मुख्य मेन्यूएक {
 पैडिंग: 10px;
 पाठ-सजावट: कोई नहीं;
 रंग सफेद;
}
।मुख्य सामग्री {
 ऊंचाई: 100 वीएच;
 पैडिंग: 20px;
 पृष्ठभूमि-आकार: कवर;
}
।मुख्य सामग्रीएच 1 {
 रंग सफेद;
 फ़ॉन्ट-आकार: 10rem;
 पाठ-रूपांतरण: अपरकेस; 
}
#सिंह {
 पृष्ठभूमि-छवि: यूआरएल ("इमेज/लार्जेलियन.png");
}
#बाघ {
 पृष्ठभूमि-छवि: यूआरएल ("छवियां/tiger.png");
}
#एक प्रकार का जानवर {
 पृष्ठभूमि-छवि: यूआरएल ("छवियां/जगुआर.png");
}
#घर की बिल्ली {
 पृष्ठभूमि-छवि: यूआरएल ("इमेज/हाउसकैट.png");
}
#ऑलकैट्स {
 पृष्ठभूमि-छवि: यूआरएल ("छवियां/loadsofcats.png");
}

यह CSS भी तैयार प्रोजेक्ट का हिस्सा है। हमारे द्वारा कवर किए गए HTML की तरह, आप इस वेबसाइट को अपना बनाने के लिए इस कोड के साथ खेल सकते हैं।

Adobe Dreamweaver के साथ वेबसाइट बनाना

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