নেভিগেশন বার তৈরি করুন খুব সহজেই

আপনি যদি একজন ভালো ওয়েব ডিজাইনার হতে চান তাহলে আপনাকে ভালো গ্রাফিক্স ডিজাইন জানার পাশাপাশি HTML, CSS, Javascript এবং jquery জানতে হবে। picএকটা ভালো ডিজাইনের টেমপ্লেট তৈরির ক্ষেত্রে নেভিগেশনের ফাংশন এবং এর ডিজাইন খুবই গুরুত্ব সহকারে বিবেচনা করতে হয়। যে কেউ সমান্য চেষ্টা করলেই খুব সহজেই 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 করলে নিচের  মত দেখাবে।


অসীম কুমার

লেখক ঢাকা প্রকৌশল ও প্রযুক্তি বিশ্ববিদ্যায়(DUET)এ EEE তে লেখাপড়া করেন। তিনি টিউটোরিয়ালবিডি এবং টিউটোহোস্টের জন্য ইলেক্ট্রনিক্স, ওয়েব ডিজাইন ও ডেভলপমেন্ট এবং মাইক্রোকন্ট্রোলারের উপর টিউটরিয়াল এবং ই-বুক লিখেছেন।এছাড়া তিনি বিজ্ঞান প্রযুক্তি ডট কমে নিয়মিত লিখে থাকেন। তিনি তার প্রতিটা টিউটোরিয়াল এবং ব্লগে সৃজনশীলতাকে গুরুত্ব দিয়ে থাকেন।তার ভাষায় "আসুন আমরা আমাদের দেশীয় প্রযুক্তিকে সমৃদ্ধ করার চেষ্টা করি, উৎসাহিত করি সকল ভাল পদক্ষেপ এবং প্রচেষ্টাকে।উজ্জ্বল আগামি আমাদেরকে হাতছানি দিচ্ছে"।তাকে ফেসবুকে বন্ধু হিসেবে যোগ করতে পারেন। 

Tags:


ফেসবুকের মাধ্যমে মন্তব্য লিখুন

  3 comments for “নেভিগেশন বার তৈরি করুন খুব সহজেই

  1. November 11, 2012 at 9:47 am

    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 নেভিগেশন বার তৈরি করুন খুব সহজেই | টিউটোরিয়ালবিডি .

  2. May 7, 2012 at 6:27 am

    ডোমেন নেম কিনুন এলার্টপে একাউন্ট দিয়ে।

  3. May 6, 2012 at 4:10 am

    Download HD Video Songs from mediafire.com

Leave a Reply