পাঠশালা বিভাগের গত তিনটি সংখ্যায় আমরা ক্যাসকেড স্টাইল শীট বা সিএসএস নিয়ে আলোচনা করেছি। গত সংখ্যায় আমরা দেখেছি সিএসএসে কিভাবে রোল ওভার স্লাইডিং ডোর বাটন তৈরি করা যায় এবং সেই বাটনে মাউস পয়েন্টার নিয়ে গেলে তা রঙ পরিবর্তন করে হাইলাইট করে দেখায়। এই সংখ্যায় আমরা সিএসএসের সাহায্যে স্প্রাইট নেভিগেশন কিভাবে করা যায় তা দেখবো। পাঠশালা বিভাগের মাধ্যমে আমরা চেষ্টা করছি ছোট ছোট প্রজেক্টের মাধ্যমে খুব সহজেই যাতে সিএসএস সবাইকে শেখানো যায় অথবা স্ক্রিপ্টিংয়ে সিএসএসে উদ্বুদ্ধ করা যায়।



সবার আগে বলে নিই, ইন্টারনেট এক্সপ্লোরার, মজিলা ফায়ারফক্স, অপেরা, গুগল ক্রোম এবং এপল সাফারিতে এই প্রজেক্ট চলার কথা। সফলভাবে এই প্রজেক্ট চালাতে না পারার কোনো কারণ নেই। যারা ড্র্যাগ অ্যান্ড ড্রপ মেনু পছন্দ করেন তাদের পেজে মেনু ও বাটনগুলোতে যে বৈপ্লবিক পরিবর্তন আসবে তা বলাই বাহুল্য। এই প্রজেক্ট হচ্ছে গত সংখ্যার মাউস ওভার মেনু প্রজেক্টের একটু উন্নত সংস্করণ। একে স্প্রাইট মেনু বা স্প্রাইট নেভিগেশন বলা হয়। রোল ওভার ইমেজ ব্যবহার করে বাটনে দুইটি ইমেজ দিয়েই অ্যানিমেটেড বাটন তৈরি করা যায়। তবে এই স্প্রাইট নেভিগেশন আরো আধুনিক এবং আকর্ষণীয়, কারণ এখানে চারটি ইমেজ ব্যবহার করা হয়েছে।

আগের প্রজেক্টের সাথে এর মিল থাকলেও এখানে বাটন কয়েকবার রঙ পরিবর্তন করে বলে পেজ অনেক বেশি আকর্ষণীয় হয়। জাভাস্ক্রিপ্ট ব্যবহার করেও এই প্রজেক্ট তৈরি করা যায়। কিন্তু সিএসএসে এই প্রজেক্টের ব্যবহার বিস্তৃত।

ওয়েব ডেভেলপারদের কমবেশি গ্রাফিক্সের কাজ জানতে হয়। এই প্রজেক্টেও গ্রাফিক্সের ব্যাপক ব্যবহার করা হয়েছে। আজকাল সব ক্ষেত্রেই গ্রাফিক্সের ব্যবহার লক্ষণীয়। শুধু ওয়েব ডেভেলপারদের কথা বললে বোধহয় ভুল হবে। সফটওয়্যার ডেভেলপারদেরও গ্রাফিক্সের কাজ জানতে হয়। তার কারণ একটাই-সেটি হচ্ছে আজকাল সবকিছুই জিইউআই বা গ্রাফিক্যাল ইউজার ইন্টারফেসে চালানো হয়। এই প্রজেক্টের জন্যও আমাদের ছোট ছোট অনেক গ্রাফিক্সের কাজ করতে হবে।

