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

16 Comments / ওয়েব ডিজাইন, সিএসএস (CSS) / By

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

আমরা একটু দেখে নেই আসলে আমরা কি তৈরি করতে যাচ্ছি।

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

এ ধরনের নেভিগেশন বার তৈরি করার জন্য অবশ্যই  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 লিখে লিংক যুক্ত করলে নেভিগেশন বারটি সঠিকভাবে কাজ করবে।

16 thoughts on “CSS দিয়ে তৈরি করি নিজের ওয়েব সাইটের আকর্ষনীয় নেভিগেশন বার !”

  4. টিউটো

    অসিমের এ টিউটরিয়ালটি খুবই কার্যকরী। আমি মনেকরি সিএসএস এ আমরাই সবচেয়ে বেশি লিখেছি। আমি সিএসএস এর এডভান্স কিছু লেখার সময় পাচ্ছি না। আপনি এগিয়ে গেলে ভাল হয়। আর জাভাস্ক্রিপ্টের দিকেও এগিয়ে চলছি…।

  5. ashim

    ধন্যবাদ টিউটো ভাই । জাভাস্ক্রিপ্টটাও অনেকের প্রত্যাশার বিষয় । অামিও অামার সাধ্য অনুযায়ী চেষ্টা করব।

    1. টিউটো

      @Bangladeshi Talks,আশা করবো অসিম এ মাব মেনুর উপর একটি পোস্ট করবেন। তিনি না করলে আমি মেনু ও সাব-মেনু বানানোর টিউটরিয়াল লিখবো আশা করি, ভাল থাকবেন, ধন্যবাদ।

  7. জনম

    আমি আপ্নার কোড হুবুহু কপি পেস্ট করেছি তবুও কাজ করছে না কেণ? বলবেন কি?

    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

    আর এখানে ছবি সংযুক্ত করে কিভাবে?

  8. জনম

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

    এখানে বোল্ড করা অংশগুলোর বানান সম্ভবত folder হবে তাই না। আপ্নার এই (হয়তো) অনাকাংখিত ভুল অনেকেরই সমস্যা করবে। যেমনটা প্রথম আমারও হয়েছে………..

    1. ashim

      @জনম, ধন্যবাদ জনম, অনাকাংখিত ভুলের জন্য দুঃখিত। ভুলটি সংশোধন করে দেয়া হয়েছে। কি এখন কি কাজ করছে।কোন সমস্যা হলে আবার বলবেন।

  11. TutorialMaker

    সাইটটি সুন্দর হয়েছে।লেখার স্টাইলটাও সুন্দর।ভাষা সহজ সরল ও প্রাঞ্জল্য হওয়ায় সহজে বুঝতে পারছি।সাইটের থিমটিও সুন্দর হয়েছে।লিংকগুলোতে সহজে ব্রাউজিং করা যাচ্ছে।পোষ্টগুলোও অনেক তথ্যে ভরপুর।ভিজিটরদের কাজে আসবে।এরকম তথ্যপূর্ন্য সাইট তৈরির জন্য ব্লগারকে আন্তরিক অভিনন্দন জানাচ্ছি।আশা করছি,সাইটটিতে আরো ভাল ভাল এবং তথ্যপূর্ন্য পোষ্ট পাব।সাইটটি বুকমার্ক করে রাখলাম।নিয়মিত ভিজিট করার চেষ্টা করব।আমি নিজেও একজন ভাল মানের ব্লগ রাইটার হওয়ার চেষ্টায় আছি।অনলাইনে আমার নিজের বেশ কয়েকটি সাইট রয়েছে।সেগুলোতে নিয়মিত ব্লগিং করার চেষ্টা করি।ব্লগিং করতে এবং অন্যের ব্লগ ভিজিট করে আরো বেশী বেশী জানতে ভাল লাগে।ভাল একটি ব্লগ পেলে অনেক ভাল লাগে।নিজের ব্লগের পাশাপাশি অন্যের ব্লগে ভিজিট করা ও কমেন্ট করে থাকি।তাছাড়া বাংলা ভাষায় অনলাইনে যারা ব্লগিং করেন,তাদেরকে আমি বেশ গুরূত্ব দিয়ে থাকি।মোট কথা,আমার জ্ঞানের পরিধি খুব অল্প,তাই এই ব্লগের মতো ব্লগগুলোতে ভিজিট করে কিছু শেখার চেষ্টা করি।ভাল কিছু করার চেষ্টায় আছি।বাংলাকে ভালবেসে বাংলায় ব্লগিং করার জন্য আপনাকে পূনরায় ধন্যবাদ জানাচ্ছি।

  12. xataka android

    Wow, awesome blog layout! How long have you been blogging for? you make blogging look easy. The overall look of your website is fantastic, let alone the content!. Thanks For Your article about CSS দিয়ে তৈরি করি নিজের ওয়েব সাইটের আকর্ষনীয় নেভিগেশন বার ! | টিউটোরিয়ালবিডি .

Leave a Comment