Google वेब डिज़ाइनर पर बैनर बनाना

Anonim

Google वेब डिज़ाइनर पर बैनर बनाना

चरण 1: शुरू करना

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

आधिकारिक साइट से Google वेब डिज़ाइनर डाउनलोड करें

कार्यक्रम स्थापना

  1. अब पृष्ठ पर जाने के लिए ऊपर दिए गए लिंक पर क्लिक करें और "वेब डिज़ाइनर डाउनलोड करें" बटन पर क्लिक करें। ध्यान दें कि कार्यक्रम केवल विंडोज 7 और बाद के संस्करणों का समर्थन करता है।
  2. आधिकारिक वेबसाइट से Google वेब डिज़ाइनर डाउनलोड करने के लिए जाएं

  3. सहेजें पॉप-अप विंडो के माध्यम से, अपने कंप्यूटर पर एक स्थान का चयन करें और नीचे पैनल पर चिह्नित बटन का उपयोग करें।
  4. कंप्यूटर पर Google वेब डिज़ाइनर को सहेजना

  5. फ़ाइल को केवल सहेजी गई फ़ाइल पर जाएं और उद्घाटन करने के लिए बाएं माउस बटन पर डबल क्लिक करें। नतीजतन, स्थापना खिड़की खोला जाना चाहिए।

    कंप्यूटर पर Google वेब डिज़ाइनर स्थापना फ़ाइल खोलना

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

  6. कंप्यूटर पर Google वेब डिज़ाइनर स्थापना प्रक्रिया

प्राधिकार

  1. यदि आप इंटरनेट पर या सामान्य रूप से परियोजनाओं को सहेजना चाहते हैं, तो विशेष रूप से Google की आंतरिक सेवाओं के लिए एक बैनर बनाएं, यह प्राधिकरण प्रदर्शन करने के अतिरिक्त है। ऐसा करने के लिए, उपयुक्त आइकन का उपयोग करके प्रोग्राम चलाएं, स्वागत विंडो बंद करें और शीर्ष पैनल पर "लॉगिन" बटन पर क्लिक करें।
  2. Google वेब डिज़ाइनर में प्राधिकरण में संक्रमण

  3. Google खाते से डेटा निर्दिष्ट करें, "अगला" पर क्लिक करें और यदि आवश्यक हो तो पुष्टि करें। उसके बाद, कुछ व्यक्तिगत सेटिंग्स की आवश्यकता के बिना खाता तुरंत जोड़ा जाएगा।
  4. Google वेब डिज़ाइनर में Google के माध्यम से प्राधिकरण प्रक्रिया

बदलती सेटिंग्स

  1. तैयारी के साथ समझने के बाद, भविष्य में काम को सुविधाजनक बनाने के लिए सॉफ्टवेयर की मूल सेटिंग्स में बदलाव करना वांछनीय है। शीर्ष पैनल का उपयोग करके, संपादन मेनू का विस्तार करें और सूची के अंत में "सेटिंग्स" का चयन करें।
  2. Google वेब डिज़ाइनर में सेटअप अनुभाग पर जाएं

  3. "मुख्य" टैब पर, आप परियोजनाओं को त्वरित रूप से खोलने के लिए प्रोग्राम के प्रारंभिक व्यवहार को बदल सकते हैं, बनाए गए टेम्पलेट्स को सहेजने के लिए एक फ़ोल्डर असाइन करें, साथ ही निर्माण के दौरान घोषणा के विनिर्देश के लिए डिफ़ॉल्ट मान सेट करें।
  4. Google वेब डिज़ाइनर में मुख्य सेटिंग्स बदलना

  5. निम्न पृष्ठ "लेआउट व्यू मोड" में संपादक के उपस्थिति पैरामीटर शामिल हैं। प्रस्तुत सेटिंग्स को बदलना, आप तत्वों की अधिक सटीक स्थिति के लिए ग्रिड और बाध्यकारी वस्तुओं को समायोजित कर सकते हैं।
  6. Google वेब डिज़ाइनर में सेटिंग्स मॉक व्यू मोड

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

  9. अंतिम टैब "विस्तारित" में केवल दो पैरामीटर होते हैं - "लॉगिंग" और "एप्लिकेशन स्केल"। पहले मामले में, समावेशन एक परिवर्तन लॉग तैयार करेगा, जबकि दूसरा आइटम आपको संपादक के कार्य क्षेत्र के लिए एक नया मानक पैमाने स्थापित करने की अनुमति देता है।

    सावधान रहे! यदि आप बहुत अधिक पैमाने पर सेट करते हैं, तो स्क्रीन पर अंतरिक्ष की कमी के साथ समस्याएं महत्वपूर्ण वस्तुओं के लिए दिखाई दे सकती हैं।

  10. Google वेब डिज़ाइनर में उन्नत सेटिंग्स देखें

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

