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

ড্রিমওয়েভার ব্যবহার করে ওয়েব পেজ তৈরীর জন্য বিভিন্ন কাজ কিভাবে করতে হবে সেই বিষয়গুলি উল্লেখ করা হয়েছে কয়েকটি টিউটোরিয়ালে। সেগুলিকে একসাথে করে কিভাবে আপনার পছন্দমত ওয়েবসাইট পাবেন জেনে নিন। বাস্তবে ওয়েব পেজ তৈরীর জন্য আগে পরিকল্পনা করে কাজ শুরু করা ভাল। দেখতে কেমন হবে থেকে শুরু করে কতগুলি পেজ থাকবে, প্রতিটি পেজের জন্য টেক্সট এবং ইমেজ ইত্যাদি আগেই তৈরী করে নিন। ড্রিমওয়েভারের সাথে কিছু লে-আউট দেয়া থাকে। অনেক সময় প্রফেশনাল টেম্পলেট কিনে তাকেও নিজের মত করে ব্যবহার করতে পারেন। সেগুলির সুবিধে হচ্ছে দেখতে সুন্দর এবং বিশেষ কাজের উপযোগি করার সাথেসাথে সার্চ ইঞ্জিন অপটিমাইজেশন সহ অন্যান্য ফিচারগুলি যোগ করা থাকে। আপাতত ড্রিমওয়েভারের নিজস্ব টেম্পলেট ব্যবহার করা যাক। . ড্রিমওয়েভার মেনু থেকে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সিলেক্ট করুন। সিএসএস ষ্টাইল প্যানেলে পরিবর্তন করার সময় কোডের কি পরিবর্তন হচ্ছে সেদিকে দৃষ্টি রাখুন। খুব দ্রুতই সিএসএস ব্যবহারে দক্ষতা অর্জন করা যাবে।

Share on Google Plus

About K. M. Emrul Hasan

This is a short description in the author block about the author. You edit it by entering text in the "Biographical Info" field in the user admin panel.