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

0
354

সব আগে একটা wrapper নামে div নেব যেখানে বাকি সব div গুলি থাকবে (শুধু footer ডিভটি ছাড়া)।

<div id="wrapper">
<!--- All div goes here (Ekhane Sob div rakhte hobe)-->
</div>

style.css ফাইলে এই wrapper এর জন্য নিচের কোড লিখুন।প্রজেক্টটির এই ফাইলে wrapper ডিভের কোড লেখার আগে যেসব কোড আছে তা কমন কিছু স্টাইল দেয়ার জন্য রাখা হয়েছে এসব না রাখলে হবে শুধু body এর জন্য যেটুকু কোড আছে সেটা প্রয়োজনীয়।

#wrapper{
margin:0 auto;
overflow:hidden;
width:1007px;
}

margin:0 auto; এর দ্বারা wrapper এর এলাইনমেন্ট মাঝখানে করা হয়েছে।এটার কারনে যে ব্রাউজারেই ইউজার সাইট ব্রাউজ করুক না কেন,সাইটের সব কিছু মাঝামাঝি দেখাবে।width:1007px; দিয়েছি কারন পিএসডিতে মুল স্ট্রাকচার এর width 1007px. overflow:hidden; এর দ্বারা এই div টি এর ভিতর সব floated div গুলির পাত্র হিসেবে কাজ করবে।কোন div এর ভিতর যদি একাধিক div থাকে এবং এই ভিতরের div গুলিতে যদি float থাকে তাহলে অবশ্যই parent div টির overflow:hidden দিতে হয়।

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

এইচটিএমএল কোড:

<div id="main_bg">
<div id="bg_top">
<div id="bg_bottom"><!--Baki sob div ekhane dite hobe--></div>
</div>
</div>

প্রথমে main_bg ডিভের ভিতর bg_top ডিভ এবং এই ডিভটির ভিতর bg_bottom ডিভ নিয়েছি।এটাই ৩ ভাগের বক্স বানানোর কৌশল (তবে png ইমেজ হলে এই কৌশলটি একটু ভিন্ন)

ডিভ ৩টির জন্য সিএসএস

#main_bg,
#bg_top,
#bg_bottom{
width:1007px;
float:left;
}
#main_bg{
background:url(images/main_bg.jpg) repeat-y;
}
#bg_top{
background:url(images/bg_top.jpg) no-repeat top left;
}
#bg_bottom{
background:url(images/bg_bottom.jpg) no-repeat bottom left;
padding:10px 0;
}

ফটোশপ থেকে স্লাইসিং করে ছবি কেটেছি,images ফোল্ডারে দেখুন bg_top.jpg নামে যে ছবি আছে তা পিএসডির উপর থেকে ১০০৭x৬ পিক্সেলের করে কেটেছি (shadow টুকু নেয়ার জন্য)।এভাবে bg_bottom.jpg কেটেছি।ফটোশপে ছবি কাটা সহজ,Rectangular Marquee Tool বাম থেকে সিলেক্ট করে যতটুকু ছবি কাটতে চান ড্রাগ করে ততটুকু ছবি সিলেক্ট করে Shift+C দিলেই ছবি কপি হয়ে যাবে।এরপর Ctrl+N দিলে নতুন উইন্ডো আসবে এখানে Ctrl+V দিলে ছবিটুকু পেস্ট হয়ে যাবে।সেভ করার জন্য (Save for web) Ctrl+Alt+Shift+S দিলে সেভিং উইন্ডো আসবে এখান প্রয়োজনীয় নামে সেভ করুন।

bg_top ডিভের সিএসএস এ no-repeat top left দেয়াতে ছবিটি main_bg ডিভের উপরে গিয়ে বসে যাবে এবং রিপিট হবেনা।এভাবে bg_bottom কে নিচে দিয়েছি এবং এর padding উপরে নিচে ১০ পিক্সেল দেয়াতে মুল কনটেন্টে থেকে ১০ পিক্সেলের দুরত্ব থাকবে সবসময় (কারন সব কনটেন্ট এখন এই bg_bottom ডিভে থাকবে)।আর প্রথমে main_bg তে পিএসডি থেকে ১০০৭x২ পিক্সেলের একটা সাদা ছবি কেটে রিপিট দিয়েছি অপনি চাইলে ছবি না কেটে ব্যাকগ্রাউন্ড সিএসএস থেকে সাদা দিয়ে দিলেও কাজ হবে।

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