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

0
285

যেহেতু প্রথম ৪টি ডিভে একই স্টাইল দেব তাই ডিভ ৪টির আলাদা আলাদা id না দিয়ে class দিয়েছি এতে করে এই class টির জন্য  সিএসএস লিখলে বাকি সব ডিভগুলিতে এই প্রভাব গিয়ে পড়বে।content_text নামে যে ৪টি ডিভ আছে তাদের প্রতিটিতে নিচের কোড লিখুন।

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

** এখানে প্রথম ডিভটিতে class দেয়ার সময় content_text এর পর একটি স্পেস দিয়ে remove দিয়েছি।এখন এই remove এমন একটি ক্লাস হিসেবে কাজ করবে যেখানে শুধু আমি ঐ ডিভটির জন্য আলাদা কোন সিএসএস দিতে পারব।এটা এজন্য দিয়েছি কারন content_text ডিভগুলির margin-top:10px; আছে (নিচে content_text এর সিএসএস এ দেখুন) কিন্তু আমার প্রথম ডিভটির মার্জিন সরানো দরকার তাই নিচের সিএসএস দেখুন remove  ক্লাসে margin-top:0!important; করেছি।

<div class="date_text">
<div class="date">18</div>
<div class="month">OCT<br/>2011</div>
<div class="auth_text">
<p>AUTHOR</p>
<a href="#">Mike McAlister</a>
<p>COMMENTS</p>
<a href="#">3 Comments</a>
<img alt="" src="/images/icon.jpg"/>
</div>
</div>
<div class="main_text">
<a href="#">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</a>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p><br/>
<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.  </p>
</div>

content_text এবং এর ভিতর যা কিছু আছে সেসবের জন্য সিএসএস

.remove{
margin-top:0!important;
}
.content_text{
float:left;
background:#e9eaee;
width:622px;
padding:10px;
margin-top:10px;
}
.date_text{
float: left;
width:110px;
}
.date{
float:left;
font-size:48px;
font-family:Arial;
font-weight:bold;
padding-right:3px;
}
.month{
float:left;
font-size:20px;
color:#5a5a5a;
font-family:Arial;
font-weight:bold;
padding-top:4px;
}
.auth_text{
float:left;
font-family:Verdana;
font-size:12px;
line-height:20px;
border-top:1px solid #a6a6a6;
}
.auth_text p{
text-align:left;
font-weight:bold;
padding-top:5px;
}
.auth_text a{
text-align:left;
padding-bottom: 10px;
display:block;
}
.main_text{
width:480px;
float:right;
background:#fff;
padding:10px;
text-align:left;
}
.main_text a{
color: #2251a6;
font-family:Verdana;
font-size: 22px;
line-height:23px;
}
.main_text p{
font-family: Verdana;
font-size: 12px;
line-height: 20px;
padding-top:5px;
text-align: left;
}

remove ক্লাসটি যেহেতু শুধু প্রথম ডিভে আছে তাই margin-top:0!important; এটি শুধু প্রথম ডিভটির জন্য কাজ করেছে।সিএসএস এ কোন প্রোপার্টিজ এর সামনে !important এভাবে দিলে এই প্রোপার্টিজটি বেশি গুরত্ব পায়।যেমন

.remove{margin-top:0!important;} এটার কারনে শুধু প্রথম ডিভটিতে margin-top শুন্য হয়ে গেছে (যদিও সাধারনভাবে এই ডিভটিরও margin-top:10px; ছিল)।

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

pagination ডিভের ভিতরের কোড

<a href="#">Page 1 of 22</a>
<a href="#">1</a>
<a href="#">2</a>
<a href="#">3</a>
<a href="#">>></a>
<a href="#">10</a>
<a href="#">20</a>
<a href="#">...</a>
<a href="#">Last>></a>

pagination ডিভের সিএসএস

#pagination{
float:right;
padding: 18px 0 15px;
}
#pagination a{
border: 1px solid #CBCDD2;
padding: 5px;
background:#e9eaee;
margin: 0 3px;
font-family:Verdana;
font-size:12px;
text-decoration:none;
color:#003698;
}
#pagination a:hover{
background:#003698;
color:#fff;
}

এবার sidebar ডিভের কাজ শুরু।এখানে মোট ৭টি ডিভ থাকবে

<div class="advertise remove"><img alt="" src="/images/advert1.jpg"/></div>
<div class="advertise"><img alt="" src="/images/advert2.jpg"/></div>
<div class="advertise"><img alt="" src="/images/advert3.jpg"/></div>
<div id="subscribe">
<h2>Weekly Basketball Tips</h2>
<p class="sub">For weekly busketball tips please subscribe to us.</p>
<div id="subcribe_form">
<form action="#" method="post">
<input type="text" value="Name:"/>
<input type="text" value="Email:"/>
<input class="sub_button" type="submit" value="SUBMIT"/>
</form>
</div>
<img alt="" src="/images/icon2.jpg"/>
</div>
<div id="quotes">
<h2>Coach Lee Green Quotes</h2>
<p class="quotation">“Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.”  - Lee Green</p>
<a class="more" href="#">+More Quotes</a>
</div>
<div id="news">
<h2>Basketball News</h2>
<p class="sidebar_date"> 18 oct 2011</p><br/>
<a href="#">Lorem ipsum dolor sit amet consect. </a>
<p class="sidebar_date">18 oct 2011</p><br/>
<a href="#">Lorem ipsum dolor sit amet consect. </a>
<p class="sidebar_date">18 oct 2011</p><br/>
<a href="#">Lorem ipsum dolor sit amet consect. </a>
<p class="sidebar_date">18 oct 2011</p><br/>
<a href="#">Lorem ipsum dolor sit amet consect. </a>
</div>
<div id="stories">
<h2>Lee Green Storeis</h2>
<a href="#">Time out</a>
<a href="#">One of the Most Influential People in </a>
<a href="#">My Life</a>
<a href="#">Home for Christmas</a>
<a href="#">Following my dream</a>
<a class="last" href="#">Supporting Ray Mullis</a>
</div>

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

যাইহোক প্রথম ৩টি ডিভ এর আকৃতি একই এবং ভিতরে একটি করে ছবি ছাড়া কিছুই নেই তাই ডিভ ৩টি একই class(advertise) এ নিয়ে এদের এদের জন্য একই সিএসএস দিয়ে দিয়েছি।যেহেতু এখানেও প্রথম ডিভটির মার্জিন উপর থেকে দরকার নেই সুতরাং এখানেও প্রথম ডিভটিতে remove ক্লাসটি জুড়ে দিয়েছি।

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