নেভিগেশন বারের div উপাদানের ডিজাইন
নেভিগেশন বার এখন শুধুমাত্র লিংক প্রকাশের জন্য ব্যবহার হয় না। এটা ওয়েব সাইটের সৌন্দর্যকে অনেকাংশে বর্ধিত করে।নেভিগেশন বারের সাধারণ গঠন <div id="navigation"><ul><li><a></a></li><li><a></a></li></ul></div> এর অনুরূপ। প্রথমেই এজন্য css দ্বারা div এর আইডি সিলেক্টর # navigation এর মাধ্যমে সম্পূর্ণ নেভিগেশন বারের width, height, font-family, font-size, background ইত্যাদি নির্ধারণ করে দেয়া হয়।
অনুশীলন প্রজেক্ট
<html>
<head>
<title> www.tutohost.com</title>
<style>
*{margin:auto; padding:auto;}
body { background: #C99}
#navigation{background:url(images/navigation.png) repeat-x;
margin-top:20px;
width:600px;
height:40px;
font-family:Tahoma;
font-size:14px;}
</style>
</head>
<body >
<div id="navigation">
<ul>
<li><a href="#"> HOME</a></li>
<li ><a href="#">ABOUT US</a></li>
<li><a href="#">CONTACT US</a></li>
<li><a href="#">BLOG</a></li>
<li><a href="#">FORAM</a></li></ul>
</div>
</body>
</body>
</html>
একটা নোটপ্যাড open করে উপরের code টুকু লিখে file মেনু থেকে Save as এ ক্লিক করে File name: index.html , Save as type : All files, দিয়ে save করে index.html ফাইলটি Mozilla Firefox দিয়ে open করলে নিচে প্রদর্শিত ছবির মত দেখাবে।
তিনি ইলেকট্রিক্যাল ইঞ্জিনিয়ারিং এ লেখাপড়া করছেন। টিউটোরিয়ালবিডি ও বিজ্ঞানপ্রযুক্তি ব্লগে তিনি ইলেক্ট্রনিক্স সহ বিভিন্ন টেকনোলজি বিষয়ে লিখে থাকেন। বর্তমানে তিনি লেখাপড়ার পাশাপাশি টিউটোহোস্টে কর্মরত আছেন।
কপি রাইট © ২০১১থেকে যতদিন চলবে সর্বস্বত্ত্ব সংরক্ষিত