গ্রাফিক্সের জন্য অনেকেই অনেক রকম সফটওয়্যার ব্যবহার করে থাকেন। আমি নিজে ফটোশপ বা জিম্প ব্যবহার করার চেষ্টা করি। তবে এটা ঠিক ওয়েব ডেভেলপিংয়ের জন্য গ্রাফিক্স ডিজাইনে যে বিশেষ পারদর্শী হতে হবে তা নয়। তবে টুকিটাকি অনেক কিছু জানতে হয়। এখানে ফটোশপ সিএসথ্রি ব্যবহার করা হয়েছে। এই প্রজেক্টের জন্য প্রথমেই ৯৫০ x ১৪৩ পিক্সেলের একটি ইমেজ তৈরি করতে হবে যাকে স্প্রাইট নেভিগেশনের জন্য ব্যবহার করা হবে। এই ইমেজে তৈরি করা হবে একই রকম চারটি বার, যা বাটন হিসেবে ব্যবহারের কাজে লাগে। প্রতিটি বার ৩৫ পিক্সেলের হবে। অর্থাৎ এখানে ৩৫০ x ৩৫ পিক্সেলের চারটি বার উপর-নিচ করে রাখার মতো তৈরি করা হবে।

প্রথমেই পছন্দের রঙ সিলেক্ট করে নিতে হবে সেট ফোরগ্রাউন্ড কালার এবং সেট ব্যাকগ্রাউন্ড কালার থেকে। এরপর এখানে একটি ইমেজে বা ক্যানভাসে ব্যাকগ্রাউন্ডের পাশাপাশি একটি নতুন লেয়ার তৈরি করা হয়েছে Rounded Rectangle Tool-এর সাহায্যে। টুলের এরিয়া নির্ধারণ করে দেয়া হয়েছে ৩ পিক্সেল। এটাই হবে নেভিগেশন বারের বেস।

এবারে এই লেয়ারের লেয়ার স্টাইলে ৩ লেয়ারে ডবল ক্লিক করে লেয়ার স্টাইলে যেতে হবে। গ্র্যাডিয়েন্ট সিলেক্ট করে দিতে হবে যেখানে স্টাইল হবে গ্র্যাডিয়েন্ট ওভারলে এবং মাল্টিপ্লাই ব্লেন্ড মোডে ৯৫% অপাসিটি রাখতে হবে। এর সাথে ৯০ ডিগ্রি অ্যাঙ্গেলে স্কেল রাখতে হবে ১০%। লেয়ার স্টাইল সিলেক্ট করতে না পারলে নতুন লেয়ারে ডবল ক্লিক করে স্টাইল নির্ধারণ করে দেয়া যায়।

গত সংখ্যায় আমরা যেভাবে একই ইমেজ থেকে অনেক বাটন তৈরি করেছি এবারেও সেই একইভাবে একই ইমেজ থেকে অনেক বাটন তৈরি করা হবে। এজন্য ফটোশপে Rectangular marque tool থেকে চতুর্ভূজাকৃতি সিলেকশন দিয়ে ইমেজকে আলাদা করে সুষমাকৃতির বাটন বানিয়ে নিতে হবে। এখানে Rectangular marque tool ব্যবহার করা হয়েছে শুধুই বাটনের মাপ ঠিক রাখার জন্য। বাটন আলাদা হয়ে গেলে তাতে আলাদা লেয়ারে প্রয়োজনমতো নাম দিয়ে দিতে হবে। গত সংখ্যার মতো এখানেও আমরা কাজের সুবিধার্থে button1, button2, button3, button4, button5 ও button6 নাম দেবো। নাম দেয়া হয়ে গেলে লেয়ারগুলো কপি পেস্ট করে প্রত্যেক লেয়ারের উপরে একইভাবে অবস্থান করিয়ে দিতে হবে।

