এমন অনেকেই আছেন যারা সুন্দর গ্রাফিক্স ডিজাইন করতে পারেন কিন্তু ওয়েব
প্রোগ্রামিং এ জ্ঞানের পরিধী খুব বেশি নয়, তারা চাইলেই সুন্দর PSD টেমপ্লেট
ডিজাইন করতে পারেন। কিন্তু PSD টেমপ্লেট কে HTML টেমপ্লেট এ রূপান্তর
করাটা তাদের পক্ষে সম্ভব হয়না। ফলে আসল কাজটাই
অসম্পূর্ণ থেকে যায়। ফ্রিল্যান্সিং সাইটসমূহে যে সকল কাজ পাওয়া যায় তার
মধ্যে PSD থেকে HTML রূপান্তর প্রজেক্টগুলো খুব অল্প সময়ে সম্পর্ণ করা যায়
এবং বাজেটও ভাল থাকে। তাই যে কেও মাত্র এক মাস কষ্ট করে Photoshop এর
পাশাপাশি HTML, CSS এবং Javascript শিখে লেগে যেতে পারেন HTML টেমপ্লেট
ডিজাইন এবং কোডিং করতে ।
একটি ওয়েব সাইটের জন্য নেভিগেশন বার এর গুরুত্ব কতখানি তা আর নতুন করে বলার প্রয়োজন নেই। HTML টেমপ্লেট কোডিং করার জন্য নেভিগেশন বার সম্পর্কে ভাল ধারণা থাকা প্রয়োজন।
আমরা একবার দেখে নেই আমাদের তৈরি নেভিগেশন বারটি কেমন।
প্রয়োজনীয় কার্যক্রম :
প্রথমে এখান থেকে images file টি ডাউনলোড করে Extract করে images file টিকে Navigation নামে একটি নতুন folder নিয়ে তার মধ্যে রাখতে হবে। images file টির মধ্যে তিনটি 1 pixel image রয়েছে, যেগুলো রিপিট করে পুরো নেভিগেশন বারটি ডিজাইন করা হবে।
প্রয়োজনীয় HTML CODE:
একটি ওয়েব সাইটের জন্য নেভিগেশন বার এর গুরুত্ব কতখানি তা আর নতুন করে বলার প্রয়োজন নেই। HTML টেমপ্লেট কোডিং করার জন্য নেভিগেশন বার সম্পর্কে ভাল ধারণা থাকা প্রয়োজন।
প্রথমে এখান থেকে images file টি ডাউনলোড করে Extract করে images file টিকে Navigation নামে একটি নতুন folder নিয়ে তার মধ্যে রাখতে হবে। images file টির মধ্যে তিনটি 1 pixel image রয়েছে, যেগুলো রিপিট করে পুরো নেভিগেশন বারটি ডিজাইন করা হবে।
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>প্রয়োজনীয় CSS CODE:
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>Black Style Navigation Bar</title>
</head>
<body>
<div id=”navigation”>
<ul>
<li><div> <a href=”#”> HOME</a></div></li><li ><a href=”#”>ABOUT US</a></li><li ><a href=”#”>WEBSITE DESIGN</a><li><a href=”#”>DOMAIN NAMES</a></li><li ><a href=”#”>CMS</a></li><li ><a href=”#”>CONTACT US</a> </li></ul>
</div>
</body>
</html>
*{margin:auto; padding: 0;}
body { background:#71c9cf;
margin-top:30px;}
#navigation{
background:url(images/navigation.png) repeat-x;
width:810px;
height:40px;
font-family:Tahoma;
font-size:14px;
color:#fff;
}
#navigation ul {
list-style-type:none;
margin-left:50px; }
#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:#fff;
}
#navigation ul li a:hover {
background: url(images/navov.png) repeat-x;
padding:10px 27px 13px 19px ;
margin:0px 1px 0px 1px
}
#home{
background:url(images/border.png) left no-repeat;}
যদি HTML এবং CSS কে আলাদা রাখতে হয় তাহলে,
HTML Code এর <head>………</head> এর মধ্যে
<link rel=”stylesheet” href=”style.css”/> যুক্ত করতে হবে।
এরপর একটা Notepad Open করে উপরের HTML
Code টুকু লিখে File মেনু থেকে Save as এ ক্লিক করে File name হিসেবে
index.html বা home.html অথবা যেকোন নাম.html দিয়ে, Save as type হিসেবে
All files সিলেক্ট করে এবং Encoding:UTF-8 দিয়ে এরপর Save বাটনে ক্লিক করতে
হবে।
একই নিয়মে CSS code টি style.css নামে
Save করতে হবে। index.html এবং style.css file দুটিকে Navigation folder
এর মধ্যে রাখতে হবে।
অথবা HTML এবং CSS কে একই file এ রাখতে হলে
HTML code এর <head>………</head> এর মধ্যে
<style>………….</style> ট্যাগ যুক্ত করে তার মধ্যে CSS code টুকু
রাখতে হবে, যেমন…..
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”><style type=”text/css”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>Black Style Navigation Bar</title>
*{margin:auto; padding: 0;}
body { background:#71c9cf;
margin-top:30px;}
#navigation{
background:url(images/navigation.png) repeat-x;
width:810px;
height:40px;
font-family:Tahoma;
font-size:14px;
color:#fff;
}
#navigation ul {list-style-type:none;#navigation ul li {
margin-left:50px; }
float:left;#navigation ul li a {
background: url(images/border.png) no-repeat;
background-position:right;
}
padding:10px 28px 10px 20px ;#navigation ul li a:hover {
display:block;
text-decoration:none;
text-align:center;
color:#fff;}
background: url(images/navov.png) repeat-x;
padding:10px 27px 13px 19px ;
margin:0px 1px 0px 1px
}
#home{background:url(images/border.png) left no-repeat;}
</style>
</head>
<div id=”navigation”>
<body>
<ul>
<li><div id=”home”> <a href=”#”> HOME</a></div></li>
<li ><a href=”#”>ABOUT US</a></li>
<li ><a href=”#”>WEBSITE DESIGN</a>
<li><a href=”#”>DOMAIN NAMES</a></li>
<li ><a href=”#”>CMS</a></li>
<li ><a href=”#”>CONTACT US</a> </li>
</ul>
</div>
</body>
</html>
এর পর index.html নামে save করে Mozilla firefox দিয়ে open করলে নিচের মত দেখাবে।
No comments:
Post a Comment