गुगल वेब डिजाइनर मा एक ब्यानर सिर्जना गर्दै

Anonim

गुगल वेब डिजाइनर मा एक ब्यानर सिर्जना गर्दै

चरण 1: सुरू गर्दै

Google वेब डिजाइनरन्सीहरू वेब पृष्ठहरू सिर्जना गर्न को लागी एक नि: शुल्क विकास वातावरण हो, ब्यानलीहरु जस्ता व्यक्तिहरु जस्ता व्यक्तिगत सामानहरु सहित CSS3 र HTML5 प्रयोग गरेर व्यक्तिगत वस्तुहरू सहित व्यक्तिगत वस्तुहरू सहित। यो उपकरण प्रयोग गर्न, सबै भन्दा पहिले, तपाईंले आधिकारिक साइटबाट स्थापना फाइल डाउनलोड गर्न र स्थापना फाइल डाउनलोड गर्न आवश्यक छ।

आधिकारिक साइटबाट गुगल वेब डिजाइनर डाउनलोड गर्नुहोस्

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

  1. अब माथि क्लिक गर्नुहोस् अब माथि प्रस्तुत गरिएको पहिलो पृष्ठमा जानको लागि हेर्नुहोस् र "वेब डिजाइनर" बटन क्लिक गर्नुहोस्। नोट गर्नुहोस् कि कार्यक्रमले विन्डोज and र पछिका संस्कारहरूलाई समर्थन गर्दछ।
  2. आधिकारिक वेबसाइटबाट गुगल वेब डिजाइनर डाउनलोड गर्न जानुहोस्

  3. सेभ पप-अप विन्डो मार्फत, तपाईंको कम्प्युटरमा ठाउँ चयन गर्नुहोस् र तल प्यानलमा चिन्ह लगाइएको बटनमा प्रयोग गर्नुहोस्।
  4. कम्प्युटरमा गुगल वेब डिसेम्बररलाई बचत गर्दै

  5. भर्खरको फाईल बचत गरिएको साथ फोल्डरमा जानुहोस् र खोल्ने काम गर्न बायाँ माउस बटनमा डबल क्लिक गर्नुहोस्। नतिजा स्वरूप, स्थापना विन्डो खोलिनु पर्छ।

    कम्प्युटरमा गुगल वेब डिजाइनर स्थापना फाइल खोल्दै

    स्थापना प्रक्रिया आफै पूर्ण स्वचालित मोडमा गरिन्छ, सबै कार्यरत फाइलहरू डाइरेक्टरीमा प्रणाली डिस्कमा अन्य कार्यक्रमहरूको साथ बचत गर्दै डाइरेक्टरीमा बचत गर्दैछ।

  6. गुगल वेब डिजाइनर स्थापना प्रक्रिया कम्प्युटरमा

अधिकार दिने

  1. यदि तपाईं इन्टरनेटमा परियोजनाहरू बचत गर्न चाहनुहुन्छ वा सामान्य रूपमा गुगलको आन्तरिक सेवाहरूको लागि विशेष रूपमा ब्यानर सिर्जना गर्नुहोस्, यो थप रूपमा प्राधिकरण निर्माण गर्न लायक छ। यो गर्न, उपयुक्त आइकन प्रयोग गरेर कार्यक्रम चलाउनुहोस्, स्वागत गर्नुहोस् विन्डो बन्द गर्नुहोस् र शीर्ष प्यानलमा "लगइन" बटन क्लिक गर्नुहोस्।
  2. गुगल वेब डिजाईनरमा प्राधिकरणमा संक्रमण

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

