Tutorial- Web Design-7

সিএসএস ষ্টাইল ব্যবহার

Dreamweaver CSS Style : ড্রিমওয়েভার সিএসএস ষ্টাইল ব্যবহার

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

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

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

আপাতত ড্রিমওয়েভারের নিজস্ব টেম্পলেট ব্যবহার করা যাক।

.          ড্রিমওয়েভার মেনু থেকে File - New কমান্ড দিন।

.          Blank Page – HTML থেকে পছন্দমত টেম্পলেট সিলেক্ট করুন।

(একাজ আগেও করা হয়েছে। আগের কাজকে ব্যবহার করতে পারেন)

পেজ লে-আউট ঠিক করা

কোড না লিখে উদাহরনের সাইটের বিভিন্ন বিষয়ের সিএসএস ষ্টাইল পরিবর্তণ কিভাবে করা যায় দেকা যাক। ধরুন আপনি মুল টেক্সট এর ফন্ট এবং ব্যাকগ্রাউন্ড রং পরিবর্তণ করবেন।

.          সিএসএস প্যানেল ওপেন না থাকলে Window – CSS style  কমান্ড দিয়ে ওপেন করুন।

.          যোগ (+) চিহ্নে ক্লিক করে বিভিন্ন ষ্টাইলের লিষ্ট ওপেন করুন।

.          body ক্লিক করুন। এর নিচের অংশে Color, font, margin, padding ইত্যাদি রয়েছে। যা পরিবর্তন করতে চান সেটা সিলেক্ট করুন। এবং পরিবর্তন করুন।

.          CSS Container পরিবর্তনের জন্য .container সিলেক্ট করুন। এখানে ব্যাকগ্রাউন্ডের রং, মার্জিন এবং পাশের মাপ পরিবর্তন করা যাবে।

রঙকে কোড লিখে প্রকাশ করার জন্য পতিটি রঙের নির্দিষ্ট কোড রয়েছে। যেমন FFF হচ্ছে সাদা, 000 হচ্ছে কালো। কোডের শুরুতে # চিহ্ন ব্যবহার করতে হয়। ফটোশপে পছন্দের রং সিলেক্ট করে কালার প্যালেটে সেই রঙের কোড জেনে নিতে পারেন।

.          Container ভেতরে content এর পরিবর্তন করার জন্য .content সিলেক্ট করুন। এখানে float, padding, width, background color ইত্যাদি পরিবর্তণ করা যাবে। ফ্লোটকে মার্জিনের সাথে তুলনা করতে পারেন।

প্রতিটি পরিবর্তন করার সাথেসাথে স্প্লিট ভিউতে কোড দেখে নিন। অভ্যস্থ হলে সরাসরি কোডে পরিবর্তন করেও একাজ করতে পারেন।

এক্সটারনাল সিএসএস ব্যবহার

এক্সটারনাল সিএসএস ষ্টাইল এর তথ্যগুলি পৃথক ফাইলে থাকে। আপনার সাইটের শতশত পৃষ্টার জন্য যদি এধরনের একটি সিএসএস ফাইল ব্যবহার করা হয় তাহলে শুধুমাত্র সেখানে পরিবর্তণ করলেই সমস্ত পেজে পরিবর্তনটি পাওয়া যাবে। যে কারনে ছোট সাইট হলেও পৃথকভাবে সিএসএস ষ্টাইল পেজ (সিট) ব্যবহার সুবিধেজনক।

নতুন এক্সটারনাল সিএসএস ষ্টাইল সিট তৈরীর জন্য;

.          ড্রিমওয়েভার মেনু থেকে File - New কমান্ড দিন

.          Blank Page সিলেক্ট করে একেবারে নতুন ষ্টাইল সিট তৈরী করতে পারেন অথবা Page from sample থেকে কোন উদাহরন নিয়ে তাকে নিজের প্রয়োজন অনুযায়ী পরিবর্তণ করে নিতে পারেন।

.          create বাটনে ক্লিক করলে নতুন ফাইল তৈরী হবে।

.          একে সেভ করার সময় ফাইলনামের এক্সটেনশন হিসেবে .css ব্যবহার করুন।

ইন্টারনাল সিএসএস ব্যবহারের পর তাকে এক্সটারনাল হিসেবে ব্যবহার করা যায়। এজন্য যা করবেন;

.          আপনার ওয়েব পেজ ডকুমেন্ট ওপেন করুন।

.          সিএসএস প্যানেলে যে বিষয় (rule) এক্সটারনাল ষ্টাইল সিটে নিতে চান তার ওপর রাইট-ক্লিক করে Move CSS Rules সিলেক্ট করুন।

.          নতুন ষ্টাইল সিট তৈরীর জন্য A New style sheet এবং আপের তৈরী ষ্টাইল সিটে পাঠানোর জন্য Browse  কমান্ড ব্যবহার করে ফাইলটি ওপেন করুন।

ষ্টাইল সিট এটাচ করা

এক্সটারনাল ষ্টাইল সিটকে ব্যবহারের জন্য যা করবেন;

.          CSS Style Panel এর Attach Style Sheet আইকনে ক্লিক করুন,

অথবা CSS Style Panel এ রাইট ক্লিক করে Attach Style Sheet  সিলেক্ট করুন।

.          ব্রাউজ করে ফাইলটি সিলেক্ট করুন।

.          Add as link সিলেক্ট করুন।

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

By Uzzal Malake