पीएचपी वापरून वेबसाईट डिझाईन

वेबसाईट फ्रेम्स या पूर्वीच्या धड्यात आपण फ्रेम्सचा वापर करून वेबसाईट कशाप्रकारे बनविली जायची हे पाहिले. बॅनर, मेनू, तळटीप यासारख्या न बदलणार्‍या भागांच्या वेगळ्या html फाईल तयार करून फ्रेमद्वारे त्या प्रत्येक पानावरील मजकुराशी जोडल्या जायच्या. मात्र ज्या ब्राउजरला फ्रेम्स दाखविता येत नाहीत त्याच्यासाठी नो फ्रेम्स चा पर्याय ठेवला जायचा. त्यामुळे वेबसाईट योग्यप्रकारे दिसेल याची खात्री देता येत नसे. आता अशा फ्रेम्सच्या ऎवजी ASP, PHP सारख्या प्रोग्रॅमच्या साहाय्याने प्रभावी सुविधा उपलब्ध झाल्याने फ्रेम्सचा वापर फारसा होत नाही.

पीएचपी PHP (PHP Hypertext Preprocessor) ही सर्व्हरवर कार्य करणारी प्रोग्रॅमिंग लॅंग्वेज आहे. स्टॅटिक html वेबपेज ओळखण्यासाठी नावास जोडून .htm किंवा .html लिहिले जाते तर पीएचपी लॅंग्वेज असणार्‍या वेबपेजच्या नावास .php असा जोड दिलेला असतो. उदाहरणार्थ aboutus.php. पीएचपी प्रोग्रॅम हा html वेबपेजमध्येच या दोन टॅगमध्ये समाविष्ट केला जातो.

डायनॅमिक वेबपेजमध्ये बॅनर, मेनू, बॉटम या विविध भागांची स्वतंत्र वेबपेजेस एकत्र जोडण्यासाठी पीएचपी प्रोग्रॅमचा उपयोग केला जातो. यामुळे contents च्या भागात वेगवेगळी माहिती घालून वेबपेजेस केली जातात. याचा मुख्य फायदा म्हणजे बॅनर,मेनू व बॉटमच्या डिझाईनमध्ये काहीही बदल केले वा मेनू बदलला तरी सर्व वेबपेजेसमध्ये तो बदल आपोआप होतो व प्रत्येक पेज बदलण्याची गरज भासत नाही.

खालील उदाहरणात अशा वेबपेजचा टेबललेस डीआयव्हीवर आधारित लेआउट दिला आहे.
About Us Page
Aboutus Code Page

पीएचपी फाईल समाविष्ट करण्यासाठी योग्य त्या डीआयव्हीमध्ये include (’banner.php’) असे पीएचपी कोड लिहावे लागते.बॅनर, मेनू व बॉटम या भागांसाठी अनुक्रमे banner.php, menu.php आणि bottom.php ही पाने खालीलप्रमाणे करता येतात.


वरील वेबपेजसाठी खालीलप्रमाणे usephp.css सीएसएस वापरली आहे व ती प्रत्येक पानात लिंक केली आहे.
body {
background-color:skyblue;
width:450px;
margin: 0px;
padding: 0px;
}
#banner {
width: 100%;
}
#menu {
background-color:#FFFF66;
float: left;
width: 80px;
height: 250px;
}

#contents {
background-color:skyblue;
float: left;
margin-left:5px;
margin-top:10px;
width: 365px;
height: 240px;
}
#bottom {
background:#999;
color:#000;
clear: both;
width: 100%;
height:25px;
text-align:center;
text-decoration:none
}
h3{
color:#990000;
}
a:link Text{

text-decoration: none;
color:#FFFFFF;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: none;
color:#990000;
}
a:active {
text-decoration: none;

}
याप्रमाणे खालील पेजेस तयार करता येतात.
Activities Page


Contact Page