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

একজন ওয়েব প্রোগ্রামার যখন ওয়েব পেজ তৈরী করেন তখন তিনি সিএসএস এর মত কোড লেখার জন্য কোন টেক্সট এডিটর ব্যবহার করেন (নোটপ্যাড ++)। তাকে কোড লেখা দক্ষ হতে হয়। ড্রিমওয়েভারে শুধুমাত্র মান বসিয়ে সিএসএস কোড তৈরী করা যায়। শুরুতে সিএসএস এর গঠন একটু দেখে নেয়া যাক। আপনার মনে প্রথমেই প্রশ্ন আসতে পারে সিএসএস এবং এইচটিএমএল দুইয়ের পার্থক্য কি ? নিচের উদাহরনটি দেখুন এবং body {background-color: #0000FF;} প্রথম কোডটি এইচটিএমএল, পরেরটি সিএসএস। দুটি কোডেরই কাজ নিল রঙের ব্যাকগ্রাউন্ড তৈরী করা। পরেরটি মনে রাখা সহজ। সিএসএস এর ৩টি অংশ।selector, propertyএবংvalue। ওপরের উদাহরনে bodyহচ্ছেselector background-colorহচ্ছেproperty,এবং #0000FFহচ্ছেvalue কাজেই সিএসএস-এ আপনি যা করবেন তা হচ্ছে কিসের পরিবর্তন করবেন সেটা ঠিক করবেন, কোন বৈশিষ্ট পরিবর্তন করবেন সেটা ঠিক করবেন এবং পরিবর্তনটা কি সেটা বলে দেবেন। সিএসএস ব্যবহারের জন্য একাধিক পদ্ধতি রয়েছে। . সরাসরি এইচটিএমএল ডকুমেন্টের মধ্যে সিএসএস টাইপ করে দিতে পারেন, অথবা পৃথক ফাইলে রেখে ব্যবহার করতে পারেন। যেমন ওপরের কোড। . ট্যাগ হিসেবে ব্যবহার করতে পারেন। যেমন

ট্যাগের জন্য সবসময়ই নির্দিষ্ট ফন্ট, সাইজ ইত্যাদি ব্যবহার করতে পারেন। . পৃথক ফাইলে সিএসএস কোড রেখে তাকে ব্যবহার করতে পারেন। মুল কাজে ফেরা যাক। কথা হচ্ছে ডিজাইন ভিউ ব্যবহার করে সিএসএস ব্যবহারের পদ্ধতি নিয়ে। . নতুন একটি ওয়েবসাইটের জন্য সাইট লোকেশন ঠিক করে নিন। . মেনু থেকেFile – Newকমান্ড দিন। . Blank Pageসিলেক্ট করুন। . যে কোন পেজ টাইপ সিলেক্ট করুন। . Fixed, Elastic, Liquid, Hybridইত্যাদির যে কোন একটি সিলেক্ট করুন। . লিষ্টে ক্লিক করে পছন্দমত অপশন সিলেক্ট করুন। . DocTypeক্লিক করুন এবং সিএসএস এর অপশন সিলেক্ট করুন। . Layout CSSক্লিক করুন এবং পছন্দের অপশন সিলেক্ট করুন। এখানে যা যা করবেন তা হচ্ছে; Add to Head :নতুন পেজে হেড সিএসএস যোগ করার জন্য Create New File :এক্সটারনাল সিএসএস ফাইল তৈরীর জন্য। Link to Existing File :আগের তৈরী সিএসএস ফাইল ব্যবহারের জন্য। . Createক্লিক করুন। এক্সটারনাল ফাইল সিলেক্ট করলে সেটার জন্য নাম টাইপ করে দিন। এক্সটারনাল সিএসএস ফাইল তৈরী . মেনু থেকেFile – Newকমান্ড দিন। . দুটি পদ্ধতির যে কোন একটি পদ্ধতি সিলেক্ট করুন Blank :নতুন সিএসএস ফাইল তৈরীর জন্য। Sample :সফটঅয়্যারের সাথে দেয়া উদাহরন থেকে সিএসএস ব্যবহারের জন্য। . Createক্লিক করুন। সিএসএস এর জন্য ৩ ধরনের পদ্ধতি ব্যবহার করা যা এবং এদের ৩টিই এখানে উল্লেখ করা হচ্ছে তাহলেও এক্সটারনাল ফাইল হিসেবে ব্যবহার সবচেয়ে সুবিধেজনক। এভাবে ব্যবহার করলে খুব সহজে পরিবর্তন করা যায়। AttributeএবংTag Styleতৈরী . যে ওয়েব পেজের সিএসএস ষ্টাইল তৈরী করবেন সেটা ওপেন করুন। . মেনু থেকেFormat – CSS Style – Newসিলেক্ট করুন . কোন ধরনের সিএসএস ষ্টাইল ব্যবহার করবেন সেটা সিলেক্ট করুন Attribute Style : Classসিলেক্ট করুন,Nameক্লিক করুন এবং ষ্টাইল নেম সিলেক্ট করুন Tag Style : Tagসিলেক্ট করুন,Nameক্লিক করুন এবং এইচটিএমএল ট্যাগ সিলেক্ট করুন। . Define Inক্লিক করুন এবং(This Document Only)সিলেক্ট করুন। . OKক্লিক করুন। . নির্দিস্ট ক্যাটাগরি সিলেক্ট করুন এবং তারজন্য প্রোপার্টি ঠিক করে দিন।বিষয় অনুযায়ী রং, ফন্ট, সাইজ, ষ্টাইল ইত্যাদি সিলেক্ট করা যাবে মেনু থেকে। . কাজশেষেOKবাটনে ক্লিক করুন। এক্সটারনাল ষ্টাইল তৈরী এক্সটারনাল সিএসএস এর জন্য ড্রিমওয়েভার নামে একটি ফোল্ডার তৈরী করে সেখানে ফাইলটি রাখে। সবগুলি ষ্টাইল সিট সেখানে রাখতে হবে। . মেনু থেকেFormat – CSS Style – Newকমান্ড দিন . ClassঅথবাTagঅপশন ক্লিক করুন। (উদাহরনেtag) . Nameক্লিক করুন এবংHTMLট্যাগ সিলেক্ট করুন (যেমনbody) . Define Inক্লিক করুন, এরপরNew Style Sheet Fileক্লিক করুন। . OKক্লিক করুন। . সিএসএস এর নাম টাইপ করে দিন এবং সেভ করুন। . ক্যাটাগরি সিলেক্ট করে সেটার জন্য প্রোপার্টি পরিবর্তন করুন। . OKক্লিক করুন। ওয়েব পেজের যে কোন সিএসএস প্রোপার্টি পরিবর্তন করা যাবে এভাবেই। সিএসএস এর বাস্তব ব্যবহার এবং তার ফল কি দাড়ায় সেটা দেখা হবে আগামী টিউটোরিয়ালে।

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.