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

Awesome! টিউনস

সকল Awesome! টিউনস

এ মাসের টেকটিউনস সংবাদঃ ডিসেম্বর-২০০৯

রনি পারভেজ

এক সাথে যত খুশি ততো ই-মেইল চেক করুন ডেস্কটপ থেকে! প্রয়োজনীয় না হলে মূল্য ফেরত

হাসান যোবায়ের

হয়ে উঠুন পেনড্রাইভ ভাইরাস/ম্যালওয়্যার কিলার

এস বি মেহদি

ওয়েবসাইট তৈরী এবং হোস্টিং এর কয়েকটি ফ্রি অনলাইন টুল

দুঃসাহসী টিনটিন

2,533 দেখা 3 টিউমেন্টস জোসস

টিউন বিভাগ ওয়েব ডেভেলপমেন্ট

প্রকাশিত

Level 0

টিউটোহোস্ট

162 টিউনস 69 টিউমেন্টস 1 ফলোয়ার

টিউমেন্ট ফলো জোসস

আপনি যদি একজন ভালো ওয়েব ডিজাইনার হতে চান তাহলে আপনাকে ভালো গ্রাফিক্স ডিজাইন জানার পাশাপাশি 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> এর মধ্যে

</p>
<p style="text-align: justify;"><link rel="stylesheet" type="text/css" href="style.css"/></p>
<p style="text-align: justify;">

যুক্ত করতে হবে।

এরপর একটা 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>

.............................................................................................................

পোস্টটির মূল লেখক টিউটোহোস্ট টিম সদস্য অসিম কুমার

পোস্টটি ইতোপূর্বে এখানে প্রকাশিত

টিউমেন্ট ফলো জোসস

Level 0

টিউটোহোস্ট

আমি টিউটোহোস্ট। বিশ্বের সর্ববৃহৎ বিজ্ঞান ও প্রযুক্তির সৌশল নেটওয়ার্ক - টেকটিউনস এ আমি 11 বছর 11 মাস যাবৎ যুক্ত আছি। টেকটিউনস আমি এ পর্যন্ত 162 টি টিউন ও 69 টি টিউমেন্ট করেছি। টেকটিউনসে আমার 1 ফলোয়ার আছে এবং আমি টেকটিউনসে 0 টিউনারকে ফলো করি।

টিউটোহোস্ট বাংলাদেশের একটি জনপ্রিয় ওয়েব হোস্টিং সেবাদানকারী প্রতিষ্ঠান। যুক্তরাস্ট্র এবং যুক্তরাজ্য ভিত্তিক দ্রুতগতির বেশ কিছু ওয়েব সারভারে গুরুত্বপূর্ণ তথ্যগুলো নিরাপদে সংরক্ষণ করা হয়। আমরা এদেশে ২৪ ঘন্টা এবং বছরে ৩৬৫ দিন অনলাইন এবং ফোন সাপোর্টের ব্যবস্থা রেখেছি। বাংলেদশসহ অনেক দেশের জনপ্রিয় ওয়েবসাইট আমাদের সারভার ব্যবহার করছে।