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

0
485

পিএসডি থেকে এইচটিএমএল/এক্সএইচটিএমএল (PSD to XHTML/HTML) করার ক্ষেত্রে প্লানিং টাই সবচেয়ে গুরত্বপূর্ন বাকি কাজ অর্থ্যাৎ কোড লেখা সহজ।নিচে একটা পুর্নাঙ্গ পিএসডি থেকে এইচটিএমএল (আসলে এক্সএইচটিএমএল) তৈরী করার প্রক্রিয়া ধাপে ধাপে দেখানো হল-

প্রজেক্ট ডাউনলোড লিংক

প্রথম কাজ হচ্ছে পিএসডি ফাইলটি দেখে আপনাকে ভাবতে হবে।সাইটের পুরো স্ট্রাকচার আপনাকে div ভিত্তিক চিন্তা করতে হবে।সব div একটা div এর ভিতর থাকবে এরপর সাইটের প্রতিটি অংশ এক একটি div এর ভিতর থাকবে।এভাবে..

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

পিএসডি ফাইলটিকে স্লাইস (ফটোশপে slicing tool দিয়ে) করতে হবে।স্লাইস করার ব্যাপারটি সম্পূর্ন নিজের উপর।ইচ্ছে করলে স্লাইস না করেও কাজ করতে পারেন।ইচ্ছে করলেই করতে পারেন তার মানে এই নয় যে এটাই করা উচিৎ।বরং স্লাইসিং করা দরকার।স্লাইসিং করাটাও প্লানিং করে করতে হবে।সাইটকে ভাগ ভাগ করে নিবেন।স্লাইসিং করার মুল উপকার হচ্ছে অন্য কোন ডিজাইনার যখন এই পিএসডি ফাইল দেখবে তখন সে বুঝতে পারবে যে কিভাবে কাজটি (প্লান) করতে হবে।

একটা ফোল্ডার তৈরী করুন যেমন আমি করেছি XHTML_Coach_Lee এই নামে এবার এখানে মোট ৩টি ফোল্ডার (css, images এবং js) ও ২টি ফাইল index.html এবং style.css নামে থাকবে।css ফোল্ডারে style-ie.css নামে একটা সিএসএস ফাইল থাকবে।এখানে ঐসব কোড থাকবে যেগুলি শুধুমাত্র ইন্টারনেট এক্সপ্লোরার ব্রাউজার এর কমপিটাবল করার জন্য লেখা হবে।তবে এই প্রজেক্টটিতে এমন কোন কোড নেই।এরপর images ফোল্ডারে সব ইমেজগুলি থাকবে।আর js ফোল্ডারে জাভাস্ক্রিপ্ট এর ফাইল থাকবে।যেমন এই প্রজেক্টের এই ফোল্ডারে কিছু জাভাস্ক্রিপ্ট ফাইল আছে যেগুলি IE তে png ছবি দেখানোর জন্য ব্যবহৃত হবে (অবশ্য এই প্রজেক্টে কোন png ইমেজ নেই তবে থাকলে এই জাভাস্ক্রিপ্ট ফাইলগুলি তখন কাজ করত)।

index.html ফাইলে সব এইচটিএমএল কোড থাকবে।index.html ফাইলে নিচের কোড কপি করে পেস্ট করুন।

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Coach Lee Green :: Home</title>
<meta name="description" content="content" />
<meta name="keywords" content="keywords" />
<link rel="stylesheet" type="text/css" media="screen,projection" href="/style.css"/>
<!--[if lte IE 6]>
<link rel="stylesheet" type="text/css" media="screen,projection" href="/css/style-ie.css"/>
<script type="text/javascript" src="/js/ie6PngFix.js" ></script>
<![endif]--> 
</head> 
<body>
<!--OUR ALL CODE GOES HERE -->
</body>
</html>

এই কোডগুলি সম্পর্কে আগের এইচটিএমএল এবং সিএসএস টিউটোরিয়ালে যেহেতু আলোচনা হয়েছে তাই এখানে পুনরায় ব্যাখ্যা করা হলনা।body ট্যাগের ভিতর আমাদের সব কোড লিখতে হবে।

এখানে শুধু if স্টেটমেন্ট (৯ থেকে ১২ নম্বর লাইন পর্যন্ত)এর ভিতর কিছু নতুন কোড আছে,যদি IE ‘র জন্য কোন সিএসএস ফাইল থাকে বা কোন png ইমেজ থাকে তাহলেই শুধু এই কোডটুকু দ্বারা index.html এর সাথে ফাইলদুটি যক্ত হবে (style-ie.css এবং ie6PngFix.js)।

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