ওয়েব ডিজাইনের শুরু – পর্ব ২ (CSS Layer Styling)

<div> এর কাজ কি করে খুব সহজেই করে যায় তা আগের পর্বেই মোটামুটি গুছিয়ে বলার চেষ্টা করেছি। আজকের বিষয়টা খুবই ছোট। খুব বেশি লিখবনা তাই। লেয়ার স্টাইলিং তখন ই আপনার লাগবে যখন আপনি একটি HTML element এর উপর অন্য একটি element রাখতে যাবেন।

ব্যাপারটা ছোট হলেও ভেঙে বলাটা জরূরী। কেননা, ব্যবহার না জানলে আসলে কোন ভালো কিছু ও কোনোদিন কাজে আসেনা। মনে করুন আপনি একটি ওয়েবসাইটের লে আউট তৈরী করেছেন এরকম:

খেয়াল করে দেখুন, যদি আপনি Header এর স্থানটি ভাগ করে ডানদিকে এমন একটি ছবি বসাতে যান যেটি আপনার content (green) এবং navigation (pink) দুটো অংশই আংশিক ঢেকে রাখবে এবং ওই দুটির অবস্থান পরিবর্তন না করে তাদের উপর ভেসে থাকবে তাহলে কি করবেন?

মনে করুন আপনি header এর width কমিয়ে এটিরে পাশে আরো একটি ছবি বসাবেন। প্রথমে, হেডার এর width কমিয়ে একটু জায়গা খালি করে নিন। খেয়াল রাখবেন যেনো জায়গা খালি করার ফলে আপনার ফাঁকা জায়গায় navigation (pink) অংশটি উঠে না যায়। এজন্য চাইলে আপনি ফাঁকা জায়গাটিতে ফাঁকা <div> বসিয়ে রাখতে পারেন। যদি আপনি আমার কথা না বুঝে থাকেন, এখান থেকে ঘুরে আসুন! এখানে আমরা একটি <div> এ একটি ছবি রাখবো। ছবির অংশটি পরবর্তীতে কালো বর্ডার দিয়ে দেখানো হয়েছে।

কালো অংশটি যদি আপনার ছবি হয় তাহলে দেখুন এর height এর জন্য আপনার navigation (pink) অংশটি নিচে সরে এসেছে। যদি আপনি চান এই কালো অংশটি navigation pane এর উপরে ভাসবে অর্থাৎ এর কিছু অংশ ঢেকে রেখে ভাসবে তাহলে বদলে ফেলুন এর CSS অংশটি। সাধারণত CSS এ লেয়ার বলে দেয়া হয় z-index দিয়ে। z-index একটি integer (পূর্ণ সংখ্যা) value হিসেবে নেয়। আপনি যে যে html element একই লেয়ারে বা একই স্তরে রাখতে চান সেগুলোকে একই z-index দিয়ে প্রকাশ করতে হবে। ব্যাপারটা অনেকটাই ফটোশপের লেয়ার এর মতো।

এখন , কালো অংশটির CSS id যদি হয় pic তাহলে লিখুন:


#pic
{
width:475px
(আপনার মাপ মতো);
height:225px (আপনার মাপ মতো);
float:left;
position:relative;
z-index:2;
}

এটির সাইজ আপনি আপনার মতো করে সাজিয়ে নিতে পারেন। আমি কেবল মান বসানোর স্বার্থে কিছু বসিয়েছি। মনে করুন আপনার navigation pane টির CSS id নিচের মতো:


#nav
{
width:332px;
float:left;
margin-left:20px;
margin-top:245px;
margin-right:30px;

z-index:1;

position:relative;

}

খেয়াল করে দেখুন আমি আলাদা করে দিয়েছি দুটো parameter লাল রং দিয়ে। এই দুটি parameter আপনার লেয়ার স্টাইল বলে দিচ্ছে। যেটি উপরে তার z-index আমি 2 বলে দিয়েছি এবং যেটি নিচে তার z-index আমি বলে দিয়েছি 1 ।  এখন যেসকল HTML element এর z-index হবে 2 তারা সবগুলো থাকবে একই লেয়ারে ।এবং সবচেয়ে গুরুত্বপূর্ন ব্যাপার হচ্ছে আপনাকে অবশ্যই দুটার position: relative করে দিতে হবে। নতুবা, আপনার মনের মতো হবেনা আপনার সাইটটি। যদি CSS positioning সম্পর্কে আপনার idea না থাকে ঘুরে আসতে পারেন এখান থেকে।

আশা করি আপনার সাইটটি দেখতে এরকম হবে। দেখুন কালো অংশটি navigation pane এর উপরে ভেসে আছে। CSS layer styling ব্যবহার করে এই কাজটিই খুব সহজে করা যায়।

