Click here to Skip to main content
15,887,434 members
Search within:


I need help converting an html+css website into one with a template system (is that php?)
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
CSS
HTML
PHP
For example how would i turn the following code into a template and an index page? The various parts would be the header, menu, main content, and footer, but i do not know how to take this page and turn it into a template (that links to header.html etc so i would just change one page) and what the index page linking to the various parts would look like... its probably very simple, but i just do not have a mental grasp on it just yet. This would help me a lot. If the code below is too complicated to sift through , just use a stripped down version of a page, because I really need this information. THANK YOU SO MUCH FOR YOUR TIME!!!!


<html><br />
<head><br />
<script src="scripts/rollover.js" type="text/javascript"></script><br />
<LINK REL=stylesheet HREF="scripts/gears.css" TYPE="text/css"><br />
	<title>Zea Web</title><br />
</head><br />
<body><br />
<br />
<img id="welcome" src="images/title_welcome.gif" width="105" height="21" alt="" border="0"><br />
<img id="title" src="images/title_zea.gif" width="408" height="94" alt="" border="0"><br />
<br />
	<div class="topbar"><br />
		 <div class="bar2"></div>		 <br />
		 <div class="navcontainer">	<br />
		 	   <div class="nav"><br />
	 	  	     <a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('home','','images/buttons/button_home_glow.gif',1)"><img name="home" src="images/buttons/button_home_page.gif" align="middle" border="0px"></a><img src="images/transparent.gif" width="15"><br />
				 <a href="pages/design_index.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('design','','images/buttons/button_design_glow.gif',1)"><img name="design" src="images/buttons/button_design.gif" align="middle" border="0px"></a><img src="images/transparent.gif" width="15"><br />
				 <a href="pages/neopets_index.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('neopets','','images/buttons/button_neopets_glow.gif',1)"><img name="neopets" src="images/buttons/button_neopets.gif" align="middle" border="0px"></a><img src="images/transparent.gif" width="15"><br />
		  		 <a href="pages/wolf_index.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('wolf','','images/buttons/button_wolf_glow.gif',1)"><img name="wolf" src="images/buttons/button_wolf.gif" align="middle" border="0px"></a><img src="images/transparent.gif" width="15"><br />
				 <a href="smf/" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('board','','images/buttons/button_board_glow.gif',1)"><img name="board" src="images/buttons/button_board.gif" align="middle" border="0px"></a><img src="images/transparent.gif" width="15"><br />
				 <a href="pages/talk_index.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('talk','','images/buttons/button_talk_glow.gif',1)"><img name="talk" src="images/buttons/button_talk.gif" align="middle" border="0px"></a><img src="images/transparent.gif" width="15"><br />
				 <a href="pages/links_index.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('links','','images/buttons/button_links_glow.gif',1)"><img name="links" src="images/buttons/button_links.gif" align="middle" border="0px"></a><img src="images/transparent.gif" width="15"><br />
				 <a href="pages/about_index.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('about','','images/buttons/button_about_glow.gif',1)"><img name="about" src="images/buttons/button_about.gif" align="middle" border="0px"></a><br />
			   </div><br />
	     </div><br />
	    <br />
		 <div class="corner"><br />
	 	      <img src="images/corner_person2.png" height="125" alt="" border="0"><br />
      	 </div><br />
	<br />
	</div><br />
	<br />
	<div class="main"><br />
		  <div class="frontpage"><br />
		     <center><br />
	 	       <table border="0" cellspacing="0" cellpadding="0"><br />
 		   		     <tr><br />
					     <td width="250" align="right" valign="middle"><br />
		                   <a href="index.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('image1','','images/main_welcome2.jpg',1)">Home</a>&nbsp;<br><br><br />
        		           <a href="pages/design_index.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('image1','','images/main_website.jpg',1)">Website Design</a>&nbsp;<br><br><br />
                 	       <a href="pages/neopets_index.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('image1','','images/main_neopets.jpg',1)">Neopets Code and Graphics</a>&nbsp;<br><br><br />
        	  	           <a href="pages/wolf_index.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('image1','','images/main_wolf.jpg',1)">The Really Wild&nbsp;<br>Wolf Pack Guild</a>&nbsp;<br><br><br />
        			     </td><br />
    	        	     <td width="300"><br />
			  	         <center><br />
            		  	     <p><img name="image1" src="images/main_welcome.jpg" width="426" height="245" border="0" alt="Welcome to Zea Web" align="middle"></p><br />
 	    			     </center><br />
        			     </td><br />
   		        	     <td width="250" align="left" valign="middle"><p><br />
			          	    &nbsp;<a href="smf/index.php" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('image1','','images/main_odds.jpg',1)">Forums</a><br><br><br />
      				        &nbsp;<a href="pages/talk_index.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('image1','','images/main_talk.jpg',1)">Talk to Zea</a><br><br><br />
     					    &nbsp;<a href="pages/links_index.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('image1','','images/main_links.jpg',1)">Links</a><br><br><br />
		    			    &nbsp;<a href="pages/about_index.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('image1','','images/main_about.jpg',1)">About Zea</a><br />
			             </td><br />
          			 </tr><br />
   		       </table><br />
		     </center><br />
		     <br><br><br />
    	  </div><br />