चरण 2: एक बैनर बनाना

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

उपकरण के साथ काम करें

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

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

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

  7. टूलबार के बगल में कई योगदानों के साथ "उद्घोषक विज्ञापन" प्रस्तुत किया गया है। विशेष ध्यान एक या किसी अन्य बैनर ऑब्जेक्ट, और "सीएसएस" के साथ कार्रवाई के लिए ज़िम्मेदार "घटनाक्रम" के लायक है, जहां स्टाइल पैरामीटर सेट हैं।
  8. Google वेब डिज़ाइनर में विज्ञापन निरीक्षकों को देखें

  9. कार्यक्रम का सही हिस्सा भी ऐसे उपकरणों का एक सेट है जो आपको रंग, पाठ, वस्तुओं की संरचना, गुणों और बस परतों को नियंत्रित करने की अनुमति देता है। कार्यों के मुख्य सेट की तरह, एक परियोजना बनाने की प्रक्रिया में स्वतंत्र रूप से अध्ययन करने के लिए खिड़कियां बेहतर होती हैं।
  10. Google वेब डिज़ाइनर में ऑब्जेक्ट गुण देखें

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

एक लेआउट भरना

  1. एक बैनर बनाना हमेशा पृष्ठभूमि से शुरू होता है, और इसलिए, एक लेआउट तैयार करने के बाद, "गुण" टैब खोलें और पृष्ठ ब्लॉक में, "भरें" उपखंड का उपयोग करें। एक ढाल या पूरी तरह से पारदर्शी पृष्ठभूमि सहित किसी भी रंग को स्थापित करना काफी संभव है।
  2. Google वेब डिज़ाइनर में बैनर पृष्ठभूमि गुण कॉन्फ़िगर करें

  3. आगे की कतार में, पहले से तैयार ग्राफिक तत्व जोड़ें। आप नीचे पैनल पर "+" आइकन पर क्लिक करके ऑब्जेक्ट लाइब्रेरी टैब पर ऐसा कर सकते हैं।
  4. Google वेब डिज़ाइनर में ग्राफिक तत्वों को जोड़ने के लिए संक्रमण

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

  7. समायोजित करने के लिए, ऑब्जेक्ट लाइब्रेरी टैब पर वांछित छवि को क्लैंप करें और संपादक को मुख्य क्षेत्र में खींचें।

    Google वेब डिज़ाइनर पर एक बैनर में छवियां जोड़ना

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

  8. Google वेब डिज़ाइनर पर बैनर पर पोजिशनिंग छवियां

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

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

    Google वेब डिज़ाइनर पर बैनर में पाठ जोड़ना

    टेक्स्ट को नियंत्रित करने के लिए, "स्ट्रक्चरल एडिटर" टैब पर परत का चयन करें, "टेक्स्ट" का विस्तार करें और उचित पैरामीटर सेट करें।

  12. Google वेब डिज़ाइनर पर बैनर पर टेक्स्ट गुण बदलना

एनीमेशन सेट करना

  1. "टाइमलाइन" ब्लॉक में, आप एनीमेशन के प्रभाव को जोड़ और कॉन्फ़िगर कर सकते हैं। प्रारंभ करने के लिए, "+" आइकन के साथ "आइकन जोड़ें" बटन पर क्लिक करें।
  2. Google वेब डिज़ाइनर में एक समयरेखा के साथ काम करें

  3. फ्रेम के बीच ".5s" आइकन पर क्लिक करें और आवश्यक पैरामीटर सेट करें। उदाहरण के लिए, आप संक्रमण की अवधि और शैली बदल सकते हैं।
  4. Google वेब डिज़ाइनर में फ्रेम के बीच संक्रमण सेट अप करना

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

    Google वेब डिज़ाइनर पर बैनर के लिए एक एनीमेशन बनाना

    संपादन प्रक्रिया को पूरा करने के बाद, दोहराने बटन का उपयोग करें। यह एक अंतहीन एनीमेशन बनाएगा।

  6. Google वेब डिज़ाइनर में बैनर के लिए एनीमेशन सफल बनाना

