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



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

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

একথা সবাই জানি যে ওয়েব ডেভেলপারদের কমবেশি গ্রাফিক্সের কাজ জানতে হয়। শুধু ওয়েব ডেভেলপারদের কথা বললে বোধহয় ভুল হবে। সফটওয়্যার ডেভেলপারদেরও গ্রাফিক্সের কাজ জানতে হয়। তার কারণ একটাই। তা হচ্ছে আজকাল সব কিছুই GUI বা গ্র্যাফিক্যাল ইউজার ইন্টারফেসে চালানো হয়। এই প্রজেক্টের জন্যও আমাদের ছোট গ্রাফিক্সের কাজ করতে হবে। ৪৮৪ ৫০ পিক্সেলের দুইটি ইমেজ তৈরি করতে হবে যার একটি হবে মূল বাটন এবং অন্যটি হবে রোল ওভার বাটন। প্রতিটি ইমেজে চারটি করে একই রকমের বাটন তৈরি করতে হবে। বাটনে ইচ্ছেমতো নাম দিতে হবে।

কাজের সুবিধার্থে এখানে button1, button2, button3, button4 নাম দেয়া হয়েছে। দিবতীয় ইমেজেও একইভাবে এবং একই পিক্সেলে চারটি বাটন থাকতে হবে এবং নাম একই থাকতে হবে- button1, button2, button3, button4। শুধু প্রথম ইমেজ থেকে দিবতীয় ইমেজে ব্যাকগ্রাউন্ড রঙ পরিবর্তন করে দিতে হবে যাতে মাউস পয়েন্টার বাটনে নিলে রঙের পরিবর্তন বোঝা যায়। এরকম দুটি আইডেন্টিক্যাল ইমেজ তৈরি করার পর তা একটি ছবিতে পরিণত করতে হবে উপর এবং নিচে। অনেকটা প্রথম চিত্রের মতো। এখানে বাটনের নাম নিজের ইচ্ছেমতো দেয়া যাবে। শুধু কোডে কাজ করার সুবিধার্থে home-button, tutorials-button, templates-button, articles-button নাম ব্যবহার করা হয়েছে। দরকার হলে এই নামও পরিবর্তন করা যাবে। মনে রাখতে হবে শুধু ইমেজের উপরই নির্ভর করবে পেজের চেহারা। তাই একটু সময় নিয়ে ইমেজ ডিজাইন করতে হবে। এখানেই সৃষ্টিশীলতার পরিচয় দিতে হবে।

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


.menu
{
height: 50px;
width: 500px;
}
.home-button, .tutorials-button, .templates-button, .articles-button
{
height: 50px;
float: left;
}
.home-button
{
background-image: url(menu-tut.jpg);
width: 91px;
}
.tutorials-button
{
background-image: url(menu-tut.jpg);
background-position: -90px 0px;
width: 136px;
}
.templates-button
{
background-image: url(menu-tut.jpg);
background-position: -226px 0px;
width: 131px;
}
.articles-button
{
background-image: url(menu-tut.jpg);
background-position: -357px 0px; width: 127px;
}
.home-button:hover
{
background-image: url(menu-tut.jpg);
background-position: 0px 51px;
width: 91px;
}
.tutorials-button:hover
{
background-image: url(menu-tut.jpg);
background-position: -90px 51px;
width: 136px;
}
.templates-button:hover
{
background-image: url(menu-tut.jpg);
background-position: -226px 51px;
width: 131px;
}
.articles-button:hover
{
background-image: url(menu-tut.jpg);
background-position: -357px 51px;
width: 127px;
}

কোড ১ প্রয়োগ করা হলে index নামে একটি এইচটিএমএল ফাইল তৈরি করে তাতে দিবতীয় কোড প্রয়োগ করতে হবে। এবারে দেখা যাক দিবতীয় কোড :

“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>










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

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

কজ ওয়েব

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