<br />
		  <div class="footer"><br />
		  	    <div class="footbar"><br />
					<div class="ads"><center><br />
				 <table width="100%" height="90px"><br />
					<tr><br />
       				<td width="33%"><br />
					<form action="https://www.paypal.com/cgi-bin/webscr" method="post"><br />
<input type="hidden" name="cmd" value="_s-xclick"><br />
<input type="hidden" name="encrypted" value="-----BEGIN PKCS7-----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-----END PKCS7-----<br />
"><br />
<input type="image" src="http://www.zea-web.com/images/donate_gears5.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!"><br />
<img alt="" border="0" src="https://www.paypal.com/en_US/i/scr/pixel.gif" width="1" height="1"><br />
</form><br />
<br />
<br />
					</td><br />
       				<td width="33%"><br />
						 <!-- Beginning of Project Wonderful ad code: --><br />
					     <!-- Ad box ID: 35458 --><br />
					     <script type="text/javascript"><br />
					     <!--<br />
					     var d=document;<br />
					     d.projectwonderful_adbox_id = "35458";<br />
					     d.projectwonderful_adbox_type = "1";<br />
					     d.projectwonderful_foreground_color = "";<br />
					     d.projectwonderful_background_color = "";<br />
					     //--><br />
					     </script><br />
					     <script type="text/javascript" src="http://www.projectwonderful.com/ad_display.js"></script><br />
					     <noscript><map name="admap35458" id="admap35458"><area href="http://www.projectwonderful.com/out_nojs.php?r=0&amp;c=0&amp;id=35458&amp;type=1"shape="rect" coords="0,0,468,60" title="" alt="" target="_blank" /></map><br />
					     <table cellpadding="0" border="0" cellspacing="0" width="468" bgcolor="#ffffff"><tr><td><img src="http://www.projectwonderful.com/nojs.php?id=35458&amp;type=1" width="468" height="60" usemap="#admap35458" border="0" alt="" /></td></tr><tr><td bgcolor="#ffffff" colspan="1"><center><br />
						 <a style="font-size:10px;color:#0000ff;text-decoration:none;line-height:1.2;font-weight:bold;font-family:Tahoma, verdana,arial,helvetica,sans-serif;text-transform: none;letter-spacing:normal;text-shadow:none;white-space:normal;word-spacing:normal;" href="http://www.projectwonderful.com/advertisehere.php?id=35458&amp;type=1" target="_blank"><br />
						 Ads by Project Wonderful!  Your ad here, right now: $0</a></center></td></tr><tr> <td colspan=1 valign="top" width=468 bgcolor="#000000" style="height:3px;font-size:1px;padding:0px;max-height:3px;"></td></tr></table><br />
					     </noscript><br />
					     <!-- End of Project Wonderful ad code. --></td><br />
       				<td width="33%"><div align="right"><font color="#c8c8c8" size="-3"><sub>Neopets-related images (c) 2000-2009 Neopets, Inc. </sub><br><br />
					 		                <sup>All Rights Reserved. Used With Permission.<br><br />
							All other images copyright Zea-Web.</font></sup></div><br />
					</td><br />
					</tr><br />
				</table><br />
				 </div><br />
				   <br />
				   					<br />
				</div><br />
				<br />
				<br />
		  </div><br />
 <br />
	</div><br />
<br />
<br />
	<br />
<br />
<br />
</body><br />
<br />
</html><br />
Posted
Add a Solution

3 solutions

PHP is a nightmare, and there's a free edition of ASP.NET which I am sure will support master pages.
 
Share this answer
 
Posted
It's easier than it sounds.

Firstly, create a folder called templates.

Then create seperate files for the header, footer, menu, ..., etc.

NOTE: htdocs is your web directory.

htdocs/templates/header.php
<html>
   <head>
      <title>TITLE</title>
      ...
   </head>

htdocs/templates/menu.php
<div id="menu">
   ...
</div>


...

You get the idea.

So basically, everything BUT the content is stored in the templates.

Now for your custom page:

htdocs/index.php
<?php
require( 'templates/header.php' );
require( 'templates/menu.php' );
?>

Your custom page content goes here!

<?php
require( 'templates/footer.php' );
?>
 
Share this answer
 
Posted
oops, terrible, I am new learner about CSS/HTML, and dunno much Tech and easy way. watch this.:confused:
 
Share this answer
 
Posted
Add a Solution

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

  Print Answers RSS
Top Experts
Last 24hrsThis month
Related Questions
Convert form C# to PHP
Overtime System in PHP
[PHP] Template Class
I need help I am new to creating websites and need help in coding a website that will store user logins in a database when they sign up.
Need help with cookies
Need help opening a PHP file in xampp
Need a Wide collection of website templates?
Php signup/login system problem
How can I change one color code to another one in all lines together in bootstrap/html+css?
BarCode System in Website

Advertise
Privacy
Cookies
Terms of Use
Last Updated 12 Jan 2010
Layout: fixed | fluid
Copyright © CodeProject, 1999-2024
All Rights Reserved.

Web04 2.8:2024-04-02:1

CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900