আপনি যদি একজন ভালো ওয়েব ডিজাইনার হতে চান তাহলে আপনাকে ভালো গ্রাফিক্স ডিজাইন জানার পাশাপাশি HTML, CSS, Javascript এবং jquery জানতে হবে। 
একটা ভালো ডিজাইনের টেমপ্লেট তৈরির ক্ষেত্রে নেভিগেশনের ফাংশন এবং এর ডিজাইন খুবই গুরুত্ব সহকারে বিবেচনা করতে হয়। যে কেউ সমান্য চেষ্টা করলেই খুব সহজেই HTML, CSS শিখতে পারেন, আর একটু সময় নিয়ে Javascript এবং jquery শিখতে পারলে খুব ভালো টেমপ্লেট ডিজাইন করা যায়। আজ আমরা শুধুমাত্র HTML এবং CSS দিয়েই একটা সহজ কিন্তু সুন্দর নেভিগেশন বার তৈরির চেষ্টা করব।
একবার দেখে নেয়া যাক আমাদের তৈরি নেভিগেশন বারটি দেখতে কেমন হবে।
আমাদের নেভিগেশন বারটি তৈরি করতে তিনটি সরু ইমেজের প্রয়োজন হবে, ইমেজ তিনটি এখান থেকে ডাউনলোড করুন। Zip ফাইলটি Extract করলে images নামে একটা ফোল্ডার পাওয়া যাবে।nav নামে নতুন একটা ফোল্ডার তৈরি করে images নামের ফোল্ডারটা এর মধ্যে রাখতে হবে।
প্রয়োজনীয় HTML CODE
<html>
<head>
<title>Navigation bar</title>
</head>
<body>
<div id=”navigation”>
<ul>
<li><div id=”home”> <a href=”#”> HOME</a></div></li>
<li ><a href=”#”>ABOUT US</a></li>
<li ><a href=”#”>HTML</a>
<li><a href=”#”>CSS</a></li>
<li ><a href=”#”>PHP </a></li>
<li ><a href=”#”>CONTACT US</a> </li>
</ul>
</div>
</body>
</html>
প্রয়োজনীয় CSS CODE
*{margin:auto; padding:auto;}
body { background: #C99}
#navigation{background:url(images/navigation.png) repeat-x;
margin-top:20px;
width:650px;
height:40px;
font-family:Tahoma;
font-size:14px;
}
#navigation ul {
list-style-type:none;
margin-left:auto;}
#navigation ul li {
float:left;
background: url(images/border.png) no-repeat;
background-position:right;
}
#navigation ul li a {
padding:10px 28px 10px 20px ;
display:block;
text-decoration:none;
text-align:center;
color: #F69;
font-weight:bold;
}
#navigation ul li a:hover {
background: url(images/navov.png) repeat-x;
padding:10px 27px 13px 19px ;
margin:0px 1px 0px 1px;
color:#F3C;
}
#home{background:url(images/border.png) left no-repeat;}
আমরা যদি CSS CODE কে এক্সটার্নাল স্টাইল শীটে রাখতে চাই তাহলে,
HTML Code এর <head>………</head> এর মধ্যে
<link rel=”stylesheet” type=”text/css” href=”style.css”/>
যুক্ত করতে হবে।
এরপর একটা Notepad Open করে উপরের HTML Code টুকু লিখে File মেনু থেকে Save as এ ক্লিক করে File name হিসেবে index.html দিয়ে, Save as type হিসেবে All files সিলেক্ট করে এবং Encoding:UTF-8 দিয়ে এরপর Save বাটনে ক্লিক করতে হবে।
অনুরূপভাবে CSS code টি style.css নামে Save করতে হবে। index.html এবং style.css file দুটিকেই nav folder টির মধ্যে রাখতে হবে।
আমরা যদি আমরা যদি CSS CODE কে এমবেডেড স্টাইল শীটে রাখতে চাই তাহলে, নিচের কোডের মত HTML code এর <head>………</head>ট্যাগের মধ্যে <style>………….</style> ট্যাগ যুক্ত করে তার মধ্যে CSS CODE লেখতে হবে।
HTML এ এমবেডেড CSS CODE
<html>
<head>
<title>Navigation bar</title>
<style>
*{margin:auto; padding:auto;}
body { background: #C99}
#navigation{background:url(images/navigation.png) repeat-x;
margin-top:20px;
width:650px;
height:40px;
font-family:Tahoma;
font-size:14px;
}
#navigation ul {
list-style-type:none;
margin-left:auto;}
#navigation ul li {
float:left;
background: url(images/border.png) no-repeat;
background-position:right;
}
#navigation ul li a {
padding:10px 28px 10px 20px ;
display:block;
text-decoration:none;
text-align:center;
color: #F69;
font-weight:bold;
}
#navigation ul li a:hover {
background: url(images/navov.png) repeat-x;
padding:10px 27px 13px 19px ;
margin:0px 1px 0px 1px;
color:#F3C;
}
#home{background:url(images/border.png) left no-repeat;}
</style>
</head>
<body>
<div id=”navigation”>
<ul>
<li><div id=”home”> <a href=”#”> HOME</a></div></li>
<li ><a href=”#”>ABOUT US</a></li>
<li ><a href=”#”>HTML</a>
<li><a href=”#”>CSS</a></li>
<li ><a href=”#”>PHP </a></li>
<li ><a href=”#”>CONTACT US</a> </li>
</ul>
</div>
</body>
</html>
সর্বশেষে index.html নামে save করে Mozilla firefox দিয়ে open করলে নিচের মত দেখাবে।
Download HD Video Songs from mediafire.com
ডোমেন নেম কিনুন এলার্টপে একাউন্ট দিয়ে।
Wow, amazing blog layout! How long have you been blogging for? you make blogging look easy. The overall look of your website is magnificent, let alone the content!. Thanks For Your article about নেà¦à¦¿à¦—েশন বার তৈরি করà§à¦¨ খà§à¦¬ সহজেই | টিউটোরিয়ালবিডি .