আমি আগেও বলেছি, এখনো বলছি টিউটোরিয়াল গুলো net এ ছড়িয়ে আছে। আপনি অন্য কোথাও যদি পড়ে থাকেন তাহলে বলছি এগুলো বাংলায় আবার লেখার কারন একটিই-সহজবোধ্যতা।  HTML basic শেখার পরও একটি ওয়েবসাইট ডিজাইন কি করে করতে হয় তা  সম্পর্কে অনেকের ধারণাই স্পষ্ট হয়না। তাই  আমার এই চেষ্টা । আমি পরবর্তীতে CSS দিয়ে কি করে সহজেই একটি navigation bar বানানো যায় সেটি নিয়ে লিখবো আর পারলে CSS 4 নিয়ে লেখার ইচ্ছে আছে। আপাতত ASP.net শিখছি। শেখা হলে বসে পড়বো কিবোর্ড নিয়ে 😀

 

 

 

সাজিয়ে নিন আপনার ওয়েবসাইট!

 

 

ওয়েব ডিজাইনের শুরু – পর্ব ১

সাধারনত ওয়েব ডিজাইন শেখানোর শুরুতেই যে কোন ওয়েব টিউটোরিয়াল (আদর্শ উদাহরণ w3schools ) সাইটেই HTML টিউটোরিয়ারে অনুসরণের কথা বলা হয়। বলাটাও স্বাভাবিক, HTML শেখার কয়েকটা প্রাথমিক বিষয়ের মধ্যে একটি হচ্ছে টেবিল। সাধারণত এই টেবিল ই ব্যবহৃত হয় একটি সাধারণ ওয়েবসাইটের ডিজাইন তৈরী করার সময়। কিন্তু SEO (Search Engine Optimization) সহ আরো হাজারো কারনে Table based layout এখন আধুনিক ওয়েবসাইট ডিজাইনাররা এড়িয়ে চলতে চান। ওয়েবে হাজারো টিউটোরিয়াল ছড়িয়ে আছে সেটা আমার জানা। কিন্তু তবুও ওয়েব ঘেটে আর নিজের শেখার পর মনে হলো বাংলা কিছু টিউটোরিয়াল থাকলে হয়তো অনেক সহজেই শেখা যেত।

ওয়েব ডিজাইন নিয়ে এহেন ভয়াবহ খটমট, দাঁতভাঙা কথা বলার মতো জ্ঞান আমার মাথায় নেই আপাতত। এখানে শুধুমাত্র টেবিলের পরিবর্তে <div> tag ব্যবহার করে এবং CSS এর মাধ্যমে কি করে সহজেই  একটি ওয়েবসাইট ডিজাইন করা যায় তার কথাই বলা। আগেই বলেছি টিউটোরিয়াল টি ওয়েব ঘেটে বানানো। কপিরাইটের মামলায় ফাঁসাবেননা যেন। শুধু শেখার সুবিধার্থেই নিজের জানাটুকু সবাইকে বলা আর কি।  এখানে দেখানো হয়েছে কি করে খুব সহজেই একটি table based design কে অনেক সহজেই <div> দ্বারা তৈরী করা যায়।

মনে করুন , আপনি টেবিল দিয়ে নিচে আঁকা একটি ওয়েবসাইটের layout তৈরীর চিন্তা করছেন।

header image
content column links column

এখন যদি আমি এই layout টি <div> ট্যাগ দ্বারা তৈরী করতে চাই, তাহলে প্রথমেই পরপর তিনটি <div> ট্যাগ লেখার ইচ্ছা হওয়াটাই স্বাভাবিক। যদি তাই করেন আপনি দেখতে পারেন নিচের মতো কোন কিছু। নিচের লেখাটি notepad বা অন্য কোন editor (Microsoft Expression Studio , Adobe Dreamweaver) এ paste করে দেখুন।


<div>
<div>Header</div>
<div>Content</div>
<div>links</div>
</div>

আমি ব্যবহার করি Microsoft Expression Web । চাইলে ব্যবহার করে দেখতে পারেন।

যাই হোক আপনি দেখবেন আপনার টেবিলের মতো কিছু হচ্ছেনা। <div> ট্যাগ তিনটি পরপর বসে গিয়েছে। কোনোমতেই আপনি একটি <div> ট্যাগের পাশে আরেকটিকে বসাতে পারবেননা (টাইনা হ্যাঁচড়ায়াও পারবেননা)।  এর সমাধান কি? এবার ভাইজান আপনার দরকার CSS .

