আমরা গত পর্বে ওয়েব পেজ এর একটি ডিজাইন তৈরি করেছিলাম। এবার আমরা সেটাকেই আর একটু আপডেট করব । তাহলে দেখুন ।
লেআউট-২
আমরা
এ অধ্যায়ে যা দেখব তা হল header অংশ কে ২ ভাগে ভাগ করে ফেলব । এক অংশে লোগো আর এক অংশে কোম্পানির নাম থাকবে ।তাহলে দেখুন কিভাবে করে ফেলি ।
আপনার ফাইল এর <body> ট্যাগ এর ভিতরে এটি লিখে দিন ।
<div id=”wrapper”>
<div id=”header”>
<div id=”header_left”>Logo</div>
<div id=”header_right”>Welcome To My Site</div>
</div>
<div id=”menu”></div>
<div id=”contents”>
<div id=”left”></div>
<div id=”right”></div>
</div>
<div id=”footer”></div>
</div>
এবার দেখুন যে আমরা এখানে header অংশ কে ২ ভাগে ভাগ করার জন্য ২ টি div নিয়েছি । <div id=”header_left”>Logo</div> এবং <div id=”header_right”>Welcome To My Site</div>
এক অংশে আমরা লোগো রেখেছি আরেক অংশে Welcome To My Site লেখাটি রেখেছি ।
এর জন্য তো সিএসএস অবশ্যই লিখতে হবে । নিচের লিখুন ।
#header{
width:950px;
height:80px;
float:left;
background-color:#003300;
text-align:center;
font-size:24px;
color:#FFFFFF;
}
#header_left{
width:250px;
height:80px;
float:left;
background-color:#CCCC00;
}
#header_right{
width:700px;
height:80px;
float:right;
background-color:#0099CC;
}
এটি পুরা কোড না শুধুমাত্র header অংশের কোড । এখানে header_left এর প্রপার্টি তে width:250px; height:80px; float:left; background-color:#CCCC00; ব্যবহার করা হয়েছে । এর মানে হল header_left এর width ২৫০ পিক্সেল height ৮০ পিক্সেল background-color এই রং এর হবে এবং যেটি সবশেষে float:left; করা হয়েছে এটির কাজ হল এটাকে বাম দিকে চেপে রাখা । আর header_right অংশের প্রপার্টি তে একই লিখেছি শুধু মাত্র float:right; দিয়েছি যার কারনে এটি ডান দিকে চেপে আছে । এভাবেই মেইনলি ২ ভাগ ৩ ভাগ ৪ ভাগে একটা div কে ভাগ করা হয় ।
আপনাদের সুবিধার জন্য আমি এটার সম্পূর্ণ কোড নিচে দিয়ে দিলাম ।
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″ />
<title>CSS Traning</title>
<style type=”text/css”>
#wrapper{
width:950px;
margin:0 auto;
}
#header{
width:950px;
height:80px;
float:left;
background-color:#003300;
text-align:center;
font-size:24px;
color:#FFFFFF;
}
#header_left{
width:250px;
height:80px;
float:left;
background-color:#CCCC00;
}
#header_right{
width:700px;
height:80px;
float:right;
background-color:#0099CC;
}
#menu{
width:950px;
height:30px;
float:left;
background-color:#CC0033;
}
#menu ul{
margin:0;
padding:0;
}
#menu ul li{
list-style:none;
display:inline;
padding:0 15px;
}
#menu ul li a{
color:#FFFFFF;
text-decoration:none;
}
#menu ul li a:hover{
color:#E17100;
}
#contents{
width:950px;
height:430px;
float:left;
background-color:#999999;
}
#left{
width:250px;
height:430px;
float:left;
background-color:#555555;
}
#right{
width:700px;
height:430px;
float:right;
background-color:#660000;
}
#footer{
width:950px;
height:50px;
padding-top:30px;
float:left;
background-color:#FFCC99;
text-align:center;
}
</style>
</head>
<body>
<div id=”wrapper”>
<div id=”header”>
<div id=”header_left”>Logo</div>
<div id=”header_right”>Welcome To My Site</div>
</div>
<div id=”menu”></div>
<div id=”contents”>
<div id=”left”></div>
<div id=”right”></div>
</div>
<div id=”footer”></div>
</div>
</body>
</html>
এর আউট পুট আপনি নিচের মত দেখতে পাবেন ।
এখন যদি আপনি Welcome To My Site লেখাটিকে একটু নিচে নামাতে চান তাহলে আপনাকে যেটি করতে হবে টা হল header div এর padding ব্যবহার করা অথবা header_right div এর margin ব্যবহার করা । যেমন
#header_right{
width:700px;
height:80px;
float:right;
margin-top:20px;
}
এখানে margin-top:20px; দেওয়ার কারনে এটি উপর থেকে নিচের ২০ পিক্সেল নেমে যাবে । যেহেতু #header_right এই অংশের সিএসএস প্রপার্টি তে margin-top:20px; দেওয়া হয়েছে তাই শুধুমাত্র এটিই নিচের নামবে ।
আশা করি বুঝতে পেরেছেন । এবার আপনি Practice করুন । ধন্যবাদ ।
লেআউট-২
আমরা
এ অধ্যায়ে যা দেখব তা হল header অংশ কে ২ ভাগে ভাগ করে ফেলব । এক অংশে লোগো আর এক অংশে কোম্পানির নাম থাকবে ।তাহলে দেখুন কিভাবে করে ফেলি ।
আপনার ফাইল এর <body> ট্যাগ এর ভিতরে এটি লিখে দিন ।
<div id=”wrapper”>
<div id=”header”>
<div id=”header_left”>Logo</div>
<div id=”header_right”>Welcome To My Site</div>
</div>
<div id=”menu”></div>
<div id=”contents”>
<div id=”left”></div>
<div id=”right”></div>
</div>
<div id=”footer”></div>
</div>
এবার দেখুন যে আমরা এখানে header অংশ কে ২ ভাগে ভাগ করার জন্য ২ টি div নিয়েছি । <div id=”header_left”>Logo</div> এবং <div id=”header_right”>Welcome To My Site</div>
এক অংশে আমরা লোগো রেখেছি আরেক অংশে Welcome To My Site লেখাটি রেখেছি ।
এর জন্য তো সিএসএস অবশ্যই লিখতে হবে । নিচের লিখুন ।
#header{
width:950px;
height:80px;
float:left;
background-color:#003300;
text-align:center;
font-size:24px;
color:#FFFFFF;
}
#header_left{
width:250px;
height:80px;
float:left;
background-color:#CCCC00;
}
#header_right{
width:700px;
height:80px;
float:right;
background-color:#0099CC;
}
এটি পুরা কোড না শুধুমাত্র header অংশের কোড । এখানে header_left এর প্রপার্টি তে width:250px; height:80px; float:left; background-color:#CCCC00; ব্যবহার করা হয়েছে । এর মানে হল header_left এর width ২৫০ পিক্সেল height ৮০ পিক্সেল background-color এই রং এর হবে এবং যেটি সবশেষে float:left; করা হয়েছে এটির কাজ হল এটাকে বাম দিকে চেপে রাখা । আর header_right অংশের প্রপার্টি তে একই লিখেছি শুধু মাত্র float:right; দিয়েছি যার কারনে এটি ডান দিকে চেপে আছে । এভাবেই মেইনলি ২ ভাগ ৩ ভাগ ৪ ভাগে একটা div কে ভাগ করা হয় ।
আপনাদের সুবিধার জন্য আমি এটার সম্পূর্ণ কোড নিচে দিয়ে দিলাম ।
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″ />
<title>CSS Traning</title>
<style type=”text/css”>
#wrapper{
width:950px;
margin:0 auto;
}
#header{
width:950px;
height:80px;
float:left;
background-color:#003300;
text-align:center;
font-size:24px;
color:#FFFFFF;
}
#header_left{
width:250px;
height:80px;
float:left;
background-color:#CCCC00;
}
#header_right{
width:700px;
height:80px;
float:right;
background-color:#0099CC;
}
#menu{
width:950px;
height:30px;
float:left;
background-color:#CC0033;
}
#menu ul{
margin:0;
padding:0;
}
#menu ul li{
list-style:none;
display:inline;
padding:0 15px;
}
#menu ul li a{
color:#FFFFFF;
text-decoration:none;
}
#menu ul li a:hover{
color:#E17100;
}
#contents{
width:950px;
height:430px;
float:left;
background-color:#999999;
}
#left{
width:250px;
height:430px;
float:left;
background-color:#555555;
}
#right{
width:700px;
height:430px;
float:right;
background-color:#660000;
}
#footer{
width:950px;
height:50px;
padding-top:30px;
float:left;
background-color:#FFCC99;
text-align:center;
}
</style>
</head>
<body>
<div id=”wrapper”>
<div id=”header”>
<div id=”header_left”>Logo</div>
<div id=”header_right”>Welcome To My Site</div>
</div>
<div id=”menu”></div>
<div id=”contents”>
<div id=”left”></div>
<div id=”right”></div>
</div>
<div id=”footer”></div>
</div>
</body>
</html>
এর আউট পুট আপনি নিচের মত দেখতে পাবেন ।
এখন যদি আপনি Welcome To My Site লেখাটিকে একটু নিচে নামাতে চান তাহলে আপনাকে যেটি করতে হবে টা হল header div এর padding ব্যবহার করা অথবা header_right div এর margin ব্যবহার করা । যেমন
#header_right{
width:700px;
height:80px;
float:right;
margin-top:20px;
}
এখানে margin-top:20px; দেওয়ার কারনে এটি উপর থেকে নিচের ২০ পিক্সেল নেমে যাবে । যেহেতু #header_right এই অংশের সিএসএস প্রপার্টি তে margin-top:20px; দেওয়া হয়েছে তাই শুধুমাত্র এটিই নিচের নামবে ।
আশা করি বুঝতে পেরেছেন । এবার আপনি Practice করুন । ধন্যবাদ ।
No comments:
Post a Comment