সিএসএস ব্যবহার
ড্রিওয়েভার টিউটোরিয়াল ৬ : সিএসএস ব্যবহার, Dreamweaver
tutorial
একজন ওয়েব প্রোগ্রামার যখন ওয়েব পেজ তৈরী করেন তখন তিনি সিএসএস এর মত কোড লেখার জন্য কোন টেক্সট এডিটর ব্যবহার করেন (নোটপ্যাড
++)। তাকে কোড লেখা দক্ষ হতে হয়। ড্রিমওয়েভারে শুধুমাত্র মান বসিয়ে সিএসএস কোড তৈরী করা যায়। শুরুতে সিএসএস এর গঠন একটু দেখে নেয়া যাক।
আপনার মনে প্রথমেই প্রশ্ন আসতে পারে সিএসএস এবং এইচটিএমএল দুইয়ের পার্থক্য কি ?
নিচের উদাহরনটি দেখুন
<body bgcolor=”#0000FF”>
এবং
body {background-color: #0000FF;}
প্রথম কোডটি এইচটিএমএল, পরেরটি সিএসএস। দুটি কোডেরই কাজ নিল রঙের ব্যাকগ্রাউন্ড তৈরী করা। পরেরটি মনে রাখা সহজ।
সিএসএস এর ৩টি অংশ। selector, property এবং
value। ওপরের উদাহরনে
body হচ্ছে selector
background-color হচ্ছে property, এবং
#0000FF হচ্ছে value
কাজেই সিএসএস-এ আপনি যা করবেন তা হচ্ছে কিসের পরিবর্তন করবেন সেটা ঠিক করবেন,
কোন বৈশিষ্ট পরিবর্তন করবেন সেটা ঠিক করবেন এবং পরিবর্তনটা কি সেটা বলে দেবেন।
সিএসএস ব্যবহারের জন্য একাধিক পদ্ধতি রয়েছে।
. সরাসরি এইচটিএমএল ডকুমেন্টের মধ্যে সিএসএস টাইপ করে দিতে পারেন, অথবা পৃথক ফাইলে রেখে ব্যবহার করতে পারেন। যেমন ওপরের কোড।
. ট্যাগ হিসেবে ব্যবহার করতে পারেন। যেমন <H1> ট্যাগের জন্য সবসময়ই নির্দিষ্ট ফন্ট, সাইজ ইত্যাদি ব্যবহার করতে পারেন।
. পৃথক ফাইলে সিএসএস কোড রেখে তাকে ব্যবহার করতে পারেন।
মুল কাজে ফেরা যাক। কথা হচ্ছে ডিজাইন ভিউ ব্যবহার করে সিএসএস ব্যবহারের পদ্ধতি নিয়ে।
. নতুন একটি ওয়েবসাইটের জন্য সাইট লোকেশন ঠিক করে নিন।
. মেনু থেকে 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 ক্লিক করুন।
ওয়েব পেজের যে কোন সিএসএস প্রোপার্টি পরিবর্তন করা যাবে এভাবেই। সিএসএস এর বাস্তব ব্যবহার এবং তার ফল কি দাড়ায় সেটা দেখা হবে আগামী টিউটোরিয়ালে।
By Uzzal Malake
No comments:
Post a Comment