CSS based layout এর একটি গুরুত্বপূর্ন অংশ হলো float এর ব্যবহার। এই float শব্দটিই আপনার সকল সমস্যার সমাধান দাতা।  শব্দটির সাধারণ অর্থ ভেসে থাকা। আসলেও এটি কাজ করে একই ভাবে। যখনই CSS ব্যবহার করে আপনি কোন <div> এ এই parameter টি ব্যবহার করবেন, এটি তার নির্দিষ্ট direction অনুযায়ী সর্বোচ্চ উচ্চতায় ভেসে উঠবে। আমার কথা দুবোর্ধ্য মনে হলে দেখতে পারেন নিচের ছবিটি!

example_float_1কোডের কথা বলার আগে সহজ কথা বলি। এখানে <div> ট্যাগ ব্যবহৃত হয়েছে। নীল রঙের বর্ডার দেয়া <div> টিতে float এর direction এ left দেয়ায় এটি বড়  body এর বামদিকে ভেসে উপরে উঠে এসেছে। এবার আসি কোডে।

প্রথমে আমরা তৈরী করবো এই container div যেটি অন্যান্য div গুলোকে ধরে রাখবে। নিচের কোডটি খেয়াল করেন।

<body>
<div id="container">

</div>
</body>

id define  করার জন্য আপনার html পেইজ এর CSS এ নিম্নোক্ত পরিবর্তন আনতে হবে। CSS সম্পর্কে না জানলে জেনে নিন এই লিংক থেকে।

body {
text-align: center;
}


#container {
margin: 35px auto;
width: 500px;
text-align: left;
}

এখানে container এর জন্য একটি id define করা হয়েছে। যেখানে প্রয়োজনীয় parameter গুলো ব্যবহার করে এর properties বলে দেয়া হয়েছে। width, margin, text align দিয়ে এই div টির properties বলে দেয়া হয়েছে এখানে।

খেয়াল করে দেখুন, পুরোটা লেখার পর আপনার পেজটির চেহারা হবে অনেকটাই এরকম।

tut_2

খেয়াল করে দেখুন, আপনার বানানো container div টির position পরিবর্তন হয়েছে। মনে করে দেখুন আমাদের বানানো প্রথম টেবিলটিতে cell ছিলো ৩ টি। তো আমাদের ৩টি div তৈরী করতে হবে এই container div এর ভিতর । ধরে নিন, তিনটি div এর id আমরা দিলাম header, content , sidebar. চলে যাই কোড এ।

<body>
<div id="container">

<div id="header">    </div>

<div id="content">  content  </div>

<div id="sidebar">  links  </div>

</div>
</body>

মনে করুন আমরা তিনটি div এর জন্য CSS এ id define করলাম নিচের মতো করে:

#container {
margin: 35px auto;
width: 500px;
}
#header {
width: auto;
}
#content {
width: 380px;
}
#sidebar {
width: 120px;
}

যদিও আমরা আমাদের প্রয়োজন অনুযায়ী তিনটি div define করলাম কিন্তু খেয়াল করে দেখবেন আপনার পেজটা এখন দেখাবে অনেকটা নিচের মতো:

tut_3

খেয়াল করে দেখুন, তিনটি div define করা সত্ত্বেও টেবিলটির মতো layout আমরা দাঁড় করাতে পারিনি। এইবার আমরা যদি  link div(pink) কে float এর মাধ্যমে content div এর পাশে বসাতে পারি তাহলে আমাদের টেবিল লে-আউটটির মতো লে-আউট হয়ে যাবে। তাই  আপনার CSS কে পরিবর্তন করুন আবার:

#content {
float: left;
width: 380px;
}
#sidebar {
float: right;
width: 120px;
}

খেয়াল করে দেখুন float ব্যবহারের ফলে link div (pink) টি content div (green) এর পাশে উঠে এসেছে । খেয়াল রাখবেন পাশাপাশি যতগুলো div ব্যবার করুননা কেন, তাদের width এর যোগফল যেন container div এর width এর সমান হয়। নাহলে আপনার ডিজাইনটি আপনার মনমতো হবেনা। আশা করি এবার আপনার HTML পেজটি নিচের মতো হবে:

tut_4

আমি আগেই বলেছি, ওয়েব থেকে সংগ্রহ করে এই টিউটোরিয়ালটি লেখা। শুধুমাত্র সবার বোঝার সুবিধার্থে বাংলা করা। পরবর্তীতে CSS layer styling সহ আরে অনেক কিছু নিয়ে লেখার চেষ্টা করবো। আমাকেও তো শিখতে হবে, নাহলে লিখবো কি? আর তো কিছু জানিনা!  😀

চাইলে যোগাযোগ করতে পারেন আমার সাথে : Swagata.Prateek(at)msptechrep.com