পর্ব-২:ফটোশপে সম্পূর্ন ওয়েবসাইট ডিজাইন বা ওয়েব টেমপ্লেট তৈরি করে সে পিএসডি ফাইল থেকে এইচটিএমএল এ রূপান্তর!
সবাইকে ঈদের শুভেচ্ছা জানিয়ে শুরু করছি আমার আজকের টিউটোরিয়াল। সবাই নিশ্চয় ভালো আছেন।
আজকের কাজ হল গতদিনে তৈরি ওয়েব টেমপ্লেটের পিএসডি ফরমেট থেকে এইচটিএমএল সাইটে রূপান্তর করা।
আজকের বিষয়-পর্ব-২: ওয়েব টেমপ্লেটের পিএসডি ফাইল থেকে এইচটিএমএল এ রূপান্তর!
শুরুতে যে কাজ তা হল গতদিনে তৈরি
টেমপ্লেটের বিভিন্ন অংশ কেটে নিয়ে একটা ফোল্ডারে রাখা। প্রথমে একটা ফোল্ডার
তৈরি করে নেব। আমি ফোল্ডারটা ডেস্কটপে তৈরি করে রাখলাম । তার নাম দিলাম
tutorial.
রুলারের সাহায্যে গাইড স্থাপন করবো এবং সে
ইমেজগুলো ওয়েব এ ব্যবহার করবো তা slice tool এর সাহায্যে স্লাইস করে নিব।
অথবা marquee rectangular tool ব্যবহার করে সাইজ করে প্রয়োজনীয় ইমেজ কেটে
নিতে পারি। অনেক বেশি ভারী ছবি নেব না কেননা সাইজ বেশি হলে সাইট লোড হতে
সমস্যা হয়। তবে আমি একটি বড় ছবি নিলাম ব্যাকগ্রাউন্ডের জন্য যা save for
web এ save করার সময় তার সাইজ কমিয়ে নিলাম।save for web এ ছবি কিভাবে ছোট
করে তা নিয়ে আমার একটি পোস্ট আছে।
এখান থেকে দেখে নিতে পারেন। আবার অনেক বেশি ছোট ছবি ও নেব না কেননা তা ওয়েবসাইটকে জটিল করে তুলবে।
Slice করার জন্য প্রথমে Duplicate করে নিব ইমেজটা এভাবে-
মেনুবার থেকে Image>Duplicate
সকল লেয়ারকে নতুন ক্যানভাসে নিয়ে যাব এভাবে-
মেনুবার থেকে (Layer>Flatten Image).
Rectangular Marquee tool এর সাহায্যে কোন নির্দিষ্ট ছবির এরিয়া সিলেক্ট করে, Ctr+C দিয়ে
কপি করব। নতুন লেয়ায় নেব ( Ctr+N) তাতে পেস্ট করবো (Ctr+V)। এবার সেভ করবো File>Save
for Web অথবা Ctr+Shift+Alt+S বাটন একসাথে চেপে। এভাবে অন্য ইমেজগুলো কেটে নিয়ে
একটি ফোল্ডারে রাখব যার নাম দিলাম image । এই image ফোল্ডারটি tutorial ফোল্ডারে রাখব।
tutorial ফোল্ডারে index.html এবং
style.css নামে আরও ২ টি ফাইল রাখব। ওয়েবসাইটটি তৈরি করতে javascript ও
দরকার হবে। তবে আমি অই অংশটা করবো না এখানে। যদি করতাম তাহলে index.js
এভাবে ফাইল রাখতে হত।
কোডিং করার জন্য আমি notepad++ ব্যবহার করেছি। Adobe® Dreamweaver ও ব্যবহার করতে
পারেন। নতুনদের জন্য Dreamweaver অনেক জটিল একটা সফটওয়্যার। এর ব্যবহার জানা না থাকলে notepad++
ব্যবহার করা ভাল। notepad++ না থাকলেও চলবে html কোড গুলো notepad এ লিখে
index.html নামে ফাইলটি সেভ করে ওপেন করলে
সাইটটি ব্রাউজারে প্রদর্শিত হবে। একই ভাবে css কোড গুলো notepad এ লিখে
style.css নামে ফাইলটি সেভ করবো।
তাহলে ফাইল রেডি হয়ে যাবে। এবার ফাইল গুলোতে কোড যুক্ত করবো।
সবার আগে যেটা করা জরুরী কোডিং এর
ক্ষেত্রে তা হল, আগে থেকে টেম্পলেটের বিভিন্ন অংশকে ভাগ করে নেয়া। যেমন-
প্রথমে হেডার,তারপর মেনুবার এভাবে অন্যান্য অংশ। যার জন্য html এ আলাদা
আলাদা div ব্যবহার করতে হবে। প্রত্যেকটা অংশের জন্য একটা করে div নিতে হবে
এবং এই সবগুলোকে আবার একটা div এর মধ্যে নিতে হবে।
তবে আমি সবগুলো উপাদানকে ২টি div এর মধ্যে
রাখব। কেননা আমি ৯৬০px এর একটি কনটেন্ট এবং তার ভিতরে ৯০০px মধ্যে মূল
কনটেন্ট ধারণ করেছি। তাই ২ টি div নিব।
এবার এইচটিএমএল কোডগুলো আগে এবং এর সাথে সম্পর্কিত সিএসএস কোডগুলো এর নিচে নিচে লিখব।
এইচটিএমএল ফাইলে সবার আগে কিছু এক্সএইচটিএমএল কোড থাকবে সেগুলো হল-
<!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 অংশ -
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<meta http-equiv=”Content-Type” content=”cache” />
<meta name=”robots” content=”text/html; charset=”utf-8″>
<meta name=”keywords” content=”INDEX.FOLLOW” />
<meta name=”description Here” />
<head> ট্যাগের মধ্যে সাইটের meta
key, meta description ইত্যাদি উল্লেখ করে দিতে হয় যাতে সার্চ ইঞ্জিন
অপ্টিমাইজেশনে সহজে সাইটটি খুঁজে পায়, তবে আমি এগুলো ব্যাখ্যায় যাচ্ছিনা।
আর এগুলোর জন্য সিএসএস কোড হবে না ।
এরপর যে টাইটল বা শিরোনামটা আমরা
ব্রাউজারে প্রদর্শন করাতে চাই সেটি <title> </title> ট্যাগ এর
মাঝে লিখব। এরপর সিএসএস ফাইলের লিঙ্কটা লিখব <link /> ট্যাগ এ।
<title>Text file</title>
<link href=”style.css” rel=”stylesheet” type=”text/css” />
</head>
<body>
<!… Sokol prokar code ekhane likhte hobe……..>
</body>
</html>
এরপর body অংশে সব div লিখতে হবে । outer div এর মধ্যে সকল কোড লিখতে হবে।
<body>
<div id=”outer”>
<!……. Ekhane wrapper theke suru kore footer porjonto sokol div likhte hobe……..>
</div>
body এর জন্য সিএসএস কোড হবে-
body{
background-image:url(“image/background.jpg”);
text-align:center;
}
p
{
color:#000;
font-size:12px;
line-height:150%;
margin:15px 0;
text-align:left;
}
সাইটের প্যারাগ্রাফ অংশগুলোর টেক্সট এর জন্য সিএসএস কোড দিতে হবে- যেমন- ফন্ট ফ্যমিলি। সাইজ, কালার ইত্যাদি।
background এর পর p তে প্যারাগ্রাফ অংশের সিএসএস কোড দিলাম।
outer div এর জন্য css কোড হবে -
#outer
{
width:960px;
margin:0 auto;
background-color:#FFFFFF;
}
এখানে margin:0 auto;
margin: 0 উপরে, নিচে এবং auto ডান ,বাম ২
পাশে। margin: auto ব্যবহার করা হয়েছে কারন আমাদের মুল ব্যাকগ্রাউন্ডটি
১৬৮০*১০৫০। অথচ outer কনটেন্ট ৯৬০pxএর। তাই কন্টেন্টটি যাতে ব্রাউজারের
মাঝামাঝি থাকে সেজন্য।
এরপর থাকবে wrapper div
<div id=”wrapper”>
<!………all div goes here….>
</div>
Wrapper এর জন্য সিএসএস কোড হবে
#wrapper {
width:900px;
margin:0 auto;
background-color:#FFF;
}
এবার হেডার অংশের কোড লিখব।
আমি আলাদাভাবে header এর জন্য div নিবনা। তবে logo, socialmedia-icons সবগুলোর জন্য আলাদা আলাদা div নিব।
প্রথমে logoর জন্য এইচটিএমএল কোড
<div id=”logo”>
<div class=”logo1″>Sample
<span>
Design
</span>
<div>
only one name for interior design
</div>
</div>
</div>
logoতে ইমেজ ব্যবহার করা যায়। একটি লোগো
আমি তৈরি করেছিলাম গতপর্বের টিউটোরিয়ালে। কিন্তু এখানে সেটি ব্যবহার করিনি।
এখানেও টেক্সট লোগো তৈরি করবো।
যেহেতু লোগোতে ২টা ওয়ার্ড ২ রকম কালারের। তাই একটাকে <span></span> tag এ লিখলাম।
logo এর সিএসএস কোডঃ
#logo
{
margin:30px 0px;
float:left;text-align:left;
}
.logo1
{
color:#333333;
font-family:Hobo Std;
font-weight:bold;
font-size:25px;
}
.logo2
{color:#cc9999;
font:Hobo Std;
font-weight:bold;
font-size:25px;
}
.slogan
{
font-family:tahuma;
font-size:15px;
color:#333333;
text-align:left;
}
logoতে float: left দিয়েছি যাতে এটি মূল
কন্টেন্ট এর ঠিক বামদিকে থাকে, ফন্ট কালার, ফ্যামিলি ডিজাইনে যেমনটা দিয়েছি
তাই এখানে ব্যবহার করলাম।
text-align:left ব্যবহার করেছি যাতে লেখা
একেবারে বাম পাশ থেকে শুরু হয়। cursor:pointer এর জন্য logoতে কার্সার
ইফেক্ট pointer দেখাবে।
সামাজিক যোগাযোগ সাইটের আইকন এর এইচটিএমএল কোড হবে-
<div id=”social-media-icons”>
<ul>
<li><a href=”https://www.facebook.com”><img src=”image/facebook.png”width=”32″ height=”32″ /></a>
</li>
<li><a href=”https://www.google.com”><img src=”image/google.png” width=”32″ height=”32″ /></a>
</li>
<li><a href=”https://www.twitter.com”><img src=”image/twitter icon.png” width=”32″ height=”32″ /></a>
</li>
</ul>
</div>
<ul></ul> আনঅর্ডার লিস্ট,
<li></li> অর্ডার লিস্ট এবং <a></a> অর্থাৎ এঙ্কর
ত্যাগ ব্যবহার করে সামাজিক যোগাযোগ সাইটের আইকন এর তালিকা তৈরি করা হয়েছে।
সচরাচর অনুভূমিক বা উলম্ব মেনু তৈরিতে এই তিনটি ত্যাগ ব্যবহার করা হয়।
social-media-icons এর সিএসএস কোড-
#social-media-icons
{
float:right;
}
#social-media-icons ul li
{
display:inline;
}
#social-media-icons ul
{
margin-top:40px;
}
social-media-icons গুলো ডান পাশে রাখার জন্য float:right ।
social icon গুলো একই লাইনে থাকার জন্য
display:inline ব্যবহার করতে হবে। উপর থেকে ৪০px নিচে হওয়ার জন্য
margin-top:40px ব্যবহার করলাম ।
মেনুবার এর এইচটিএমএল কোড সমুহঃ
<div id=”topnav”>
<ul>
<li>
<a href=”index.html”>Home</a>
</li>
<li>
<a href=”about.html”>About</a>
</li>
<li>
<a href=”products.html”>Product</a>
</li>
<li>
<a href=”services.html”>Services</a>
</li>
<li>
<a href=”contact.html”>contact</a>
</li>
</ul>
</div>
মেনু তৈরি করার জন্য ও
<ul></ul> div ব্যবহার করলাম। এর মধ্যে <li></li>
এবং <a></a> ট্যাগ দিয়ে লিঙ্ক যুক্ত করতে হবে যাতে অন্যান্য
পেজ এ ভিজিট করা যায়।
মেনু এর সিএসএস কোড লেখার আগে টেক্সট গুলা মধ্যে যে লিঙ্ক আছে সেগুলোর জন্য+ অন্য সকল লিঙ্কের জন্য কিছু কোড লিখব -
a{}
a:link
{
color:000000;
}
a:visited
{
color:#996699;
}
a:active
{
color:#000000;
}
a:focus
{
color:#333333;
}
a:hover
{
color:#003399;
}
link,visited,active,hover সম্পর্কে অসীম ভাইয়ের
সিএসএস টিউটোরিয়ালের
এই পার্ট এ জানতে পারবেন।
মেনুর সিএসএস কোডঃ
#topnav
{
clear:both;
}
#topnav ul
{
border-bottom:1px #999 solid;
border-top:1px #000 solid;
margin:20px 0;
padding:10px 0;
text-align:left;
}
#topnav ul li
{
display:inline;
}
#topnav ul li a
{
padding:0 15px;
text-decoration:none;
}
#topnav a:link
{
color:#000;
font-weight:bold;
font-size:18px;
}
#topnav
a:visited
{
color:#996699;
}
#topnav a:active
{
color:#000;
}
#topnav a:focus
{
color:#666;
}
#topnav ul li a:hover
{
background:url(image/nav.jpg);
color:#996666;
}
Clear:both ব্যবহার করে মেনুর উভয় পাশের
floated উপাদানগুলোকে হাইড করা হয়েছে। প্রত্যেক মেনুবারের উভয় পাশে ১০px
পেডিং রাখা হয়েছে যাতে design এ মাঝের ২০px দুরত্ব থাকে।
text-decoration:none ব্যবহার করে মেনুর নিচের আন্ডারলাইন দূর করা হয়েছে
। visited{ color:#996699;} অর্থ, যে মেনুটি ভিজিট করা হয়ে গেছে সেটি
বুঝার জন্য ভিজিটেড কালার visited{ color:#996699 ব্যবহার করা হয়েছে।
hover এ ব্যাকগ্রাউন্ডে navi.jpg ইমেজটি ব্যবহার করার জন্য
background:url(navi.jpg);} লিখলাম এবং ফন্টের কালার যাতে পরিবর্তন হয়ে
যাতে বাদামী টাইপ হয় সেজন্য color:#996666 লিখলাম ।
এবার ব্যানার তৈরি করবঃ
ব্যানার এর এইচটিএমএল কোডঃ
<div id=”banner”>
<img src=”b1.jpg” width=”900″ height=”360″ />
</div>
ব্যানারের width=”900px” height=”360px” ব্যবহার করলাম, কেননা আমাদের ডিজাইনেও এই সাইজ রয়েছে।
সিএসএস কোডঃ
#banner
{
margin-bottom:30px;
}
ব্যানারের নিচে 30px মার্জিন রাখা হয়েছে।
কন্টেন্ট তৈরিঃ
প্রথমে হেডলাইনের এইচটিএমএল কোড -
<div id=”content”>
<h1>Welcome our website</h1>
সিএসএস কোড
h1,h2,h3,h4,h5,h6{
font-weight:bold;
}
h1
{
font-size:24px;
color:#996666;
text-align:left;
border-bottom:1px #ccc solid;
margin-bottom:15px;
padding-bottom:15px;
}
এটা মেইন হেডলাইন। এর ফন্ট সাইজ 24px রাখা
হয়েছে বাম পাশে এলাইন করার জন্য text-align:left দেয়া হয়েছে। নিচে 15px
পেডিং এবং 15px margin রাখা হয়েছে।
হেডিং এর নিচে 1px বর্ডার আছে ডিজাইনে সেজন্য border-bottom:1px #ccc solid; দিলাম।
কনটেন্ট এর এইচটিএমএল কোডঃ
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscin elit, sed diam nonummy nibh euismod tincidunt ut
laoreet dolore magna aliquam erat volutpat Lorem ipsum dolor sit amet, consectetuer adipiscin elit, sed diam
nonummy nibh euismod tincidunt ut aoreet dolore magna aliquam erat volutpat
</p>
<img src=”image/pic1.jpg” width=”250″ height=”180″ />
<img src=”image/pic2.jpg” width=”250″ height=”180″ />
<p>Lorem ipsum dolor sit amet, consectetuer adipiscin elit, sed diam nonummy nibh euismod tincidunt ut
laoreet dolore magna aliquam erat volutpat Lorem ipsum dolor sit amet, consectetuer adipiscin elit, sed diam
nonummy nibh euismod tincidunt ut aoreet dolore magna aliquam erat volutpat </p>
</div>
ডিজাইনে কনটেন্টের ছবি ২টির চারপাশে ২টি
ফ্রেম অর্থাৎ ছবিগুলো ২টি ফ্রেমের মাঝখানে বা বাক্সের মধ্যে আছে। এটি
দেখানোর জন্য “image-frame” div ব্যবহার করা হয়েছে।
কনটেন্টের সিএসএস কোডসমূহঃ
#content
{
width:620px;
float:left;
padding:0 10px 0 0;
}
.image-frame
{
padding:10px;
margin:10px;
border:1px solid #ccc;
}
কনটেন্টের float:left করে দিলাম
ইমেজের চারপাশে যে বর্ডার ১০px দূরত্বে
ফ্রেমটির প্রান্ত যাতে অবস্থান করে সেজন্য margin:10px;এবং ইমেজটি যাতে
১০px করে চারপাশে থেকে ভিতরের দিকে অবস্থান করে তার জন্য
padding:10px;লিখলাম।
সাইদবারের এর এইচটিএমএল কোডঃ
<div id=”rightside”><h2>Latest News</h2>
Latest News লিখতে h2 অর্থাৎ হেডিং ২ ব্যবহার করা হয়েছে।
h2 এর জন্য সিএসএস কোডঃ
h2
{
font-size:20px;
color:#996666;
}
<div id=”rightside”> এর জন্য সিএসএস কোডঃ
#right-side
{
width:180px;
float:right;
pedding:0 10px;
}
Width ১৮০px এ নির্দিষ্ট করে দিলাম কেননা
আমাদের মূল ব্যাকগ্রাউন্ডের width 900px। এর মধে কনটেন্ট ৬২০px. তাই ডান
পাশের কলামের Width ১৮০px এ নির্দিষ্ট করে দিলাম যাতে কনটেন্টের পাশেই
অবস্থান করে । pedding:0 10pxঅর্থ হল উপরে নিচে কোন খালি স্পেস থাকবেনা
কিন্তু উভয় পাশ থেকে ১০px করে থাকবে এবং এর ভিতরে লেখা থাকবে।
<h3><img src=”image/sample design.png” width=”35″ height=”35″ />Sample design</h3>
<p> march 20 2012 </p>
<p>march 20 2012 </p>
<p
id=”link”><a href=”recent.html”>sed diam nonummy nibh<br/
> euismod incidunt ut aoreet <br/ >dolore magn copy
</a></p>
<h3 id=”middle”><img src=”image/recent_posts.jpg” width=”35″ height=”35″ />Recent Posts</h3>
<p>march 20 2012 </p>
<p>march 20 2012 </p>
<p
id=”link”><a href=”recent.html”>sed diam nonummy nibh<br/
> euismod incidunt ut aoreet <br/ >dolore magn copy
</a>
</p>
<h3><img src=”image/interior-design-icon.jpg” width=”35″ height=”35″ />Recent Design</h3>
<p>march 20 2012 </p>
<p id=”link”><a href=”recent.html”>sed diam nonummy nibh<br/ > euismod incidunt ut aoreet <br/ >
</a>
</p>
</div>
এখানে ৩টি subtitle এর সকল ক্ষেত্রে (আইকন আর হেডিং ছাড়া ) div গুলো একই ব্যবহার করেছি।
তবে সাইডবারের মাঝেরটার ফন্ট কালার অন্য
২টার চেয়ে ভিন্ন। <middle> এ হেডলাইনের কালার ভিন্ন বলে তার জন্য
আলদা div <h3 id=”middle”></h3> নিলাম । অর্থাৎ h3 এর
বৈশিষ্ট্য থাকবে তবে আরও কিছু বৈশিষ্ট্য যুক্ত করার জন্য আলাদা div নিতে
হল, যেমন- ফন্ট কালার।
h3, h4, h5 এর সিএসএস কোডসমূহ-
h3
{
font-size:16px;
margin-bottom:5px;
}
h4
{
font-size:14px;
}
h3,h5
{
color:#000;
}
Side barএর Div গুলোর সিএসএস কোড নিচে লিখলামঃ
#middle
{
color:#000066;
font-weight:bold;
}
.date
{
font-weight:bold;
color: #666666;
margin-bottom:5px;
margin-top:0px;
text-align:center;
}
ডান কলামের float:right করে দেয়া হয়েছে।
date টাকে টেক্সট থেকে আলাদা করার জন্য ফন্ট কালার ভিন্ন রঙের ব্যবহার করা
হয়েছে। সাইডবারের লিঙ্কগুলোর জন্য আলাদা div ব্যবহার করতে হবে কেননা,
সাধারনত সাইডবারে যা থাকে তা কিছু পোস্টের লিঙ্ক যেমন এই সাইটের সাইড বার।
তো লিঙ্কগুলার নিচে যাতে underline না আসে সেজন্য আলাদা div নিয়ে
text-decoration:none; করে দিলাম।
এবার সর্বশেষের অংশ ফুটার তৈরিঃ
ফুটার এর এইচটিএমএল কোড হবে-
<div id=”footer”>
<p>
All rights reserved by @ NILufar yasmin</p>
</div>
ফুটারের সিএসএস কোড-
#footer
{
clear:both;
font-size:14px;
margin:20px 0;
border-top:1px #ccc solid;
padding-bottom:20px;
}
.footer-text{
color:#333;
font-size:12px;
font-style:normal;
text-align:center;
}
ফুটারের উপরের রেখাটি দেয়ার জন্য
border-top:1px #ccc solid ব্যবহার করা হয়েছে। footer টেক্সটটি যাতে মাঝে
অবস্থা করে সেজন্য text-align:center লিখলাম।
ফুটার কোড লেকাহ্র ময়াধ্যমে শেষ হয়ে গেল
আমার এইচটিএমএল সিএসএস কোড লেখা। এখন সকল এইচটিএমএল কোড কপি করে index.html
ফাইলে পেস্ট করব। এবং সকল সিএসএস কোড কপি করে style.css ফাইলে পেস্ট করব।
save করে যেকোনো ব্রাউজারে ওপেন করলে ওয়েবপেজটি প্রদর্শিত হবে।
আমি টিউটোরিয়ালটি প্র্যাকটিস যেভাবে করেছি
তার বর্ণনা দিয়ে গেলাম, ওয়েব ডেভেলপমেন্ট বা ডিজাইনিং সম্পর্কে এখনো তেমন
কিছুই জানিনা! কোথাও ভুল হলে কমেন্টের মাধ্যমে জানাবেন। আর আশা করি যারা
আমার মত নতুন এই ক্ষেত্রে, তারাও চেষ্টা করলে পারবেন। ধন্যবাদ সবাইকে সাথে
থেকে এত বড় পোস্ট পড়ার জন্য।
ডেমো দেখে নিতে পারেন সাইটটির-
আর সাইটের source file পাবেন এখানে
