ধাপ 1: শুরু করা
গুগল ওয়েব ডিজাইনার ওয়েবমাস্টারদের জন্য একটি মুক্ত উন্নয়ন পরিবেশ যা ওয়েব পৃষ্ঠাগুলি তৈরি করার ক্ষমতা সরবরাহ করে, CSS3 এবং HTML5 ব্যবহার করে ব্যানারগুলির মতো পৃথক আইটেম সহ। এই টুলটি ব্যবহার করতে, প্রথমত, আপনাকে সরকারী সাইট থেকে ইনস্টলেশান ফাইলটি ডাউনলোড করতে এবং ইনস্টল করতে হবে।সরকারী সাইট থেকে গুগল ওয়েব ডিজাইনার ডাউনলোড করুন
প্রোগ্রাম ইনস্টলেশন
- এখন পৃষ্ঠাতে যেতে উপরে দেওয়া লিঙ্কটিতে ক্লিক করুন এবং "ওয়েব ডিজাইনার ডাউনলোড করুন" বাটনে ক্লিক করুন। উল্লেখ্য যে প্রোগ্রামটি শুধুমাত্র উইন্ডোজ 7 এবং পরবর্তী সংস্করণ সমর্থন করে।
- সংরক্ষণ পপ-আপ উইন্ডোর মাধ্যমে, আপনার কম্পিউটারে একটি স্থান নির্বাচন করুন এবং নীচের প্যানেলে চিহ্নিত বোতামটি ব্যবহার করুন।
- ফোল্ডারে যান কেবল ফাইলটি সংরক্ষণ করুন এবং খোলার সঞ্চালনের জন্য বাম মাউস বোতামে ডাবল ক্লিক করুন। ফলস্বরূপ, ইনস্টলেশন উইন্ডোটি খুলতে হবে।
ইনস্টলেশন পদ্ধতিটি সম্পূর্ণরূপে স্বয়ংক্রিয় মোডে সঞ্চালিত হয়, সিস্টেম ডিস্কের অন্যান্য প্রোগ্রামগুলির সাথে সমস্ত কাজের ফাইলগুলি সংরক্ষণ করা হচ্ছে।
অনুমোদন
- আপনি যদি ইন্টারনেটে বা সাধারণভাবে প্রকল্পগুলি সংরক্ষণ করতে চান তবে বিশেষ করে Google এর অভ্যন্তরীণ পরিষেবাগুলির জন্য একটি ব্যানার তৈরি করুন, এটি অনুমোদন কার্যকর করার যোগ্য। এটি করার জন্য, যথাযথ আইকন ব্যবহার করে প্রোগ্রামটি চালানো, স্বাগতম উইন্ডোটি বন্ধ করুন এবং উপরের প্যানেলে "লগইন" বোতামে ক্লিক করুন।
- Google অ্যাকাউন্ট থেকে ডেটা উল্লেখ করুন, "পরবর্তী" এ ক্লিক করুন এবং প্রয়োজনে নিশ্চিত করুন। এর পরে, অ্যাকাউন্টটি অবিলম্বে যোগ করা হবে, কিছু পৃথক সেটিংস প্রয়োজন ছাড়াই।
পরিবর্তন সেটিংস
- প্রস্তুতির সাথে বোঝা যায়, ভবিষ্যতে কাজটি সহজতর করার জন্য সফটওয়্যারটির মৌলিক সেটিংসে পরিবর্তনগুলি এখনই পছন্দসই। শীর্ষ প্যানেল ব্যবহার করে, সম্পাদনা মেনুটি প্রসারিত করুন এবং তালিকার শেষে "সেটিংস" নির্বাচন করুন।
- "মুখ্য" ট্যাবে, আপনি প্রোগ্রামের প্রাথমিক আচরণটি দ্রুত প্রকল্পগুলি খুলতে পারেন, তৈরি টেমপ্লেটগুলি সংরক্ষণের জন্য একটি ফোল্ডার বরাদ্দ করুন এবং সেইসাথে ঘোষণার স্পেসিফিকেশনটির জন্য ডিফল্ট মানগুলি সেট করুন।
- নিম্নলিখিত পৃষ্ঠাটি "লেআউট ভিউ মোড" এডিটরের চেহারা প্যারামিটার রয়েছে। উপস্থাপিত সেটিংস পরিবর্তন করা, আপনি উপাদানগুলির আরো সঠিক অবস্থানের জন্য গ্রিড এবং বাঁধাই বস্তুগুলি সামঞ্জস্য করতে পারেন।
- গুগল ওয়েব ডিজাইনারের তার সেটিংসের সাথে একটি কোড সম্পাদক রয়েছে। সুতরাং, "কোড ভিউয়ার" ট্যাবে, আপনি নকশা শৈলীটি বরাদ্দ করতে পারেন, ফরম্যাটিং প্যারামিটার সেট করতে এবং কাজগুলিতে কী বাইন্ডিং যুক্ত করতে পারেন।
- শেষ ট্যাব "এক্সটেন্ডেড" রয়েছে শুধুমাত্র দুটি প্যারামিটার - "লগিং" এবং "অ্যাপ্লিকেশন স্কেল" রয়েছে। প্রথম ক্ষেত্রে, অন্তর্ভুক্তিটি একটি পরিবর্তন লগ তৈরি করবে, যখন দ্বিতীয় আইটেমটি আপনাকে সম্পাদকটির কাজের ক্ষেত্রের জন্য একটি নতুন মান স্কেল সেট করতে দেয়।
সাবধান হও! আপনি যদি খুব বেশি স্কেল সেট করেন তবে পর্দায় স্থানটির অভাবের সমস্যাগুলি গুরুত্বপূর্ণ আইটেমগুলির জন্য উপস্থিত হতে পারে।
কোন পরিবর্তন কিছু উপায় বা অন্যান্য প্রোগ্রাম একটি পুনঃসূচনা প্রয়োজন। আপনি যদি সম্পাদকের সাথে কাজ শুরু করেন তবে ট্যাব প্রতিটিতে একটি পৃথক আইটেম ব্যবহার করে সেটিংস রিসেট করার সম্ভাবনা সম্পর্কে ভুলবেন না।
পদক্ষেপ 2: একটি ব্যানার তৈরি
প্রোগ্রামটি কনফিগার করে, আপনি Google ওয়েব ডিজাইনারের জন্য সমস্ত বিকল্প ব্যবহার করে ব্যানারের উপর কাজ শুরু করতে পারেন। যাইহোক, আমাদের মনে রাখবেন যে এই প্রতিকারটি একচেটিয়াভাবে একটি চাক্ষুষ সম্পাদক হিসাবে, যা আপনাকে শুধুমাত্র তৈরি তৈরি করা উপাদানগুলি পোস্ট করার অনুমতি দেয় যা ফটোশপে।সরঞ্জাম সঙ্গে কাজ
- লেআউট প্রস্তুত করার পরে, আপনাকে সরঞ্জামগুলির সাথে পরিচিত হতে হবে। প্রধান মনোযোগের উপরের প্যানেলে, তালিকাটি "দেখুন" দাবী করে, যা সহায়তাকারী উপাদানগুলি সক্ষম এবং নিষ্ক্রিয় করার অনুমতি দেয়।
- "উইন্ডো" মেনু মাধ্যমে, আপনি সাময়িকভাবে একটি নির্দিষ্ট ইন্টারফেস উপাদান নিষ্ক্রিয় করতে পারেন। উদাহরণস্বরূপ, যদি আপনি একটি স্ট্যাটিক ব্যানার করতে চান তবে "টাইমলাইন" শুধুমাত্র হস্তক্ষেপ করবে এবং তাই উপযুক্ত টিকটি মুছে ফেলার জন্য এটি সর্বোত্তম।
- প্রধান সম্পাদক সরঞ্জাম বাম কলামে উপস্থাপন করা হয়। আমরা প্রতিটি বিকল্প বিবেচনা করব না, কারণ তৈরি করার সময় সমস্ত আইটেম ব্যবহার করা হয় না, তবে আমরা নিজেকে পরীক্ষা করার সুপারিশ করি।
- টুলবারের পাশে কয়েকটি অবদান নিয়ে "ঘোষক বিজ্ঞাপন" উপস্থাপন করা হয়। বিশেষ মনোযোগ একটি বা অন্য কোন ব্যানার অবজেক্টের সাথে "ইভেন্টগুলি" এর প্রাপ্য "ইভেন্টগুলি" এবং "সিএসএস", যেখানে স্টাইল প্যারামিটারগুলি সেট করা হয়।
- প্রোগ্রামটির সঠিক অংশটি এমন সরঞ্জামগুলির একটি সেট রয়েছে যা আপনাকে রঙ, পাঠ্য, বস্তু, বৈশিষ্ট্য এবং কেবল স্তরগুলির তৈরি করার অনুমতি দেয়। ফাংশনের প্রধান সেটের মতো, একটি প্রকল্প তৈরি করার পদ্ধতিতে উইন্ডোজ স্বাধীনভাবে পড়তে ভাল।
- যদি প্রয়োজন হয়, "টাইমলাইন" ব্যবহার করে একটি অ্যানিমেটেড ব্যানার তৈরি করা যেতে পারে। একই সাথে, সম্পাদকের প্রধান এলাকা পরিচালনা করার জন্য, একটি ক্ল্যাম্পিং স্পেস এবং এলসিএম, পাশাপাশি স্কেল পরামিতিগুলির সাথে একটি ব্লক ব্যবহার করুন।
একটি বিন্যাস পূরণ
- ব্যানার তৈরি করা সবসময় পটভূমি দিয়ে শুরু হয় এবং তাই, একটি লেআউট প্রস্তুত করার পরে, "বৈশিষ্ট্যাবলী" ট্যাবটি খুলুন এবং পৃষ্ঠাটিতে "পূরণ করুন" উপধারা ব্যবহার করুন। এটি একটি গ্রেডিয়েন্ট বা সম্পূর্ণরূপে স্বচ্ছ পটভূমি সহ কোনও রঙ ইনস্টল করা খুবই সম্ভব।
- সারিতে আরও, অগ্রিম প্রস্তুত গ্রাফিক উপাদান যোগ করুন। আপনি নীচের প্যানেলে "+" আইকনে ক্লিক করে বস্তুর লাইব্রেরী ট্যাবে এটি করতে পারেন।
- পছন্দসই গ্রাফিক ফাইল নির্বাচন করুন এবং খুলুন ক্লিক করুন। এই সমস্ত প্রয়োজনীয় স্তরগুলির জন্য একবারে উভয়ই করা যেতে পারে এবং আলাদাভাবে এই ক্রিয়াকলাপগুলি পুনরাবৃত্তি করে।
- মিটমাট করার জন্য, বস্তুর লাইব্রেরী ট্যাবে পছন্দসই চিত্রটি ক্ল্যাম্প করুন এবং প্রধান এলাকার সম্পাদককে টেনে আনুন।
আপনি একটি সক্রিয় নির্বাচন সরঞ্জাম দিয়ে স্বাভাবিক টেনে আনুন এবং স্কেলিংয়ের সাথে বস্তুর অবস্থানটি নিয়ন্ত্রণ করতে পারেন। যদি প্রয়োজন হয়, আপনি সর্বদা গাইড ব্যবহার করতে পারেন।
- ওয়ার্কস্পেসে বা কাঠামোগত সম্পাদক ট্যাবে একটি গ্রাফিক ফাইল নির্বাচন করে, "বৈশিষ্ট্যাবলী" খুলুন। পটভূমির ক্ষেত্রে তুলনায় আরো বেশি সম্ভাবনার চেয়ে বেশি সম্ভাবনার জন্য, উদাহরণস্বরূপ, সীমানা সেটিংস বা ইন্ডেন্ট।
- যদি ব্যানার ডিজাইনটি পাঠ্যের উপস্থিতি সরবরাহ করে তবে আপনি স্ট্যান্ডার্ড গুগল ওয়েব ডিজাইনার টুল ব্যবহার করে উপযুক্ত আইটেম যুক্ত করতে পারেন। বাম প্যানেলে "টি" আইকনে ক্লিক করুন, প্রধান সম্পাদক উইন্ডোতে ক্লিক করুন এবং অক্ষরের পছন্দসই সেটটি লিখুন।
পাঠ্যটি নিয়ন্ত্রণ করতে, "স্ট্রাকচারাল এডিটর" ট্যাবে লেয়ারটি নির্বাচন করুন, "পাঠ্য" প্রসারিত করুন এবং যথাযথ প্যারামিটার সেট করুন।
অ্যানিমেশন সেটিং
- "টাইমলাইন" ব্লকের মধ্যে, আপনি অ্যানিমেশনের প্রভাব যুক্ত এবং কনফিগার করতে পারেন। শুরু করতে, "+" আইকনের সাথে "আইকন যুক্ত করুন" বোতামটিতে ক্লিক করুন।
- ফ্রেমের মধ্যে ".5 এস" আইকনে ক্লিক করুন এবং আপনার প্রয়োজনীয় পরামিতি সেট করুন। উদাহরণস্বরূপ, আপনি ট্রানজিটের সময়কাল এবং শৈলী পরিবর্তন করতে পারেন।
- "টাইমলাইন" প্রতিটি পৃথক ব্লক অন্যদের সম্পূর্ণ স্বাধীন। অ্যানিমেশন তৈরি করতে, আপনার বিবেচনার জন্য কিছু আইটেম পরিবর্তন করুন এবং খেলার বোতামটি ব্যবহার করে ফলাফলটি পরীক্ষা করে দেখুন।
সম্পাদনা প্রক্রিয়া সম্পন্ন করার পরে, পুনরাবৃত্তি বোতামটি ব্যবহার করুন। এটি একটি অবিরাম অ্যানিমেশন তৈরি করবে।
ঘটনা যোগ করা হচ্ছে
- লেআউটের সাথে বোঝা থাকা, আপনাকে পৃথক উপাদানের জন্য বা সমগ্র ব্যানারটির জন্য রূপান্তর ঘটনাগুলি যুক্ত করতে হবে। এটি করার জন্য, সেক্টর ইন্সপেক্টর কলামে, ইভেন্ট ট্যাবটি খুলুন এবং নীচে প্যানেলে "+" আইকনে ক্লিক করুন।
- "উদ্দেশ্য" তালিকা থেকে খোলা উইন্ডোতে, একটি বস্তু নির্বাচন করুন যা উল্লেখ করা হবে।
- ইভেন্ট পৃষ্ঠায়, "মাউস" পৃষ্ঠাটি প্রসারিত করুন এবং "ক্লিক করুন" নির্বাচন করুন। ফলাফলের প্রয়োজনীয়তাগুলির উপর নির্ভর করে, আপনি বিভিন্ন ইনস্টলেশনের একত্রিত করতে পারেন।
- "অ্যাকশন" তালিকা থেকে আরও, Google ঘোষণাটি খুলুন এবং "রূপান্তর" মানটি সেট করুন। যেমন একটি পছন্দ এটি তৈরি করা হবে যাতে ব্যবহারকারী ইন্টারনেটে আপনার প্রয়োজনীয় নির্দিষ্ট পৃষ্ঠায় যায়।
- একটি "প্রাপক" হিসাবে, একটি একক "GWD-AD" সংস্করণটি নির্বাচন করুন।
- ক্ষেত্রের শেষ পর্যায়ে "আইডেন্টিফ। সূচক »শর্টকাটের লিঙ্কটি চেক করুন এবং পছন্দসই পৃষ্ঠাটি নির্দিষ্ট করে" URL "পূরণ করুন। সংরক্ষণ করার জন্য "ঠিক আছে" ব্যবহার করুন।
সোর্স কোড সঙ্গে কাজ
- আমরা উল্লেখ করেছি, গুগল ওয়েব ডিজাইনার একটি অন্তর্নির্মিত কোড সম্পাদক রয়েছে। এটি উপরের প্যানেলের ডান পাশে "কোড" বোতামটি ব্যবহার করে সক্ষম করা যেতে পারে।
- আপনি কেবলমাত্র ভিজ্যুয়াল এডিটর ব্যবহার করে ব্যানার কাঠামোর পরিবর্তন করতে পারেন, তবে সরাসরি প্রকল্প ফাইলের কোডের সাথে সরাসরি কাজ করতে পারেন। ছোট উপাদানগুলির একটি সংলগ্ন বা প্রোগ্রাম দ্বারা সরবরাহিত ইভেন্টগুলি যোগ করার সময় এটি খুব দরকারী হতে পারে।
বর্ণিত পদক্ষেপগুলি ব্যানার তৈরি করার জন্য, অ্যাপ্লিকেশনটি নির্বিশেষে একটি ব্যানার তৈরি করতে যথেষ্ট হওয়া উচিত। একই সময়ে, আপনি এই সরঞ্জামগুলিকে মিশ্রিত করে ক্ষমতাগুলি উল্লেখযোগ্যভাবে প্রসারিত করতে পারেন।
ধাপ 3: সমাপ্তি
যখন ব্যানার সম্পন্ন হয় এবং সাইটে বসানো জন্য প্রস্তুত হয়, আপনি শেষ ধাপে যেতে পারেন। সর্বোপরি, এটি বাস্তব ওয়েব পৃষ্ঠাতে আপনার কাজটি কীভাবে দেখছে তা পরীক্ষা করা মূল্য।পূর্বরূপ
- উপরের প্যানেলে, অতিরিক্ত মেনু খুলতে পূর্বরূপ বাটনে ক্লিক করুন। এখানে আপনি ব্রাউজারটি নির্দিষ্ট করতে পারেন যার সাথে ব্যানার খোলা হবে।
- সমস্ত ফাংশন খোলার সময় এবং ব্যানার চেহারা সংরক্ষণ করা হয়, কিন্তু কিছু বৈশিষ্ট্য সঙ্গে। উদাহরণস্বরূপ, আপনি যদি অ্যানিমেশনের একটি অসীম পুনরাবৃত্তি ইনস্টল করেন তবে সবকিছুই কেবল একটি পুনরাবৃত্তি এখানে সীমাবদ্ধ থাকবে।
- যদি প্রয়োজন হয়, আপনি সবসময় অন্যান্য মানুষের ফলাফল প্রদর্শন করতে পারেন। এটি করার জন্য, "একটি শেয়ারিং লিঙ্ক পান" নির্বাচন করুন এবং Google অ্যাকাউন্টে অ্যাক্সেস নিশ্চিত করুন।
ফলস্বরূপ, উপরে বর্ণিত হিসাবে একটি মোডে ব্যানার দেখতে স্ক্রীনে একটি লিঙ্ক প্রদর্শিত হবে। অবশ্যই, যদি আপনার অ্যাকাউন্ট থাকে তবে এটি সম্ভব।
সংরক্ষণ ও প্রকাশনা
- প্রকল্পটি সংরক্ষণ করতে প্রথমে ফাইল মেনু খুলুন এবং সংরক্ষণ বিকল্পটি ব্যবহার করুন। তারপরে, সোর্স ফাইলটি কম্পিউটারে সংরক্ষিত হবে এবং পরবর্তীতে খোলা যাবে।
- আপনি প্রোগ্রামের উপরের ডানদিকে অবস্থিত "প্রকাশ" মেনু খোলার মাধ্যমে সাইটটিতে একটি প্রকল্পটি প্রস্তুত করতে পারেন এবং সংরক্ষণের অবস্থানের একটি নির্বাচন করে।
- আপনার বিবেচনার ভিত্তিতে প্রকাশনার উইন্ডোতে পরামিতিগুলি পরিবর্তন করুন, শুধুমাত্র পছন্দসই চেকবক্সগুলি রেখে এবং "প্রকাশ করুন" ক্লিক করুন। এইভাবে সংরক্ষণ করে প্রকল্পটির আকার নির্বিশেষে দ্রুত ঘটে।
ফলস্বরূপ, ফোল্ডারটি সংরক্ষণের জায়গায় পাওয়া যাবে। সাইটে ব্যানার বসানো সাইটটির নির্ভরতা থেকে পৃথক এবং সাধারণভাবে সৃষ্টি পদ্ধতির অন্তর্গত নয়।
