CSS দিয়ে তৈরি করি নিজের ওয়েব সাইটের আকর্ষনীয় নেভিগেশন বার

আমার একটা সুন্দর এবং জনপ্রিয় ওয়েব সাইট আছে! এই উক্তিটুকু কারো কাছে স্বপ্ন আবার অনেকের কাছেই সত্যি। কিন্তু কেমন ওয়েব সাইটকে আমরা সুন্দর বলব? এ প্রসঙ্গে প্রথমেই বলতে হয় যে ওয়েব সাইটের সুন্দর, পরিচ্ছন্ন তথ্যসমৃদ্ধ এবং আকর্ষনীয় নেভিগেশন বার রয়েছে । আমার বিশ্বাস এ ব্যপারে অন্য কারা দ্বিমত থাকার কথা নয়।
শুধু তাই নয় একটি ভালো নেভিগেশন বার যে কোন ওয়েব সাইটকে সার্চ ইন্জিনে সহজে খুজে পেতেও গুরুত্বপূণর্ণ ভুমিকা পালন করে। কিন্তু কিভাবে আমরা একটা ভাল নেভিগেশন বার তৈরি করতে পারি ? অনেকে ভাবছেন কাজটা হয়তবা কঠিন আসলেই কি তাই ! আমরা এই টিউটোরিয়ালটি ভালভাবে প্রত্যক্ষ করার পর এর উত্তর খুজব।
আমরা একটু দেখে নেই আসলে আমরা কি তৈরি করতে যাচ্ছি।

প্রাথমিক প্রস্তুতি :

এ ধরনের নেভিগেশন বার তৈরি করার জন্য অবশ্যই HTML এবং CSS এর উপর কিছুটা ধারণা থাকা আবষ্যক । এ ব্যপারে আমার HTMLপর্ব- এক HTMLপর্ব- দুই HTMLপর্ব- তিন HTMLপর্ব- চার HTMLপর্ব-পাঁচ HTML পর্ব-৬ এবং এখান থেকে CSS সেই চাহিদাটুকু পূরণ করবে ।

প্রথম ধাপ:

প্রথমে Desktop এ একটা Filder নিয়ে নাম দেই Navegation । Navegation Filder এর মধ্যে আবার একটা Filder নিয়ে নাম দেই images । এখন নিচের ov.gif এবং un.gif 1 pixel এর image দুটো copy করে images Filder এর মধ্যে রাখি ।

দ্বিতীয় ধাপ:

এখন আমরা Navegation Filder এর মধ্যে একটা নোটপ্যাড open করে নিচের code টুকু লিখি।


<html >

<head>

<title>Navigation bar.</title>

</head>

<body>

<div>

<div> <a href="#">Home</a></div>

<div> <a href="#">About us</a></div>

<div> <a href="#">Electronics</a></div>

<div> <a href="#">Tutorials</a></div>

<div> <a href="#">News</a></div>

<div> <a href="#">Technology</a></div>

<div> <a href="#">Template</a></div>

<div> <a href="#">More</a></div>

</div>

</body>

</html>

এখন file মেনু থেকে Save as এ ক্লিক করে File name: index.html , Save as type : All files, দিয়ে save করি । save করা index.html ফাইলটি Internet explorer দিয়ে open করলে নিচের মত দেখাবে।

তৃতীয় ধাপ:

অমরা এখন index.html এর head ট্যাগের মধ্যে css যুক্ত করব। এ জন্য আমরা head ট্যাগের মধ্যে নিচের code টুকু লিখি।


<style>

body{background:#333;}

.navbar{

margin:0% 15% 0% 15%;

width:822px;

height:30px;

font-family:Verdana, Geneva, sans-serif;

font-size:14px;

line-height:30px;

font-weight:bold;

border:1px solid #000 ;

background:url(images/un.gif) repeat-x ;

}

.button a{

float:left;

width:100px;

height:30px;

color:#000;

text-decoration:none;

text-align:center;}

.button a:hover{

float:left;

width:100px;

height:30px;

color: #C00;

text-decoration:none;

text-align:center;

background:url(images/ov.gif) repeat-x;

}

</style>

তাহলে আমাদের সম্পূর্ণ code হচ্ছে ,


<html >

<head>

<title>Navigation bar.</title>

<style>

body{background:#333;}

.navbar{

margin:0% 15% 0% 15%;

width:822px;

height:30px;

font-family:Verdana, Geneva, sans-serif;

font-size:14px;

line-height:30px;

font-weight:bold;

border:1px solid #000 ;

background:url(images/un.gif) repeat-x ;

}

.button a{

float:left;

width:100px;

height:30px;

color:#000;

text-decoration:none;

text-align:center;}

.button a:hover{

float:left;

width:100px;

height:30px;

color: #C00;

text-decoration:none;

text-align:center;

background:url(images/ov.gif) repeat-x;

}

</style>

</head>

<body>

<div>

<div> <a href="#">Home</a></div>

<div> <a href="#">About us</a></div>

<div> <a href="#">Electronics</a></div>

<div> <a href="#">Tutorials</a></div>

<div> <a href="#">News</a></div>

<div> <a href="#">Technology</a></div>

<div> <a href="#">Template</a></div>

<div> <a href="#">More</a></div>

</div>

</body>

</html>

এখন save করে index.html ফাইলটি Internet explorer দিয়ে open করলে আমরা পূর্ণাঙ্গ নেভিগেশন বারটি আমরা দেখতে পাব।
*** আমরা যেখানে # চিহ্ন ব্যবহার করেছি সেখানে আমরা প্রয়োজনীয় পেজের url লিখে লিংক যুক্ত করলে নেভিগেশন বারটি সঠিক
ভাবে কাজ করবে।