HTML জ্ঞান ছাড়াই একটি সাইট তৈরি করবেন? সুন্দর টেমপ্লেটগুলির কারণে প্রায়শই ওয়েবসাইট তৈরির জন্য অনলাইন সম্পাদকরা স্থল অর্জন করছে। আপনি যদি এই জাতীয় তৈরি ডিজাইন থেকে শুরু না করতে পছন্দ করেন, যা প্রায়শই অর্থপ্রদানের বিকল্পে শেষ হয়, তবে রকেটকেক একটি ডেস্কটপ প্রোগ্রাম যার সাহায্যে আপনি কিছুই থেকে একটি সুন্দর সাইট তৈরি করতে পারেন।
ইংরেজি ভাষার প্রোগ্রামে অনুপ্রেরণার জন্য মাত্র পনেরটি টেমপ্লেট (টেমপ্লেট) রয়েছে। ধারণাটি হল যে রকেটকেক দিয়ে আপনি নিজের সাইট তৈরি করেন যা আপনি সহজেই পরে আপডেট করতে পারেন। RocketCake একটি তথাকথিত WYSIWYG সম্পাদক। তাই আপনাকে কোনো HTML কোড টাইপ করতে হবে না। আপনি কাজের পৃষ্ঠে উপাদান স্থাপন করে এবং তারপর কেস আপলোড করে আপনার নিজের সাইটকে একত্রিত করেন। উপাদানগুলির মধ্যে পাঠ্য বাক্স, বোতাম, ছবি, মেনু, স্লাইডশো, চলচ্চিত্র, অডিও ক্লিপ এবং আরও অনেক কিছু অন্তর্ভুক্ত রয়েছে। রকেটকেকে যা বিশেষ করে তোলে তা হল এটি তথাকথিত প্রতিক্রিয়াশীল ওয়েবসাইট তৈরি করার জন্য একটি সম্পাদক। এই ধরনের একটি প্রতিক্রিয়াশীল ওয়েবসাইট মোবাইল-বন্ধুত্বপূর্ণ, কারণ বিন্যাসটি ডিভাইসের স্ক্রিনের সাথে খাপ খায় যা দিয়ে কেউ সাইটটি পরিদর্শন করে।
একটি প্রতিক্রিয়াশীল ওয়েব পৃষ্ঠা এখনও ঝরঝরে দেখাবে, আপনি এটি একটি বড় মনিটর বা একটি ছোট স্মার্টফোনের স্ক্রিনে দেখুন। এর জন্য, ওয়েবসাইটটি বেশ কয়েকটি অংশ সামঞ্জস্য করবে, যেমন ফন্টের আকার, নির্দিষ্ট উপাদানগুলির বিন্যাস এবং স্ক্রিনে মেনু দেখানোর উপায়।
এখানে রকেটকেক ডাউনলোড করুন। উইন্ডোজের জন্য একটি সংস্করণ এবং একটি macOS এর জন্য রয়েছে। এই কর্মশালায় আমরা বিনামূল্যে সংস্করণ ব্যবহার করি। এটি একটি মসৃণভাবে কার্যকরী প্রতিক্রিয়াশীল ওয়েবসাইট তৈরি করা সহজ করে তোলে। রকেটকেকের একটি পেশাদার সংস্করণও রয়েছে, যার দাম 39 ইউরো। পেশাদার সংস্করণ আপনাকে সীমাহীন সংখ্যক ওয়েবসাইট তৈরি করতে দেয়। এছাড়াও CSS সমর্থন রয়েছে, যার সাহায্যে আপনি একটি সম্পূর্ণ সাইট জুড়ে লেআউট শৈলী দ্রুত সামঞ্জস্য করতে পারেন। RocketCake এর সংস্করণ 3.1 উন্নত করা হয়েছে যাতে Google এবং অন্যান্য সার্চ ইঞ্জিনের সাথে আপনার ওয়েবসাইটটি আরও ভালো হয়। তদুপরি, বিনামূল্যের সংস্করণে কয়েকটি বৈশিষ্ট্য রয়েছে যা আগে শুধুমাত্র অর্থপ্রদত্ত সংস্করণে ছিল।
কাজের পরিবেশ এবং প্রদর্শন
ওয়ার্কস্পেসের শীর্ষে একটি নতুন পৃষ্ঠা যুক্ত করার জন্য, ইন্টারনেট এক্সপ্লোরারের সাথে পূর্বরূপ দেখতে এবং ইন্টারনেটে ওয়েবসাইট প্রকাশ করার জন্য বোতাম সহ বার রয়েছে৷ ডানদিকে আপনি পাবেন টুলসেট সমস্ত উপাদান দিয়ে আপনি একটি ওয়েব পৃষ্ঠাতে রাখতে পারেন। উপরের বাম দিকে আপনি আপনার ওয়েবসাইটের সমস্ত পৃষ্ঠার গঠন দেখতে পাচ্ছেন।
নিচে দেওয়া হল বৈশিষ্ট্য. এখানে আপনি আপনার নির্বাচিত প্রতিটি উপাদানের বৈশিষ্ট্য পরিবর্তন করুন। ধরুন আপনি একটি পৃষ্ঠায় একটি চিত্র যুক্ত করতে চান, তারপর আপনি বৈশিষ্ট্যগুলিতে চিত্র ফাইলটি নির্বাচন করুন এবং চিত্রটির বৃত্তাকার বা তীক্ষ্ণ কোণ থাকা উচিত কিনা এবং আরও কিছু নির্দেশ করুন...
খুব নীচে আপনি প্রদর্শনের প্রস্থ নির্ধারণ করুন। ডিফল্টরূপে, যে ডেস্কটপ- প্রদর্শন। নীচের বাম দিকের ছোট ড্রপ-ডাউন মেনুর মাধ্যমে আপনি আইফোন, আইপ্যাড, স্যামসাং গ্যালাক্সি, এলজির মতো বেশ কয়েকটি জনপ্রিয় মোবাইল ডিভাইসের ডিসপ্লেতেও কাজ করতে পারেন... যদি আপনি এতে পছন্দসই প্রস্থ খুঁজে না পান মেনুতে, আপনি কাস্টম নির্বাচন করতে পারেন এবং স্লাইডার ব্যবহার করে স্ক্রিনে প্রদর্শিত প্রস্থ উল্লেখ করতে পারেন। ব্রেকপয়েন্ট নির্ধারণের জন্য সেই প্রস্থ সেটিং গুরুত্বপূর্ণ, যা আমরা পরে আলোচনা করব।
রং এবং হোমপেজ
চলুন শুরু করা যাক হোম পেজ দিয়ে। এই উদাহরণে, আমরা একটি উচ্চাভিলাষী রক ব্যান্ডের ওয়েবসাইট তৈরি করছি। একটি টেমপ্লেট দিয়ে শুরু করার পরিবর্তে বেছে নিন খালি পাতা. বৈশিষ্ট্য বিভাগটি আপনার নির্বাচন করা প্রতিটি উপাদানের সাথে খাপ খাইয়ে নেবে। উদাহরণস্বরূপ, প্রথম পৃষ্ঠার পটভূমিতে ক্লিক করুন, তারপর আপনি অ্যাক্সেস করতে পারেন পেছনের রঙ একটি পটভূমি রঙ নির্বাচন করুন। ডিফল্টরূপে 000000 আছে, সাদার জন্য html কোড। তিনটি বিন্দু সহ বাক্সে ক্লিক করে আপনি রঙ চয়নকারীটি আনেন। বৈশিষ্ট্যগুলিতে আপনি এই ওয়েবপৃষ্ঠাটিকে একটি শিরোনাম দেন৷ এটি শীঘ্রই ব্রাউজার উইন্ডোর শীর্ষে প্রদর্শিত হবে। index.html এ হোমপেজের নাম ছেড়ে দিন। একটি ব্রাউজার সর্বদা হোমপেজ হিসাবে প্রদর্শনের জন্য সূচী পৃষ্ঠাটি সন্ধান করে।
এর নিচে আপনি চার ধরনের হাইপারলিঙ্কের রং নির্ধারণ করেন। LinkColor লিঙ্কগুলির রঙ নির্ধারণ করে যেগুলি এখনও পরিদর্শন করা হয়নি, LinkColorActive কেউ বর্তমানে পরিদর্শন করছে এমন লিঙ্কগুলিকে বোঝায়, LinkColorHover মাউস পয়েন্টার নির্দেশ করছে একটি লিঙ্কের রঙ এবং LinkColor পরিদর্শন করা হয়েছে কেউ ইতিমধ্যে পরিদর্শন করেছে এমন লিঙ্কগুলিকে বোঝায়।
নেভিগেশন বার এবং ভূমিকা ইমেজ
একটি নেভিগেশন বার স্থাপন করতে, টুলসেটে আইটেমটি নির্বাচন করুন ন্যাভিগেশন মেনু এবং তারপর কর্মক্ষেত্রে ক্লিক করুন। এই নেভিগেশন বারে আপনি মেনু আইটেম টাইপ করুন যার জন্য আপনি ওয়েব পেজ তৈরি করতে চান। সেই আইটেমগুলির নাম ছোট রাখুন। আমাদের উদাহরণে এগুলি হল ব্যান্ড, কে, কোথায়, কখন, কেন এবং মিডিয়া। উপরের দিকে সেই নেভিগেশন আইটেমগুলির পাঠ্য বিন্যাস করার জন্য বোতাম রয়েছে৷ আপনি যদি নেভিগেশন বারে ক্লিক করেন তবে আপনি বৈশিষ্ট্যগুলিতে বারটির রঙ এবং আকৃতি সামঞ্জস্য করবেন। আপনি কিভাবে পারেন ব্যাকগ্রাউন্ডফ্যাশন জন্য চয়ন করুন রঙ, চিত্র, গ্রেডিয়েন্ট এবং শৈলীযুক্ত বোতাম. গ্রেডিয়েন্টে আপনি রূপান্তরের রঙের টোন নির্ধারণ করেন এবং স্টাইল করা বোতামে মেনু বারটি একটি গোলাকার চেহারা পায়।
আমরা একটি ব্যানার বা ইন্ট্রো ইমেজ যোগ করতে চাই। তার জন্য আপনি প্রথমে আইটেমটি রাখুন ধারক. এ প্রপার্টিজ এ ছবির নামআপনি আগে তৈরি করা ছবি নির্বাচন করতে তিনটি বিন্দুতে ক্লিক করুন। যদি এটি খুব বড় হয়, রকেটকেক জিজ্ঞাসা করে যে এটি চিত্রটির আকার পরিবর্তন করতে পারে কিনা। ঠিক আছে. আপনি এই নিবন্ধের শীর্ষে ব্যানারে যে শিরোনামটি 'ম্যাড ডগ' দেখতে পাচ্ছেন, আমরা নিজেরাই অন্য একটি প্রোগ্রামের সাথে চিত্রটিতে যুক্ত করেছি। মূলত আপনি আইটেমটির সাথে টেক্সটও করতে পারেন ভাসমান পাঠ্য একটি ছবির উপরে রাখুন। দুর্ভাগ্যবশত, এটি মোবাইল ডিভাইসে একটি অপ্রত্যাশিত ফলাফল দেয়।
আপনি সন্তুষ্ট হলে, হার্ড ডিস্কের কোথাও একটি .rcd ফাইল হিসাবে কাজ করা ফাইলটি সংরক্ষণ করুন।
কলাম
ব্যানারের নীচে আপনি এক, দুই বা তিনটি কলামে বিষয়বস্তু সহ হোম পেজ সরবরাহ করতে চান। এটি করার জন্য, টুলসেটে আইটেমটি নির্বাচন করুন কলাম সহ ধারক. RocketCake জিজ্ঞাসা করে আপনি কতটি কলাম চান। অ্যাপ্লিকেশনটি একটি কলামের সর্বনিম্ন প্রস্থও জানতে চায়। এখানে আমরা দুটি কলাম বেছে নিলাম এবং ডিফল্ট সেটিং হল 150। এর মানে হল যে কলামগুলি একটি প্রশস্ত স্ক্রিনে একে অপরের পাশে সুন্দরভাবে দেখা যাবে। যদি একটি ছোট স্ক্রিনে একটি কলাম 150 পিক্সেলের চেয়ে ছোট হয়ে যায় তবে এটি আর আগের কলামের পাশে নয়, তবে নীচে প্রদর্শিত হবে৷
এই উদাহরণে আমরা বাম কলাম সেট করেছি সর্বনিম্ন প্রস্থ 500. 500 হল বাম কলামের ব্রেকপয়েন্ট। যদি পর্দার প্রস্থ খুব ছোট হয়ে যায়, তাহলে দর্শক বাম কলামের নীচে ডান কলামের বিষয়বস্তু পড়বে। উপরন্তু, আমরা ব্যানার সেট সর্বোচ্চ প্রস্থ 1000.
ডান কলামটি বাম থেকে সরু করতে, প্রথমে বাম কলামে ক্লিক করুন। দ্য আকার ডিফল্টরূপে আছে 50%, গাড়ি. উদাহরণস্বরূপ, এটি পরিবর্তন করুন 70%, গাড়ি. এর ফলে দ্বিতীয় কলাম সাময়িকভাবে প্রথমটির নিচে ভাসতে থাকে। আপনি যখন দ্বিতীয় কলামে এবং সাইজে ক্লিক করেন তখন আপনি এটি সমাধান করতে পারেন 30%, গাড়ি পূরণ করে এটি আপনাকে একটি 70/30 অনুপাত দেবে। তারপরে আপনি পাঠ্য দিয়ে কলামগুলি পূরণ করুন, যা আপনি একটি ওয়ার্ড প্রসেসরের মতো ডিজাইন করেন। এরকম একটি কলামে আপনিও করতে পারেন শিরোনাম (কাপ). শিরোনাম 1, 2, 3 কাপগুলিকে সুন্দর দেখায়।
একটি ছবি যোগ করতে, পাঠ্যের মধ্যে কার্সার রাখুন এবং টুলসেট অন ক্লিক করুন ছবি. তারপরে যেখানে ছবিটি অপেক্ষা করছে সেখানে নেভিগেট করুন। বার বার বোতামে ক্লিক করুন পূর্বরূপ ব্রাউজারে আপনার কাজ দেখতে।
আপনি যদি এমন একটি টেক্সট কলামে ক্লিক করেন, আপনি বৈশিষ্ট্যগুলিতে দেখতে পাবেন যে প্যাডিং ডিফল্ট 10, 10, 10, 10 এ সেট করা হয়েছে। প্যাডিং হল পাঠ্য থেকে কলামের সীমানার দূরত্ব। প্রথম সংখ্যাটি শীর্ষে, দ্বিতীয়টি নীচে, তৃতীয়টি ডানে এবং চতুর্থটি বাম দিকে সঞ্চয় করে৷ আপনি যদি একটি টেক্সট বাক্সে ডান দিকে আরও কিছু প্যাডিং চান, তাহলে আপনার তৃতীয় মান 20 সেট করা উচিত, উদাহরণস্বরূপ।
তাই প্যাডিং হল একটি বাক্সের ভিতরের দূরত্ব, মার্জিন বাইরের দূরত্ব। আপনি যদি ছবির নীচে এবং নীচের লেখার উপরের অংশের মধ্যে আরও জায়গা চান তবে মার্জিন 0, 0, 0, 0 থেকে পরিবর্তন করুন, উদাহরণস্বরূপ, 0.10, 0, 0৷
অতিরিক্ত পৃষ্ঠা
এখন যেহেতু হোমপেজ প্রস্তুত, আপনি অবশ্যই আপনার প্রকল্পের জন্য আরও পৃষ্ঠা তৈরি করতে চাইবেন। যে বোতাম সঙ্গে যায় পাতা যোগ কর. প্রোগ্রামটি জিজ্ঞাসা করে যে আপনি একটি সম্পূর্ণ নতুন পৃষ্ঠা বা ইতিমধ্যে বিদ্যমান ওয়েব পৃষ্ঠার একটি অনুলিপি তৈরি করতে চান কিনা। এই উদাহরণে আমরা আমাদের হোমপেজের স্টাইল ব্যবহার করব: কালো ব্যাকগ্রাউন্ড, ফন্ট, ফন্ট সাইজ, কন্টেইনারের প্রস্থ... তাই আমরা দ্বিতীয় বিকল্পে যাই। তারপরে আমরা ব্যানারটি সরিয়ে ফেলি এবং পাঠ্য পাত্রের বিষয়বস্তু পরিবর্তন করি।
আপনি যদি প্রতিটি পৃষ্ঠার নীচে একটি ফুটার চান তবে সেখানেও একটি ফুটার যুক্ত করুন৷ ধারক বা কলাম সহ ধারক এবং টাইপ করুন, উদাহরণস্বরূপ, যোগাযোগের তথ্য বা কপিরাইট তথ্য। বিশেষ অক্ষর যেমন কপিরাইট চিহ্ন সরাসরি কীবোর্ড থেকে প্রবেশ করা যাবে না। রকেটকেকে আপনি মেনুর মাধ্যমে এই জাতীয় বিশেষ অক্ষর চয়ন করেন সন্নিবেশ করুন, পাঠ্য চিহ্ন সন্নিবেশ করুন.
লিঙ্ক
অবশ্যই আপনি নেভিগেশন মেনুতে বোতামগুলি সঠিক পৃষ্ঠাগুলিতে নির্দেশ করতে চান৷ এটি করার জন্য, প্রথমে নেভিগেশন মেনুতে বোতামটি নির্বাচন করুন এবং তারপরে চেইন সহ বোতামটিতে ক্লিক করুন। অথবা আপনি ডান ক্লিক করুন এবং নির্বাচন করুন হাইপারলিঙ্ক ঢোকান. এটি একটি নির্বাচন বাক্স খোলে যেখানে আপনাকে একটি বহিরাগত ওয়েব পৃষ্ঠা, একটি ই-মেইল ঠিকানা, এই প্রকল্পের একটি পৃষ্ঠা বা একটি নির্দিষ্ট ফাইলের সাথে লিঙ্ক করার মধ্যে নির্বাচন করতে হবে৷ বিকল্পটি নির্বাচন করুন প্রকল্পের পাতা. তারপরে আপনি তৈরি করা ওয়েব পৃষ্ঠাগুলির একটি তালিকা দেখতে পাবেন যেখানে আপনি সঠিকটি নির্বাচন করেছেন।
মৌমাছি টার্গেট একটি নতুন ব্রাউজার উইন্ডোতে বা খোলা ব্রাউজার উইন্ডোতে ওয়েব পৃষ্ঠা খুলতে বেছে নিন। এই শেষ বিকল্পটি সাধারণ। আপনি যদি নেভিগেশন মেনু থেকে একটি বোতামের দিকে নির্দেশ করার সময় বাম মাউস বোতামটি চেপে ধরে থাকেন, তাহলে আপনি সাবমেনু যোগ করেন যা একইভাবে বিদ্যমান ওয়েব পৃষ্ঠাগুলিকে উল্লেখ করে।
মাস্টার পেজ
RocketCake তথাকথিত মাস্টার পৃষ্ঠাগুলির সাথেও কাজ করে। আপনি যদি অনেকগুলি পৃষ্ঠা সহ একটি ওয়েবসাইট তৈরি করেন তবে এই কৌশলটি ফর্ম্যাটিংকে উল্লেখযোগ্যভাবে গতি দেবে। একটি মাস্টার পৃষ্ঠা হল একটি ফর্ম্যাট করা মডেল যা অন্যান্য পৃষ্ঠাগুলির জন্য একটি টেমপ্লেট হিসাবে কাজ করে। এই ধরনের একটি মাস্টার পেজ তাই নিয়মিত ওয়েব পেজ নয়। কিভাবে একটি তৈরি করতে হয় তা এখানে: একটি নতুন ওয়েব পৃষ্ঠা তৈরি করুন, ড্রপ-ডাউন মেনু রাখুন, নিশ্চিত করুন যে মেনুটি যেমনটি করা উচিত তেমন কাজ করে এবং এই পৃষ্ঠাটি কোন বাস্তব পাঠ্য সামগ্রী ছাড়াই ফর্ম্যাট করুন৷ তারপর আপনি টুলসেট থেকে একটি যোগ করুন বিষয়বস্তু স্থানধারক আপ এই উপাদান ছাড়া, মাস্টার পৃষ্ঠা কাজ করবে না. এই বিশেষ পৃষ্ঠাটিকে একটি অর্থপূর্ণ নাম দিন, উদাহরণস্বরূপ masterpage.html. তারপরে আপনি এক বা একাধিক ওয়েব পৃষ্ঠা তৈরি করেন যেগুলি আপনি লেআউট প্রদান করেন না।
আপনি পাঠ্য টাইপ করুন, প্রয়োজনে একটি চিত্র যুক্ত করুন এবং এই পৃষ্ঠাটি সংরক্ষণ করুন। বিষয়বস্তু সহ এই পৃষ্ঠাগুলিতে, নীচের ক্ষেত্রের বৈশিষ্ট্যগুলি দেখুন৷ মাস্টার পেজ. সেখানে আপনি বিকল্পটি সক্রিয় করুন মাস্টারপেজ ব্যবহার করুন. আপনি যদি বাক্সে টিক চিহ্ন দিয়ে থাকেন, তাহলে একটি নতুন বক্স আসবে যেখানে আপনি উদ্দেশ্যপ্রণোদিত মাস্টার পৃষ্ঠার নাম নির্বাচন করবেন। আপনি একাধিক মাস্টার পৃষ্ঠা ব্যবহার করতে পারেন. এই মুহুর্তে আপনি এখনও কিছু দেখতে পাচ্ছেন না, তবে যদি আপনি বোতামটি ক্লিক করেন পূর্বরূপ ক্লিক করুন, আপনি লক্ষ্য করবেন যে এই পৃষ্ঠার বিষয়বস্তুটি নির্বাচিত মাস্টার পৃষ্ঠার সামগ্রী প্লেসহোল্ডারে সুন্দরভাবে প্রকাশিত হয়েছে।
মিডিয়া ঢোকান
RocketCake এর মাধ্যমে আপনি টুলসেটে আইটেমটি নির্বাচন করে YouTube ভিডিও যোগ করেন ইউটিউব ভিডিও নির্বাচন. তারপর Properties এ ভিডিওটির ওয়েব ঠিকানা লিখুন। ঠিক যেমন সহজ একটি ফটো গ্যালারি যোগ করা হয়. তোমার পরে ছবির গ্যালারি টুলসেট থেকে বেছে নেওয়া হয়েছে, বাক্সে বিভিন্ন ছবি নির্বাচন করুন ImageFile1, ImageFile2 এবং তাই ঘোষণা গ্যালারিতে ফটোগুলি বড় করার বিভিন্ন উপায় রয়েছে। উদাহরণস্বরূপ, আপনি এগুলিকে একটি নতুন উইন্ডোতে, একটি পপ-আপ উইন্ডোতে খুলতে পারেন, তবে আমরা একটি পৃথক স্তরে একটি বড় চিত্র হিসাবে সবচেয়ে ভাল পছন্দ করি৷
প্রকাশ করতে
তুমি পেরেছ? তারপরে আপনি ওয়েবসাইটটি ইন্টারনেটে বা স্থানীয় ডিস্কে প্রকাশ করতে পারেন। রকেটকেক একটি এফটিপি ফাংশন দিয়ে সজ্জিত যা আপনার প্রদানকারী যে ফোল্ডারটি উপলব্ধ করে তাতে সার্ভারে সবকিছু সুন্দরভাবে রাখার জন্য। FTP ঠিকানা, ব্যবহারকারীর নাম এবং পাসওয়ার্ড লিখুন। বিকল্পটি ব্যবহার করুন পাসওয়ার্ড সংরক্ষণ পাসওয়ার্ড সংরক্ষণ করতে। আপনি যখন আপনার হার্ড ড্রাইভে ওয়েবসাইটটি প্রকাশ করেন, আপনি আপনার ইন্টারনেট প্রোগ্রামের সাথে index.html ফাইলটি খুলে হোমপেজে যেতে পারেন।
