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

0
369

আগের পর্বটি অবশ্যই এখানে দেখে নিন। ডিভগুলির সিএসএস

.advertise,
#subscribe,
#quotes,
#news,
#stories{
float:left;
width:280px;
margin-top:10px;
}
.advertise{
height:106px;
}
#subscribe{
background:url(images/subscribe_bg.jpg) repeat-y;
height:195px;
position:relative;
}
#subscribe h2,#quotes h2,#stories h2,#news h2{
background:#000;
color:#bfbfbf;
padding:10px;
font-family:Verdana;
text-align:left;
font-size:18px;
}
.sub{
color: #FFFFFF;
font-family: Verdana;
font-size: 14px;
padding: 10px 10px 0;
text-align: left;
}


#subcribe_form{
float:left;
text-align:left;
}
#subscribe img{
position: absolute;
right: 5px;
top: 94px;
}
.more{
float:right;
padding-bottom:10px;
font-family:Verdana;
font-size:12px;
}
#subscribe input{
background: none;
border: 1px solid #FFFFFF;
color: #FFFFFF;
display: block;
height: 24px;
margin-left: 10px;
margin-top: 8px;
padding-left: 5px;
width: 195px;
}
.sub_button{
background:url(images/button_bg.jpg) no-repeat!important;
border:none!important;
width:84px!important;
color:#000!important;
font-weight:bold!important;
}
#quotes{
border-bottom:4px solid #000;
}
.quotation{
font-family:Verdana;
font-size:12px;
font-style:italic;
line-height:15px;
color:#5a5a5a;
padding:10px;
text-align:left;
}
#news{
border-bottom:4px solid #000;
}
#news a{
display:block;
text-align:left;
padding-left:23px;
font-family:Verdana;
color:#5a5a5a;
font-size:12px;
padding-bottom:10px;
}
.last{
padding-bottom:10px!important;
}
.sidebar_date{
background: url("images/bullet.jpg") no-repeat 6px 12px;
color: #949494;
font-family: Verdana;
font-size: 11px;
padding-left: 20px;
padding-top: 10px;
text-align: left;
}
#stories{
border-bottom:4px solid #000;
}
#stories a{
background: url("images/bullet.jpg") no-repeat 8px 50% ;
color: #5A5A5A;
display: block;
padding: 6px 0 6px 25px;
font-family:Verdana;
font-size:12px;
text-align:left;
}

সিএসএ দেয়ার সময় এখানে কিছু কৌশল অবলম্বন করা হয়েছে এতে করে কোড কমে গেছে।যেহেতু এখানকার সব ডিভগুলির width,float ইত্যাদি একই তাই ডিভগুলির সিলেক্টর এর মাঝে কমা দিয়ে দিয়ে এই কমন প্রোপার্টিজ গুলি দিয়েছি।

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

এখানে নতুন কোন সিএসএস নেই শুধু পজিশনিং আছে।পজিশনিং করে “হাতের উপর বল ঘুরছে” এই ছবিটি প্রয়োজনীয় স্থানে বসিয়েছি।পজিশন করার সময় এটা খেয়াল রাখতে হবে যে,যখন কোন একটা ছবি বা এলিমেন্ট কে কোন ডিভের নির্দিষ্ট জায়গায় নিয়ে যাওয়ার প্রয়োজন হবে তখন ঐ ডিভটির পজিশন relative দিবেন এবং যেটা সরাতে চাচ্ছেন সেটার পজিশন absolute করে দিলে এই এলিমেন্টটিকে এখন এই ডিভটির (যেটার পজিশন relative করলেন) সাপেক্ষে top,right ইত্যাদি প্রোপার্টিজ দ্বারা উপরে নিচে সরানো যাবে।


সবশেষে footer ডিভটি wrapper ডিভটির বাইরে দিয়ে দিন।

<div id="footer">
<p>&copy; Copyright 2011 Coachleegreen.com. All rights reserved.</p>
</div>

footer ডিভের সিএসএস

#footer{
width:100%;
color:#5a5a5a;
font-family:Verdana;
font-size:12px;
padding:10px 0 21px 0;
}

কাজ শেষ ,সব যদি ঠিকমত এতক্ষন করে থাকেন তাহলে   index.html ফাইল রান করালে পিএসডি ফাইলের মত এইচটিএমএল ওয়েব পেজটি পাবেন।কোথাও বুঝতে সমস্যা হলে ফোরামে প্রশ্ন করুন।

আরেকটি বিষয় বাদ আছে তাহল পিএসডি ফাইলের মত পেজের ব্যাকগ্রাউন্ড আনতে একটা ছবি (images ফোল্ডারে দেখুন ব্যাকগ্রাউন্ড এর জন্য body_bg.jpg নামে একটা কত ছোট ছবি কেটেছি) কেটে সিএসএস এ  body সিলেক্টরে ছবিটি ব্যাকগ্রাউন্ড দিয়ে রিপিট দিয়েছি।

শেষ নির্দেশনা:

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

**স্লাইস করার নিয়ম:ফটোশপে বামদিকে টুলবার থেকে Slice tool সিলেক্ট করলে এখানে দুটি অপশন আছে (সিলেক্ট করে একটু নিচের দিকে ড্রাগ করলে অপশন দুটি দেখায়)।দ্বিতীয় অপশনটি (Slice Select Tool) সিলেক্ট করলে পিএসডি ফাইলে নিচের মত একটি সাদাকালো চারকোনা ছোট বক্স দেখাবে।

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

এখানে রাইট বাটন ক্লিক করে Promote to User Slice  এ ক্লিক করে পিএসডি ফাইলে যেকোন জায়গা ক্লিক করুন তাহলে পুরো পিএসডি ফাইলটি খয়েরি রঙ্গের একটি বর্ডারের ভিতর চলে আসবে।

এই বর্ডারটি মাউস দিয়ে ড্রাগ করে করে স্লাইস করতে হয়।যেমন আমার স্লাইস করা ফাইলটি দেখবেন ১ নম্বর স্লাইসটি উপর থেকে মাত্র কয়েক পিক্সেল নিচে এনে ছেড়ে দিয়েছি (যেখান থেকে shadow শুরু হয়েছে তার আগ পর্যন্ত)।এরপর সাদাকালো চারকোনা বক্সটি যেখানে এসেছে সেখানে রাইট বাটন ক্লিক করে আবার Promote to User Slice এ ক্লিক করে আরেকটি স্লাইস করুন এভাবে বাকিগুলি।স্লাইসিং খুব সহজ,বুঝতে সমস্যা হলে ইউটিউবে সার্চ দিয়ে ২/১ টি টিউটোরিয়াল দেখে নিতে পারেন।

** পিএসডি ফাইল ফটোশপে খুলে Ctrl+H দিয়ে স্লাইসিং উঠাতে পারেন এবং একইভাবে আবার স্লাইসিং আনতে পারেন।

**w3 validator এ গিয়ে এক্সএইচটিএমএল এবং সিএসএস ভেলিডেটরে যথাক্রমে index.html এবং style.css ফাইলদুটি আপলোড করে কোডে কোন ভুল আছে কিনা দেখতে পারেন।

XHTML ভেলিডেশন http://validator.w3.org/

CSS ভেলিডেশন jigsaw.w3.org/css-validator/

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

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

Please enter your comment!
Please enter your name here

seven − 2 =