নাম বা লেভেল দেয়ার পর একই ইমেজের আরো তিনটি ডুপ্লিকেট ইমেজ পরপর নিচে নিচে আলাদা লেয়ারে তৈরি করতে হবে। প্রতিটি লেয়ারে নিজের ইচ্ছেমতো একটু পরিবর্তন আনতে হবে। যাতে বাটনে ক্লিক করলে মনে হবে বাটনগুলো অ্যানিমেটেড। এজন্য দিবতীয় লেয়ারটির ব্রাইটনেস একটু বাড়িয়ে দিতে হবে। এটি হচ্ছে মাউস পয়েন্টার ইভেন্ট। তৃতীয় লেয়ার কাজ করবে ক্লিক ইভেন্ট হিসেবে। তাই এক্ষেত্রে বাটনের ভেতরের অংশ একটু উজ্জ্বল করতে হবে। তাই তৃতীয় লেয়ারের প্রত্যেকটি বাটনে কতটুকু অংশ উজ্জ্বল করতে চান তা সিলেক্ট করে লেয়ার তৈরি করতে হবে মূল লেয়ারের উপরে। তারপর লেয়ার স্টাইল (লেয়ারে ডবল ক্লিক করে লেয়ার স্টাইলে যেতে হবে।) থেকে ইনার গ্লো সিলেক্ট করে ব্লেন্ড মোড multiply, অপাসিটি ৫০%, নয়েজ ০%, সাইজ ১০ পিক্সেল এবং রেঞ্জ ৫০% সেটিং রাখতে হবে। বাকি সেটিং ডিফল্ট হবে। মনে রাখবেন গ্র্যাডিয়েনের সাথেই ইনার গ্লো না হলে কাজ করবে না। অবশ্য বাটনের ভেতরের কিছুটা অংশ উজ্জ্বল করতে ইনার গ্লো ব্যবহার না করে ব্যাকগ্রাউন্ড কালারের মূল কালার থেকে কিছুটা উজ্জ্বল সিলেক্ট করে রাইট বাটন ক্লিক করে দিলেও চলবে।

এরপর বাকি থাকল মাউস পয়েন্টার ছেড়ে দেবার ইভেন্টের কাজ। এটি করার জন্য সর্বশেষ যে লেয়ারটি ইনার গ্লো করে একটু ব্রাইট করা হয়েছে সেই লেয়ারটি সিলেক্ট করে একটু ডার্ক করে দিলেই চলবে। এখানে প্রত্যেকটি কাজ আলাদা আলাদা লেয়ারে সম্পন্ন করা হয়েছে। এবারে এই পুরো প্রজেক্ট JPG ফাইল হিসেবে সেভ করলে স্প্রাইট নেভিগেশনের জন্য গ্রাফিক্সের কাজ শেষ হবে। শুধু মনে রাখতে হবে যে, এখানে গ্রাফিক্সের এই ফাইল dummy.jpg নামে সেভ করতে হবে। ইচ্ছে করলে নাম পরিবর্তন করা যাবে। তবে সেক্ষেত্রে সিএসএস কোডেও এই ফাইলের নাম পরিবর্তন করে দিতে হবে। আর গ্রাফিক্সের কাজ পুরোপুরি শেষ করলে দেখতে প্রথম চিত্রের মতো দেখাবে। অন্য যেকোনো উপায়ে এই চিত্রের মতো করে গ্রাফিক্সের কাজ করলেও একইভাবে স্প্রাইট নেভিগেশন করা যাবে। শুধু সেক্ষেত্রে পিক্সেলের মাপ এবং পিক্সেলের হার ঠিক রাখতে হবে।

এবারে কোডে আসা যাক। আমরা গত সংখ্যায় জেনেছি যে সিএসএস নিয়ে কাজ করার জন্য সিএসএসের একটি নিজস্ব ফাইল রাখতে হয়। আর ওয়েব পেজের জন্য যেকোনো ল্যাঙ্গুয়েজে আরেকটি ফাইল রাখা যাবে। এই ফাইল এইচটিএমএল, পিএইচপি, জেএসপি, এএসপি যেকোনো ল্যাঙ্গুয়েজের হতে পারে। এই প্রজেক্ট তৈরি করার জন্য স্টাইল (style.css) নামে সিএসএস ফাইল তৈরি করতে হবে। সাধারণত তিনভাবে সিএসএস স্ক্রিপ্টে অ্যাপ্লাই করা যায়। এগুলো হচ্ছে এলিমেন্ট স্টাইল, আইডি স্টাইল এবং ক্লাস স্টাইল। স্ক্রিপ্টে এক্সটার্নাল অনেক এলিমেন্ট ব্যবহার করার প্রয়োজন হতে পারে দ্রুত লোড হবে এমন স্ক্রিপ্ট তৈরি করার জন্য। এগুলোকেই এলিমেন্ট স্টাইল বলা হয়। যেমন-পেজ লোড হবার সময় সিস্টেম থেকে ফন্ট এবং তার স্টাইল লোড করা যায়। ফাইল তৈরি করে সেখানে প্রথম কোড প্রয়োগ করে দিতে হবে।

