লেখক:আমার একটা সুন্দর এবং জনপ্রিয় ওয়েব সাইট আছে! এই উক্তিটুকু কারো কাছে স্বপ্ন আবার অনেকের কাছেই সত্যি। কিন্তু কেমন ওয়েব সাইটকে আমরা সুন্দর বলব? এ প্রসঙ্গে প্রথমেই বলতে হয় যে ওয়েব সাইটের সুন্দর, পরিচ্ছন্ন তথ্যসমৃদ্ধ এবং আকর্ষনীয় নেভিগেশন বার রয়েছে । আমার বিশ্বাস এ ব্যপারে অন্য কারা দ্বিমত থাকার কথা নয়। শুধু তাই নয় একটি ভালো নেভিগেশন বার যে কোন ওয়েব সাইটকে সার্চ ইন্জিনে সহজে খুজে পেতেও গুরুত্বপূণর্ণ ভুমিকা পালন করে। কিন্তু কিভাবে আমরা একটা ভাল নেভিগেশন বার তৈরি করতে পারি ? অনেকে ভাবছেন কাজটা হয়তবা কঠিন আসলেই কি তাই ! আমরা এই টিউটোরিয়ালটি ভালভাবে প্রত্যক্ষ করার পর এর উত্তর খুজব।
আমরা একটু দেখে নেই আসলে আমরা কি তৈরি করতে যাচ্ছি।
প্রাথমিক প্রস্তুতি :
এ ধরনের নেভিগেশন বার তৈরি করার জন্য অবশ্যই HTML এবং CSS এর উপর কিছুটা ধারণা থাকা আবষ্যক । এ ব্যপারে আমার HTMLপর্ব- এক HTMLপর্ব- দুই HTMLপর্ব- তিন HTMLপর্ব- চার HTMLপর্ব-পাঁচ HTML পর্ব-৬ এবং এখান থেকে CSS সেই চাহিদাটুকু পূরণ করবে ।
প্রথম ধাপ:
প্রথমে Desktop এ একটা Folder নিয়ে নাম দেই Navegation । Navegation Folder এর মধ্যে আবার একটা Folder নিয়ে নাম দেই images । এখন নিচের ov.gif এবং un.gif 1 pixel এর image দুটো copy করে images Folder এর মধ্যে রাখি ।
দ্বিতীয় ধাপ:
এখন আমরা Navegation Folder এর মধ্যে একটা নোটপ্যাড 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 লিখে লিংক যুক্ত করলে নেভিগেশন বারটি সঠিকভাবে কাজ করবে।
আরএসএস ফিড সাবক্রাইব
একেবারে ফাটাফাটি…..ধন্যবাদ।
ধন্যবাদ!
বা, খুব সুন্দর তো……….. হি: হি: হি:
.-= সলিউশন ফর অল´র শেষ পোস্ট: >>“বিশেষ ঘোষনা” =-.
অসিমের এ টিউটরিয়ালটি খুবই কার্যকরী। আমি মনেকরি সিএসএস এ আমরাই সবচেয়ে বেশি লিখেছি। আমি সিএসএস এর এডভান্স কিছু লেখার সময় পাচ্ছি না। আপনি এগিয়ে গেলে ভাল হয়। আর জাভাস্ক্রিপ্টের দিকেও এগিয়ে চলছি…।
ধন্যবাদ টিউটো ভাই । জাভাস্ক্রিপ্টটাও অনেকের প্রত্যাশার বিষয় । অামিও অামার সাধ্য অনুযায়ী চেষ্টা করব।
ভাইয়া, কিভাবে সাবমেনু যোগ করতে হয় এর উপর একটা পোস্ট দিবেন?? আর রংচটা নেভিগেশন তৈরী করবো কিভাবে??
.-= Bangladeshi Talks´র শেষ পোস্ট: >>Winners of Meril-Prothom Alo Award 2009, Bangladesh =-.
@Bangladeshi Talks,আশা করবো অসিম এ মাব মেনুর উপর একটি পোস্ট করবেন। তিনি না করলে আমি মেনু ও সাব-মেনু বানানোর টিউটরিয়াল লিখবো আশা করি, ভাল থাকবেন, ধন্যবাদ।
আমি আপ্নার কোড হুবুহু কপি পেস্ট করেছি তবুও কাজ করছে না কেণ? বলবেন কি?
Navigation bar.
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;
}
Home
About us
Electronics
Tutorials
News
Technology
Template
More
আর এখানে ছবি সংযুক্ত করে কিভাবে?
প্রথমে Desktop এ একটা Filder নিয়ে নাম দেই Navegation । Navegation Filder এর মধ্যে আবার একটা Filder নিয়ে নাম দেই images । এখন নিচের ov.gif এবং un.gif 1 pixel এর image দুটো copy করে images Filder এর মধ্যে রাখি ।
এখানে বোল্ড করা অংশগুলোর বানান সম্ভবত folder হবে তাই না। আপ্নার এই (হয়তো) অনাকাংখিত ভুল অনেকেরই সমস্যা করবে। যেমনটা প্রথম আমারও হয়েছে………..
@জনম, ধন্যবাদ জনম, অনাকাংখিত ভুলের জন্য দুঃখিত। ভুলটি সংশোধন করে দেয়া হয়েছে। কি এখন কি কাজ করছে।কোন সমস্যা হলে আবার বলবেন।