सेटिंग्स परिवर्तन गर्दै

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

  3. "मुख्य" ट्याबमा, तपाईं प्रोग्रामको प्रारम्भिक व्यवहारलाई चाँडै खोल्न सक्नुहुनेछ, सिर्जना गरिएको टेम्पलेटहरू बचत गर्नको साथ, घोषणाको विशिष्टताका लागि पूर्वनिर्धारित मानहरू सेट गर्नुहोस्।
  4. गुगल वेब डिजाइनर मा मुख्य सेटिंग्स परिवर्तन गर्दै

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

  7. गुगल वेब डिजाइनरसँग यसको सेटिंग्सको साथ कोड सम्पादक छ। यसैले, "कोड दर्शक" ट्याबमा, तपाईं डिजाइन शैली निर्दिष्ट गर्न सक्नुहुनेछ, ढाँचा प्यारामिटरहरू सेट गर्नुहोस् र कार्यहरूमा कुञ्जी बाइन्डिहरू थप्न सक्नुहुन्छ।
  8. Google वेब डिजाइनर मा कोड हेर्न मोड सेटिंग्स

  9. अन्तिम ट्याब "विस्तारित" मात्र दुई प्यारामिटरहरू समावेश गर्दछ - "लगिंग" र "अनुप्रयोग मापन"। पहिलो घटनामा, समावेशीकरणले परिवर्तन लग सिर्जना गर्दछ, जबकि दोस्रो वस्तुले तपाईंलाई सम्पादकको कार्य क्षेत्रको लागि नयाँ मानक पैमाने सेट गर्दछ।

    होस् गर! यदि तपाईंले धेरै स्केल सेट गर्नुभयो भने स्क्रिनमा स्पेसको अभावका साथ समस्याहरू महत्त्वपूर्ण वस्तुहरूको लागि देखा पर्न सक्छन्।

  10. Google वेब डिजाइनर मा उन्नत सेटिंग्स हेर्नुहोस्

कुनै परिवर्तनले केहि तरिकाले बनायो वा अर्को प्रोग्रामको पुनः सुरु आवश्यक पर्दछ। यदि तपाईंले सम्पाचकी सम्पादकसँग काम गर्न सुरु गर्नुभयो भने, प्रत्येक ट्याबहरूमा छुट्टै वस्तु प्रयोग गरेर सेटिंग्स रिसेट गर्ने सम्भावनाको बारेमा नबिर्सनुहोस्।

चरण 2: एक ब्यानर सिर्जना गर्दै

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

उपकरणको साथ काम गर्नुहोस्

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

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

  5. मुख्य सम्पादक उपकरणहरू बायाँ स्तम्भमा प्रस्तुत गरिन्छ। हामी प्रत्येक विकल्पलाई विचार गर्ना गर्दैनौं, जबकि सिर्जना गर्दा सबै वस्तुहरू प्रयोग गर्दैनन्, जबकि हामी आफैंमा प्रयोग गर्न सक्छौं।
  6. Google वेब डिजाइनर डिजाइनर मा मुख्य उपकरणपट्टी हेर्नुहोस्

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

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

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