घटनाओं को जोड़ना

  1. लेआउट के साथ समझने के बाद, आपको व्यक्तिगत तत्वों या पूरे बैनर के लिए संपूर्ण रूप से संक्रमण घटनाओं को जोड़ने की आवश्यकता है। ऐसा करने के लिए, सेक्टर इंस्पेक्टर कॉलम में, ईवेंट टैब खोलें और नीचे पैनल पर "+" आइकन पर क्लिक करें।
  2. Google वेब डिज़ाइनर में एक नई घटना बनाने के लिए जाएं

  3. "उद्देश्य" सूची से खुलने वाली विंडो में, एक ऑब्जेक्ट का चयन करें जिसे संदर्भित किया जाएगा।
  4. Google वेब डिज़ाइनर में उद्देश्यों को निर्दिष्ट करना

  5. ईवेंट पेज पर, "माउस" पृष्ठ का विस्तार करें और "क्लिक करें" का चयन करें। परिणाम के लिए आवश्यकताओं के आधार पर, आप विभिन्न प्रतिष्ठानों को जोड़ सकते हैं।
  6. Google वेब डिज़ाइनर में ईवेंट गुण निर्दिष्ट करना

  7. आगे "एक्शन" सूची से, Google घोषणा खोलें और "संक्रमण" मान सेट करें। इस तरह के एक विकल्प इसे बनाएगा ताकि उपयोगकर्ता इंटरनेट पर आवश्यक विशिष्ट पृष्ठ पर जा सके।
  8. Google वेब डिज़ाइनर में ईवेंट निर्दिष्ट करना

  9. एक "प्राप्तकर्ता" के रूप में, एक एकल "जीडब्ल्यूडी-एडी" संस्करण का चयन करें।
  10. Google वेब डिज़ाइनर में प्राप्तकर्ता घटनाओं को निर्दिष्ट करना

  11. मैदान में अंतिम चरण में "पहचान संकेतक »वांछित पृष्ठ को निर्दिष्ट करके शॉर्टकट के लिंक की जांच करें और" यूआरएल "भरें। बचाने के लिए "ओके" का उपयोग करें।
  12. Google वेब डिज़ाइनर में पूर्ण इवेंट सेटिंग्स

स्रोत कोड के साथ काम करें

  1. जैसा कि हमने उल्लेख किया है, Google वेब डिज़ाइनर में एक अंतर्निहित कोड संपादक होता है। इसे शीर्ष पैनल के दाईं ओर "कोड" बटन का उपयोग करके सक्षम किया जा सकता है।
  2. Google वेब डिज़ाइनर में कोड संपादक पर जाएं

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

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

चरण 3: पूर्णता

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

पूर्वावलोकन

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

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

  5. यदि आवश्यक हो, तो आप हमेशा अन्य लोगों के परिणाम का प्रदर्शन कर सकते हैं। ऐसा करने के लिए, "एक साझाकरण लिंक प्राप्त करें" का चयन करें और Google खाते तक पहुंच की पुष्टि करें।

    Google वेब डिज़ाइनर में बैनर देखने के लिए एक सामान्य एक्सेस लिंक बनाना

    नतीजतन, उपरोक्त वर्णित इस तरह के मोड में बैनर को देखने के लिए स्क्रीन पर एक लिंक दिखाई देगा। बेशक, यह संभव है यदि आपके पास खाता है।

  6. Google वेब डिज़ाइनर में बैनर देखने के लिए सामान्य पहुंच लिंक बनाने में सफल

संरक्षण और प्रकाशन

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

  3. आप प्रोग्राम के ऊपरी दाएं कोने में "प्रकाशित" मेनू खोलकर और सहेजने के स्थानों में से एक का चयन करके साइट पर रखने के लिए एक प्रोजेक्ट तैयार कर सकते हैं।
  4. Google वेब डिज़ाइनर में बैनर प्रकाशित करने की प्रक्रिया

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

    Google वेब डिज़ाइनर में बैनर के प्रकाशन को पूरा करना

    नतीजतन, फ़ोल्डर सहेजने की जगह में पाया जा सकता है। साइट पर बैनर की नियुक्ति साइट की निर्भरता में भिन्न होती है और सामान्य रूप से निर्माण प्रक्रिया से संबंधित नहीं होती है।

अधिक पढ़ें