পিএসডি থেকে এক্সএইচটিএমএল টিউটোরিয়াল – পর্ব ৩ (PSD to HTML/XHTML)

0
359

এবার main_background নামে একটা ডিভ নিয়েছি,কারন পিএসডিতে দেখুন সবার নিচে সাদা ব্যাকগ্রাউন্ডের উপরে একটা নীল রংয়ের ব্যাকগ্রাউন্ড আছে।এই ডিভে শুধু main_wrapper নামে একটা ডিভ থাকবে।এটার জন্য সিএসএস

#main_background{
background-color:#003698;
width:990px;
margin:0 auto;
}

margin:0 auto; দিলে কোন একটা ডিভের এলাইমেন্ট সেন্টারে হয়ে যায়।

Unlimited Web Hosting
Unlimited Web Hosting
Unlimited Web Hosting
Unlimited Web Hosting

এই ডিভের ভিতর main_wrapper ডিভ এর সিএসএস

#main_wrapper{
width:971px;
margin:0 auto;
padding:10px 0;
overflow:hidden;
}

main_background ডিভ থেকে যেহেতু চারদিকে ১০ পিক্সেলের মত জায়গা ফাকা আছে তাই main_wrapper ডিভের width কমিয়ে দুপাশ থেকে নিচের ডিভটির ব্যাকগ্রাউন্ড বের করে আনলাম আর padding দিয়ে উপর নিচ থেকে নিচের ডিভের ব্যাকগ্রাউন্ড বের করলাম।আপনি ইচ্ছে করলে main_background ডিভের padding দিয়ে এটা একবারেই করতে পারেন।

এখন main_wrappper ডিভের ভিতর ৩টি ডিভ নিন।

<div id="header"></div>
<div id="menu"></div>
<div id="container"></div>

এবং ডিভ ৩টির সিএসএস

#header{
width:971px;
height:146px;
overflow:hidden;
margin:0 auto;
}
#menu{
height:37px;
background:url(images/menu_bg.jpg) no-repeat;
margin:10px 0;
}
#container{
margin:0 auto;
overflow:hidden;
}

XHTML করার সময় এটা একটা কৌশল যে আপনি পুরো সাইটকে আগে আনুভূমিকভাবে (Horizontally) কল্পনা করবেন এরপর প্রয়োজন অনুযায়ী ডিভ গুলিকে আপনি উল্লম্বভাবে (Vertically) ভাগ করবেন।যেমন header ডিভে দুটি অংশ আছে প্রথমে লোগো এবং এরপর একটা ছবি।এজন্য এই ডিভটিকে এবার দুভাগ করে দুইদিকে জিনিসদুটি(লোগো এবং ছবি) বসিয়ে দেবো।header ডিভের ভিতর নিচের ডিভ দুটির কোড লিখুন।

1.<div id="logo"><a href="/index.html"><img src="/images/logo.jpg"/></a></div>
2.<div id="header_img"><img src="/images/header.jpg"/></div>

এই ডিভদুটির সিএসএস

#logo{
width:492px;
height:146px;
float:left;
cursor:pointer;
}
#header_img{
width:479px;
height:146px;
float:left;
}

*এই ডিভদুটির ফ্লট left দিয়েছি তাই এদের parent ডিভ header এর overflow:hidden; দিতে হয়েছে।

ব্যাস header এর কাজ শেষ এবার menu ডিভের কাজ শুরু।যেহেতু এই ডিভে একটা মেনু থাকবে তাই <ul> এবং <li> দিয়ে এখানে একটা মেনু তৈরী করুন।menu ডিভের ভিতরের কোড

<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Meet Lee Green</a></li>
<li><a href="#">Coach Lee Media</a></li>
<li><a href="#">Duke Basket Ball</a></li>
<li><a href="#">Camps and Clinics</a></li>
<li><a href="#">Share</a></li>
<li><a href="#">Contact Info</a></li>
</ul>

menu ডিভে এই কোডটুকু লিখুন।মেনু করার সময় সবসময় খেয়াল রাখবেন যে মেনু স্ট্রাকচার এভাবে একটি ডিভের ভিতর <ul> এরপর <li> এবং এর ভিতর লিংক <a> ট্যাগ দিয়ে করতে হয়।এখন এই মেনুকে পিএসডি ফাইলের মত করতে নিচের সিএসএস লিখুন।

#menu ul{
}
#menu ul li{
float:left;
}
#menu ul li a{
font-family:Verdana;
font-size:16px;
display:block;
float:left;
padding:10px 15px;
text-decoration:none;
color:#000;
}
#menu ul li a:hover{
color:#003698;
}

এই সিএসএস গুলি খুব ভালভাবে মনে রাখতে হবে কারন মেনু তৈরীর সময় এই ধরনের কোডগুলিই ঘুরেফিরে ব্যবহৃত হয়।মুল কোড #menu ul li a তে লিখেছি, <a> যেহেতু একটা ইনলাইন এলিমেন্ট তাই এটাকে একটা ব্লক লেভেল এলিমেন্ট তৈরীর জন্য display:block; দিয়েছি।এরপর float:left; দেয়াতে floated এলিমেন্ট এর বৈশিষ্ট্য অনুযায়ী বাম দিকে থেকে একটার পর একটা বসে গেছে।#menu ul li এ ফ্লট না দিলেও হবে তবে IE (Internet Explorer) সমস্যা করবে তাই দেয়া হয়েছে।

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

একটা জিনিস লক্ষ্য করেছেন নিশ্চয় যে menu ডিভের সিএসএস এ overflow :hidden; নেই,একটাই কারন এই ডিভে এমন একাধিক ডিভ নেই যেগুলির ফ্লট দেয়া আছে।

টিউনারপেজের নতুন টিউন আপনাকে ইমেইল করব?
Unlimited Web Hosting
Unlimited Web Hosting
Unlimited Web Hosting
Unlimited Web Hosting

একটি উত্তর ত্যাগ

Please enter your comment!
Please enter your name here

one × 1 =