लेआउट भर्दै

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

  3. मल मा थप, अग्रिम तत्वहरु ग्राफिक तत्वहरु थप्नुहोस्। तपाईं तल प्यानलमा "+" आइकन क्लिक गरेर वस्तु पुस्तकालय ट्याबमा गर्न सक्नुहुन्छ।
  4. Google वेब डिजाइनर मा ग्राफिक तत्वहरूको थपको लागि संक्रमण

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

  7. आम्दानी गर्न, वस्तु पुस्तकालय ट्याबमा इच्छित छवि क्ल्याम्प र सम्पादकलाई मुख्य क्षेत्रमा तान्नुहोस्।

    Google वेब डिजाइनर मा एक ब्यानरमा छविहरू थप्दै

    तपाईं वस्तुको स्थान नियन्त्रण गर्न सक्नुहुनेछ सामान्य ड्र्याग र सक्रिय चयन उपकरणको साथ स्केलिंगको साथ। आवश्यक छ भने, तपाईं जहिले पनि गाइडहरू प्रयोग गर्न सक्नुहुन्छ।

  8. गुगल वेब डिजाइनर मा एक ब्यानरमा रेखाचित्र छविहरू

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

  11. यदि ब्यानर डिजाइनले पाठको उपस्थितिको लागि प्रबन्ध गर्दछ, तपाईं मानक गुगल वेब डिजाइनर उपकरण प्रयोग गरेर उपयुक्त आईटम थप्न सक्नुहुनेछ। बाँया फलकमा "t" आइकनमा क्लिक गर्नुहोस्, मुख्य सम्पादक विन्डोमा क्लिक गर्नुहोस् र क्यारेक्टरहरूको इच्छित सेट प्रविष्ट गर्नुहोस्।

    गुगल वेब डिजाईनरमा ब्यानरमा पाठ थप्दै

    पाठलाई नियन्त्रण गर्न, "संरचनागत सम्पादक" संरचना "विस्तार गर्नुहोस्," पाठ "विस्तार गर्नुहोस् र उपयुक्त प्यारामिटरहरू सेट गर्नुहोस्।

  12. Google वेब डिजाइनर मा ब्यानरमा पाठ गुणहरू परिवर्तन गर्दै

एनिमेसन सेट गर्दै

  1. "टाइमलाइन" ब्लकमा, तपाईं एनिमेसन को प्रभावहरू थप्न र कन्फिगर गर्न सक्नुहुन्छ। सुरु गर्न, "आइकन" आइकनसँग "+" आइकनको साथ "आइकन" बटन क्लिक गर्नुहोस्।
  2. Google वेब डिजाइनर डिजाइनर मा एक समयलाइन संग काम

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

  5. "समयरेखा" मा प्रत्येक व्यक्तिगत ब्लक अरूको स्वतन्त्र छ। एनिमेसनहरू सिर्जना गर्न, केहि वस्तुहरू तपाईंको विवेकमा परिवर्तन गर्नुहोस् र प्ले बटन प्रयोग गरेर परिणाम जाँच गर्नुहोस्।

    गुगल वेब डिजाईनरमा ब्यानरको लागि एनिमेसन सिर्जना गर्दै

    सम्पादन प्रक्रिया पूरा गरेपछि दोहोर्याउनुहोस् बटन प्रयोग गर्नुहोस्। यसले अन्तहीन एनिमेसन सिर्जना गर्दछ।

  6. Google वेब डिजाइनर मा ब्यानरको लागि एनिमेसन सिर्जना गर्न सफल सिर्जना सिर्जना

घटनाहरू थप्दै

  1. सजावटको साथ बुझ्नु, तपाईंले व्यक्तिगत तत्वहरू वा सम्पूर्ण ब्यानरका लागि ट्रान्जिसन घटनाहरू थप्न आवश्यक छ। यस कार्यको लागि, क्षेत्रको स्तम्भमा, कार्यक्रमहरू ट्याब खोल्नुहोस् र तल प्यानलमा "+" आइकनमा क्लिक गर्नुहोस्।
  2. गुगल वेब डिजाईनरमा नयाँ घटना सिर्जना गर्न जानुहोस्

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

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

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

  9. एक "प्राप्तकर्ता" को रूपमा, एक एकल "GWD-विज्ञापन" संस्करण चयन गर्नुहोस्।
  10. गुगल वेब डिजाइनरहरूमा प्रापक घटनाहरू निर्दिष्ट गर्दै

  11. फिल्डमा अन्तिम चरणमा "बहिष्कृत। सूचकहरू »सर्टकटलाई लिंक जाँच गर्नुहोस् र इच्छित पृष्ठ निर्दिष्ट गरेर" URL "भर्नुहोस्। बचत गर्न "ठीक छ" प्रयोग गर्नुहोस्।
  12. गुगल वेब डिजाइनरहरूमा पूरा घटना सेटिंग्स

