কিভাবে ধাপে ধাপে আকর্ষণীয় মেনুবার তৈরি করতে হয়
ধারাবাহিক প্রফেশনাল ওয়েব ডিজাইন XHTML (HTML+CSS = XHTML)-১ এর পর থেকে শুরু করছি অতএব ধারাবাহিক প্রফেশনাল ওয়েব ডিজাইন XHTML (HTML+CSS = XHTML)-১ আবার ও একবার ভাল করে দেখে নিন।
প্রথেমে আপনি ধারাবাহিক প্রফেশনাল ওয়েব ডিজাইন XHTML (HTML+CSS = XHTML)-১ এর index.html এবং style.css ড্রিমওয়েভার দিয়ে ওপেন করেন, আবার দেখুন গত coding এ style.css এ header ছিল নিচের মত
.header{
margin:0px;
padding:0px;
width:960px;
height:50px;
background:#FFFF33;
color:#CC3300;
text-align:center;
font-size:24px;
line-height:50px;
font-weight:bold;
}
এখন এর height:50px; 50 থেকে 100 করে দিবো, অতএব line-height:50px; ও 100 করতে হবে ( কারন আগেই ব্যাখ্যা করেছি ) ।
অতএব header হবে নিচের মত
.header{
margin:0px;
padding:0px;
width:960px;
height:100px;
background:#FFFF33;
color:#CC3300;
text-align:center;
font-size:24px;
line-height:100px;
font-weight:bold;
}
আবার body খেয়াল করুন নিচে
body{
margin:0px;
padding:0px;
}
আমরা body একটা color দিবো নিচে দেখুন
body{
margin:0px;
padding:0px;
background:#99FF99;
}
আগে যা ছিল সেটাই শুধু background:#99FF99 যোগ করেছি।
এবার wrapper দেখুন
#wrapper{
width:960px;
height:600px;
background:#00FF33;
margin:0 auto;
}
আপনাদের বঝানর জন্য আগের দিন ইচ্ছা মত background:#00FF33; দিয়েছিলাম কিন্তু প্রফেশনালি background হালকা কালার বা সাদা হবে, আমরা এখন সাদা ব্যবহার করবো । এবং height 700px করে দিবো, অতএব wrapper হবে নিচের মত
#wrapper{
width:960px;
height:700px;
background:#FFFFFF;
margin:0 auto;
}
সব মিলিয়ে আমাদের style.css হবে নিচের মত
#wrapper{
width:960px;
height:700px;
background:#FFFFFF;
margin:0 auto;
}
body{
margin:0px;
padding:0px;
background:#99FF99;
}
.header{
margin:0px;
padding:0px;
width:960px;
height:50px;
background:#FFFF33;
color:#CC3300;
text-align:center;
font-size:24px;
line-height:50px;
font-weight:bold;
}
এবং index.html অপরিবর্তিত থাকে নিচের মত
<!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>www.prowebdesign4u.blogspot.com</title>
<link
rel="stylesheet" type="text/css" href="style.css"
/>
</head>
<body>
<div id="wrapper">
<div class="header">
My First Website
</div>
</div>
</body>
</html>
এবার Ctrl + S দিয়ে page টি save করুন index.html ও style.css দুটোই এবং Run করুন, তবে আপনি বারবার Run নাকরে Reload করতে পারেন, এটা সহজ হবে। Web page Reload করলে নিচের চিত্রের মত দেখাবে........................
এবার আসুন আমরা একটি আকর্ষণীয় মেনুবার তৈরি করি
মেনুবার টি হবে wrapper এর ভিতরে কিন্তু header এর পরে, অতএব index.html এ menubar div
তৈরি করবো নিচের মত
<body>
<div id="wrapper">
<div class="header">
My First Website
</div>
<div class="menubar">
</div>
</div>
</body>
খেয়াল করুন<div class="menubar"> header div এর পর কিন্তু wrapper এর ভিতর
এবার আগের নিয়মে menubar কপি করে style.css এর ভিতর header এর পর একটি . ( ডট ) দিয়ে পেস্ট করুন, {, দিন enter দিন } close করুন, এবার { এরপর mouse নিয়ে enter দিন একটা Tab দিয়ে coding করুন । নিচের মত coding করুন
.menubar{
width:960px;
height:50px;
background:#999999;
}
এবার Ctrl + S দিয়ে page টি save করুন index.html ও style.css দুটোই এবং Run করুন, তবে আপনি বারবার Run নাকরে Reload করতে পারেন, এটা সহজ হবে। Web page Reload করলে নিচের চিত্রের মত দেখাবে........................
এখন menubar এ list আকারে লিখতে হবে , লিখার জন্য আমরা unorder list এর HTML ট্যাগ <ul> </ul> ব্যবহার করবো । এই ট্যাগ টি দিতে হবে menubar div এর ভিতর নিচে খেয়াল করুন
প্রথমে menubar এর ভিতর <ul> দিয়ে enter দিয়ে সেটা close করবো
<div
class="menubar">
<ul>
</ul>
</div>
এখন <ul> এর ভিতর <li> </li> ট্যাগ ব্যবহার করে menubar এর লিস্ট দিবো,
এর জন্য প্রথমে <ul> এর ভিতর
নিচের মত coding করব
<ul>
<li><a href="#">Home</a></li>
</ul>
এবার যে কয়টা দরকার সে কয়টা copy করে paste করবো
ধরুন আমরা Home, About Us, FAQ, Services, Contact US এই 5 টি লিস্ট menubar এর ভিতর লিখব । অতএব আরও 4 বার <li><a
href="#">Home</a></li> coding টি copy করে পরপর paste করবো, করলে নিচের মত দেখাবে
<ul>
<li><a href="#"> </a></li>
<li><a href="#"> </a></li>
<li><a href="#"> </a></li>
<li><a href="#"> </a></li>
<li><a href="#"> </a></li>
</ul>
এখন anchor ট্যাগের > < চিহ্নের ভিতর Home, About Us, FAQ, Services, Contact US লেখা গুলো লিখে দিবো, লিখলে index.html টি নিচের মত দেখাবে
<body>
<div id="wrapper">
<div class="header">
<h1>OUR FIRST WEB PAGE</h1>
</div>
<div class="menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About
Us</a></li>
<li><a href="#">FAQ</a></li>
<li><a
href="#">Services</a></li>
<li><a href="#">Contact
US</a></li>
</ul>
</div>
</div>
</body>
অনেক বড় তাই body আগের default coding ও পরের coding দেখাই নি।
এবার save করে ওয়েব পেজ Reload করে দেখুন লিস্ট গুলো load হয়েছে কিন্তু অগোছালো, এইগুলো ঠিক করতে আমাদের ধাপে ধাপে style.css এ coding করতে হবে।
এখন style.css menubar এর নিচে .menubar ul দিয়ে coding করুন নিচের মত
.menubar ul{
margin:0px;
padding:0px;
}
এবার save করে ওয়েব পেজ Reload করে দেখুন কিছুতা পরিবর্তন হয়েছে বোঝার চেষ্টা করুন কিসের জন্য কি
হয়েছে আপনি বুঝতে পারবেন।
এখন .menubar ul নিচে নিচের মত coding করুন
.menubar ul li{
list-style-type:none;
float:left;
width:150px;
height:50px;
text-align:center;
line-height:50px;
background:#999999;
}
Coding বিশ্লেষণঃ .menubar ul li এর অর্থ .menubar এর ভিতর ul এবং ul ভিতর যে li আছে তার style কেমন হবে।
এবার খায়াল করুন
list-style-type:none; বৃত্তকার চিহ্ন দূর করত্ত;
float:left; লিস্ট গুলো পাশাপাশি আনতে;
width:150px; প্রতিটা লিস্ট ঘর কতটুকু যায়গা ব্যবহার করবে;
height:50px; প্রতিটা লিস্ট ঘরের উচ্চতা কত হবে;
text-align:center; পাশাপাশি মাঝে আনতে;
line-height:50px; উপর নিচ বরাবর মাঝে আনতে;
background:#999999; একটা কালার দিতে;
এবার save করে ওয়েব পেজ Reload করে দেখুন ।
এরপর .menubar ul li নিচে coding করুন নিচের মত
.menubar ul li:hover{
cursor:pointer;
background:#FFFFFF;
}
এবার save করে ওয়েব পেজ Reload করে দেখুন । আপনার mouse টা মেনুবারের উপর নিয়ে দেখুন hover এর কারিশমা ।
এবার আর ও সুন্দর ও আকর্ষণীয় করতে .menubar ul
li:hover নিচে লিখুন
.menubar ul li a{
text-decoration:none;
color:#FFFFFF;
display:block;
font-size:18px;
}
এবার save করে ওয়েব পেজ Reload করে দেখুন । আপনার mouse টা মেনুবারের উপর নিয়ে দেখুন কিছু পরিবর্তন হয়েছে । টেনশন নিবেন না .menubar ul li a এর hover দিতে হবে নিচে দেখুন
.menubar ul li a:hover{
color:#000000;
font-size:24px;
}
এবার save করে ওয়েব পেজ Reload করে দেখুন ।
যদি না হয় তা হলে খেয়াল করুন সব
মিলিয়ে index.html হবে নিচের মত
<!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>www.prowebdesign4u.blogspot.com</title>
<link
rel="stylesheet" type="text/css" href="style.css"
/>
</head>
<body>
<div id="wrapper">
<div class="header">
My First Website
</div>
<div class="menubar">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About
Us</a></li>
<li><a href="#">FAQ</a></li>
<li><a
href="#">Services</a></li>
<li><a href="#">Contact
US</a></li>
</ul>
</div>
</div>
</body>
</html>
এবং সব মিলিয়ে style.css হবে নিচের মত
#wrapper{
width:960px;
height:700px;
background:#FFFFFF;
margin:0 auto;
}
body{
margin:0px;
padding:0px;
background:#99FF99;
}
.header{
margin:0px;
padding:0px;
width:960px;
height:100px;
background:#FFFF33;
color:#CC3300;
text-align:center;
font-size:24px;
line-height:100px;
font-weight:bold;
}
.menubar{
width:960px;
height:50px;
background:#999999;
}
.menubar ul{
margin:0px;
padding:0px;
}
.menubar ul li{
list-style-type:none;
float:left;
width:150px;
height:50px;
text-align:center;
line-height:50px;
background:#999999;
}
.menubar ul li:hover{
cursor:pointer;
background:#FFFFFF;
}
.menubar ul li a{
text-decoration:none;
color:#FFFFFF;
display:block;
font-size:18px;
}
.menubar ul li
a:hover{
color:#000000;
font-size:24px;
}
চেক করে দেখুন আপনার ভুল হলে প্রথম
থেকে আবার নিয়মানুসারে ধাপে ধাপে করতে থাকুন ।
এবার save করে ওয়েব পেজ Reload করে দেখুন । সব ঠিক থাকে নিচের চিত্রের মত দেখা যাবে..................
এটা শুধু ইমেজ আপনারা hover নিজেরা চেক করুন ।
মনে রাখবেন যে Dreamaeaver এ আরও অনেক অপশন show করে, সে গুলো ব্যবহার করে বারবার practice করুন ও বুঝতে চেষ্টা করুন কিসের জন্য
কি হল।
বারবার practice ই আপনাকে প্রফেশনাল ওয়েব ডিজাইনের বানিয়ে দিবে। তাছাড়া ড্রিমওয়েভার
এর আরও অনেক কিছু শিখতে এটা নিয়ে নাড়াচাড়া করুন।
বিশেষ কিছু কথা
প্রফেশনাল ভাবে coding না করলে যখন আপনি একটি অয়েবপেজ
বানাবেন তখন coding গুলিয়ে ফেলবেন,
আর নিয়মমাফিক করলে ভুল হবে না, হলেও খুব সহজে সনাক্ত করতে পারবেন।
বিশেষ কিছু ভুল
Index.html এবং style.css দুটোই save করতে ভুলবেন না না। এজন্য কিছু লেখলেই Ctrl + S দিয়ে save করে দেবেন সাথে সাথে, আবার Run করার আগে Index.html এবং style.css দুটোই save করে নিবেন।
খেয়াল রাখবেন id দিলে stylsheet এ # আর class দিলে . (ডট)। coding ০ ( শূন্য ) কে o (ও) দিবেন না। style.css এ প্রতিটি coding আর শেষে ; দিতে ভুল করবেন না। index.html এ div শুরু করেই ক্লোজ করবেন ( বলে রাখি div মানে ঘর, আর আধুনিক ওয়েব পেজের মূল ভিত্তি div), style.css এ নিয়মমাফিক সেকেন্ড ব্রাকেট আগেই close করবেন।
Index.html এ style.css call (সংযোগ) করতে ভুল করবেননা। সম্পূর্ণ
পোস্ট টা মন দিয়ে পরতে ভুল করবেন না। প্রত্যেক টা কথা প্রয়োজনীয় যদি আপনি জানেন
তারপর ও পুরো পোস্ট টা পড়বেন। হয়ত আপনার মনে একটা প্রশ্ন আস্তে পারে সেটা হয়ত কয়েক
লাইন পরে ব্যাখ্যা করা বা শেষে ব্যাখ্যা করা, আর না বুঝলে সমস্যা থাকলে comment post করবেন । আমি অনলাইননে skype বা email বা কমেন্ট করে help করবো।
আগামী পোস্ট ধারাবাহিক প্রফেশনাল ওয়েব ডিজাইন XHTML ( HTML+CSS = XHTML)-৩ এর পর থেকে শুরু করবো, খুব দ্রুতই পোস্ট টা
দিব।
আপনাদের সবাইকে অনেক অনেক ধন্যবাদ, আমার ব্লগের সাথেই থাকুন।
আরও জানতে visit করুন প্রফেশনাল ওয়েব ডিজাইন।
কোন সমস্যা হলে বা প্রশ্ন থাকলে ব্লগে দয়াকরে comment post করে জানাবেন।
