|
অনলাইনে সার্চ করে অনেক টেমপলেট পাবেন, কিন্তু কোথাও ইন্সট্রাকশন পাবেন না কি ভাবে শুরু করবেন। এখানে PHP Websites এর জন্য একটি কাস্টম টেমপলেট দেয়া হল। যা থেকে সেভ এজ করে আপনার কাংখিত ওয়েব পেজ তৈরী করতে পারবেন।
এটি একটি সিমপল ওয়েবসাইট এর জন্য আপনার কোন ইমেজ এডিটর জানার প্রয়োজন হবে না।এই PHP Web টেমপলেট সেট আপ এ আমরা প্রথমে একটি css , একটি হেডিং, দুটি মেনু ও একটি বডি ফাইল তৈরী করব। পরে এই আলাদা ফাইল গুলোকে ভিন্ন একটি php template page এ একত্র করব। কারন আপনারা ইতমধ্যে জানেন নে পিএইচপি তে কল করে পেজ তৈরী হয়। Web টেমপলেট টি তৈরী হবার পর আপনি প্রয়োজন মত এর 'title' ও 'body file' কে সেভ এজ এর মাধ্যমে নতুন পেজ তৈরী করতে পারেন। নোট: নিচে পাচটি ধাপে কোড গুলো লেখা আছে, কোড গুলো বুঝার চেষ্টা করুন।
১. টেমপলেট ফাইল: page1.php ( এটাকে index.php নামে চেঞ্জ করতে হবে) এই ফাইলটিতে ওয়েবপেজ এর যাবতীয় ওপেনিং ও ক্লোজিং ট্যাগ সমূহ থাকবে। যখন কোন নতুন পেজ তৈরী করবেন তখন শুধু 'title' ও 'name of the body file' এই দুটি পরিবর্তন বরবেন।
২. CSS (style sheet) = style.css এটিতে টেক্সটের বিভন্ন বৈশিশ্ট বর্ননা করা থাকে, এটি আলাদা একটি ফাইল হিসেবে থাকবে, এবং এর যে কোন পরিবর্তন সমস্ত ওয়েব সাইটেই দেখা যাবে।
৩. Header Page = head.html এটিতে HTML tags থাকে এবং এটা প্রতিটি পেজের হেডার হিসেবে থাকবে।
৪. Menu = menu.html এটি ওয়েবপজের মেনু যাতে অন্য পেজের বা সাইটের লিংক সমূহ ধারন করে। এতে (anchor tags) এর মধ্যে কিছু লিংক/ ইমেজ বা বাটন ও থাকতে পারে।
৫. Page Body = page1body.html এটি পুরো ওয়েবপেজের মূল অংশ। আপনি ভিন্ন ভিন্ন পেজের জন্য ভিন্ন ভিন্ন 'body' ফাইল ব্যাবহার করবেন (যেমন page2body.html, page3body.html, etc
রং নির্দেশ:
Blue = Typical HTML Code for each file (piece)
Red = HTML To Change in the final webpage template (for new page)
Gray = Remarks / Comments that will not display in browser.
page1.php(or index.php for default)
<html>
<head>
<title> Page 1 </title>
<link rel="stylesheet" type="text/css" xhref="style.css"/>
</head>
<body>
<?php
include ("head.html");
?>
<!-- Table for Main Body -->
<table border="0" width="100%" cellspacing="0" cellpadding="2">
<tr>
<td valign="top" align="left" width="90">
<?php
include ("menu.html");
?>
</td>
<td width="1" bgcolor="lightskyblue" valign="top"> </td>
<td valign="top">
<?php
include ("page1body.html");
?>
<br> <br>
<?php
include ("menu.html");
?>
</td>
<td width="1" bgcolor="lightskyblue" valign="top"> </td>
</tr></table>
</body></html>
style.cssbody {
background-color: #FFFFF0;
font-family: Arial, Verdana, sans-serif;
font-size: 18px;
color: #00008B;
scrollbar-face-color: antiquewhite;
scrollbar-highlight-color: darkorange;
scrollbar-3dlight-color: yellow;
scrollbar-darkshadow-color: black;
scrollbar-shadow-color: antiquewhite;
scrollbar-arrow-color: blue;
scrollbar-track-color: lightyellow;
}
a { font-family: Arial, Verdana, sans-serif; font-size: 18px; color: #483D8B; text-decoration: underline}
a:hover { font-family: Arial, Verdana, sans-serif; font-size: 18px; color: #A52A2A; background-color: #FAEBD7}
h1 { font-family: Arial, Verdana, sans-serif; font-size: 36px; color: #A52A2A }
h2 { font-family: Arial, Verdana, sans-serif; font-size: 24px; color: #A52A2A }
h3 { font-family: Arial, Verdana, sans-serif; font-size: 24px; color: #A52A2A }
h4 { font-family: Arial, Verdana, sans-serif; font-size: 18px; color: #A52A2A }
h5 { font-family: Arial, Verdana, sans-serif; font-size: 12px; color: #A52A2A }
h6 { font-family: Arial, Verdana, sans-serif; font-size: 8px; color: #A52A2A }
hr{ color:brown; background-color:tan; width:90%; height:2px; }
table { font-family: Arial, Verdana, sans-serif; font-size: 18px; color: #00008B; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px}
.note { font-family: Arial, Verdana, sans-serif; font-size: 14px; color: purple;
font-weight: bold;}
head.html<table height="80" width="100%" cellpadding="0" cellspacing="0" border="0">
<tr><td align="left" valign="bottom" width="160" rowspan="2">
<a xhref="http://www.ibdhost.com/">
<img xsrc="free/images/logo.gif" width="160" height="74" border="0" alt="logo">
</a></td>
<td align="left" valign="bottom" height="25" width="100%" nowrap colspan="4">
<b>Title or Links Here</b></td></tr>
<tr><td align="right" valign="top" height="50" width="100%" nowrap colspan="4">
<table width="455" height="50" cellspacing="0" cellpadding="0" border="0" background="free/images/headcolor.gif">
<tr>
<td height="50" width="55" align="left" valign="top" background="free/images/headback.gif">
<img xsrc="free/images/headback.gif" width="55" height="50" border="0" alt="background"></td><td height="50" width="400" align="center"> </td>
</tr></table></td></tr>
<tr>
<td align="left" valign="top" height="5" background="free/images/headcolor.gif" nowrap colspan="5">
<table width="100%" height="1" cellspacing="0" cellpadding="0" border="0">
<tr>
<td><img xsrc="free/images/headcolor.gif" width="1" height="1" alt="bar">
</td></tr></table>
</td></tr></table>
menu.html[<a xhref="index.php">Home </a>]
[<a xhref="page2.php">Page 2</a>]
[<a xhref="page3.php">Page 3</a>]
[<a xhref="page4.php">Page 4</a>]
page1body.html<h2> H2 size heading </h2>
This is the body / main part of my web page. Anything you put here - including pictures, etc will show on the web page. Summary: this is the 'body' section'
Example for a horizontal line = <hr>
Example using 'class' = 'note':
<span class="note"> Example using 'class' = 'note' </span>
এখন আপনি চাইলে আপনার কাংখিত ছবিটি যোগ করতে পারেন তবে ছবিটি অবশ্যই একই ফোল্ডারে থাকতে হবে তানা হলে ছবি লোকেশন পাথ বা URL লিখে দিতে হবে। ( নিচের উদাহরন দেখুন)
<img xsrc="images/hoglogo2.gif" border="4" width="100" height="65" alt="Razorback Hog Logo">
Hint: মবসময় আপনার মাস্টার ফাইল সমূহের backup রাখুন
<P> blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
তৈরীকৃত পেজটি দেখতে এমন হবে।
http://www.ibdhost.com/help/templates/ হতে অনুবাদকৃত
অনুবাদ: al mamun,
স্প্যামবটের হাত থেকে এই ইমেল ঠিকানা সুরক্ষিত আছে। পড়ার জন্যে জাভাস্ক্রিপ্ট অন করুন।
http://mamun2a.googlepages.com/
2 July,2007
 |
বাংলা কম্পিউটিং 