स्रोत कोडको साथ काम गर्नुहोस्

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

  3. तपाईं ब्यानल संरचनामा परिवर्तन गर्न सक्नुहुन्छ अव्यवस्थित सम्पादक मात्र प्रयोग गरेर पनि परियोजना फाइलमा कोडसँग पनि काम गर्दै। यो सानो तत्वहरूको भीडलाई प ign ्केत गर्दै यो धेरै उपयोगी हुन सक्छ वा कार्यक्रम द्वारा प्रदान गरिएको छैन घटनाहरू थप्न।
  4. Google वेब डिजाइनर मा कोड हेर्नुहोस् र परिवर्तन गर्नुहोस्

वर्णन गरिएको कार्यहरू ब्यानर सिर्जना गर्न पर्याप्त मात्रामा हुनुपर्दछ, आवेदन बिना। एकै साथ तपाईले यी उपकरणहरू संयोजन गरेर उल्लेखनीय विस्तार गर्न सक्नुहुनेछ।

चरण :: सम्पन्न

जब ब्यानर पूरा भयो र साइटमा प्लेसमेन्टको लागि तयार छ, तपाईं अन्तिम चरणमा जान सक्नुहुन्छ। सर्वप्रथम, यो जाँच गर्न लायक छ कि कसरी वास्तविक वेब पृष्ठमा तपाईंको काम कस्तो देखिन्छ।

पुर्व अवलोकन

  1. शीर्ष प्यानलमा, अतिरिक्त मेनू खोल्न पूर्वावलोकन बटन क्लिक गर्नुहोस्। यहाँ तपाईले ब्यानर खोलिने ब्राउजर निर्दिष्ट गर्न सक्नुहुन्छ।
  2. गुगल वेब डिजाइनर मा पूर्वावलोकन ब्यानरमा जानुहोस्

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

  5. यदि आवश्यक छ भने, तपाईं अरू मानिसहरूलाई जहिले पनि परिणामहरू प्रदर्शन गर्न सक्नुहुन्छ। यो गर्न, "एक साझेदारी लिंक प्राप्त गर्नुहोस्" चयन गर्नुहोस् र गुगल खातामा पहुँच पुष्टि गर्नुहोस्।

    Google वेब डिजाइनर मा एक ब्यानर हेर्न एक सामान्य पहुँच लिंक सिर्जना गर्दै

    नतिजाको रूपमा, माथिको वर्णन गरिए अनुसार ब्यानरलाई हेर्नको लागि स्क्रिनमा एउटा लिंक देखा पर्नेछ। अवश्य पनि, यदि तपाईंसँग खाता छ भने यो सम्भव छ।

  6. Google वेब डिजाइनर मा एक ब्यानर हेर्न सफल सिर्जना सिर्जना

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

  1. प्रोजेक्ट बचत गर्न, पहिले फाईल मेनू खोल्नुहोस् र बचत विकल्प प्रयोग गर्नुहोस्। त्यस पछि, स्रोत फाइल कम्प्युटरमा बचत हुनेछ र पछि खोल्न सकिन्छ।
  2. Google वेब डिजाइनर मा ब्यानर संग प्रोजेक्ट संरक्षण प्रक्रिया

  3. तपाईं कार्यक्रमको माथिल्लो दाहिने कुनामा "प्रकाशित" मेनू खोल्नको लागि परियोजना तयार गर्न सक्नुहुन्छ र बचत गर्न मेनू खोल्दै।
  4. गुगल वेब डिजाइनर मा एक ब्यानर प्रकाशन को प्रक्रिया

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

    गुगल वेब डिजाइनर मा एक ब्यानरको प्रकाशन को प्रकाशन को प्रकाशन

    नतिजाको रूपमा, फोल्डर सेभ स्थानमा फेला पार्न सकिन्छ। साइटमा ब्यानरको प्लेस साइटको निर्भरतामा फरक छ र सर्वसाधारणको समयसँग सम्बन्धित छैन।

थप पढ्नुहोस्