সিএসএস এই ফাইলের নাম বেশ গুরুত্বপূর্ণ। কারণ মূল কোডে এই নাম ব্যবহার করা হয়েছে। ইচ্ছে করলে এই নাম পরিবর্তন করা সম্ভব, তবে সেক্ষেত্রে মূল ফাইলে লিঙ্ক দেবার নামও পরিবর্তন করে দিতে হবে। একটু লক্ষ করলে দেখা যাবে, দিবতীয় কোডের চতুর্থ লাইনে এই সিএসএস ফাইলের লিঙ্ক দেয়া হয়েছে। নাম পরিবর্তন করতে চাইলে এই লাইনে style.css-এর নামও পরিবর্তন করে দিতে হবে।

আবার কেউ চাইলে একই ফাইলে সিএসএসের পুরো কাজ করা যাবে। সেক্ষেত্রে প্রথম কোডের পুরোটা দিবতীয় কোডের চতুর্থ লাইনের সাথে রিপ্লেস করতে হবে। দিবতীয় কোডের চতুর্থ লাইন ব্যবহার করা হয়েছে সিএসএস ফাইল লিঙ্ক করে দেবার জন্য। লাইনটি হচ্ছে :



এবারে প্রথম কোড দেখা যাক।

প্রথম কোড



এই কোডে পিক্সেলের অবস্থান ঠিক রাখার জন্য কিছু কমেন্ট ব্যবহার করা হয়েছে। এই কমেন্টগুলো কোডে লেখার দরকার নেই। আর গ্রাফিক্সের কাজ অনুযায়ী পিক্সেলের অবস্থান এই কোড থেকে পরিবর্তন করে নেয়া যাবে। ফন্ট বা ফন্টের সাইজের জন্যও একই কথা প্রযোজ্য। প্রথম কোড প্রয়োগ করা হলে main.html নামে একটি এইচটিএমএল ফাইল তৈরি করে তাতে দিবতীয় কোড প্রয়োগ করতে হবে। এটাই এই প্রজেক্টের মূল ফাইল। এবারে দেখা যাক দিবতীয় কোড।

দ্বিতীয় কোড






Example only!



মনে রাখবেন বাটনে ক্লিক করলে কোন ইভেন্টের কাজ করবে তা কিন্তু নির্দিষ্ট করে বলা হয়নি। তাই এখানে বাটনে ক্লিকের ইভেন্ট হিসেবে যথারীতি আমাদের কমপিউটার জগৎ-এর ওয়েবসাইটের ঠিকানা দিয়ে দেয়া হয়েছে। এখানে আপনাদের দরকারমতো পেজ ব্যবহার করতে পারেন। আশা করা যায় এই স্প্রাইট নেভিগেশন বার তৈরি করে তা কাজে লাগাতে কোনো সমস্যা থাকবে না।

এই কোড ব্যবহার করার সময় মনে রাখতে হবে যে এখানে অনেক ফিল্ড ডামি হিসেবে ব্যবহার করা হয়েছে কোড লেখার সুবিধার জন্য। সরাসরি ব্যবহার করার সময় সেসব ডামি পরিবর্তন করে দিতে হবে। আর ইচ্ছেমতো ভেরিয়েবল বা পিক্সেল পরিবর্তন করে কোড কাজে লাগাতে পারবেন। যদি দরকার পড়ে তাহলে বাটনের ভেরিয়েবল নাম পরিবর্তন করে দিতে হবে। ইন্টারনেট এক্সপ্লোরার, মজিলা ফায়ারফক্স, অপেরা, গুগল ক্রোম এবং এপল সাফারিতে এই প্রজেক্ট চলবে।

কজ ওয়েব

ফিডব্যাক : mortuzacsepm@yahoo.com