...

View Full Version : I need info on how to convert an html+css website into one with a template system



deganu
12-31-2009, 05:29 PM
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>
<head>
<script src="scripts/rollover.js" type="text/javascript"></script>
<LINK REL=stylesheet HREF="scripts/gears.css" TYPE="text/css">
<title>Zea Web</title>
</head>
<body>

<img id="welcome" src="images/title_welcome.gif" width="105" height="21" alt="" border="0">
<img id="title" src="images/title_zea.gif" width="408" height="94" alt="" border="0">

<div class="topbar">
<div class="bar2"></div>
<div class="navcontainer">
<div class="nav">
<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">
<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">
<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">
<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">
<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">
<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">
<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">
<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>
</div>
</div>

<div class="corner">
<img src="images/corner_person2.png" height="125" alt="" border="0">
</div>

</div>

<div class="main">
<div class="frontpage">
<center>
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="250" align="right" valign="middle">
<a href="index.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('image1','','images/main_welcome2.jpg',1)">Home</a>&nbsp;<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>
<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>
<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>
</td>
<td width="300">
<center>
<p><img name="image1" src="images/main_welcome.jpg" width="426" height="245" border="0" alt="Welcome to Zea Web" align="middle"></p>
</center>
</td>
<td width="250" align="left" valign="middle"><p>
&nbsp;<a href="smf/index.php" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('image1','','images/main_odds.jpg',1)">Forums</a><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>
&nbsp;<a href="pages/links_index.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('image1','','images/main_links.jpg',1)">Links</a><br><br>
&nbsp;<a href="pages/about_index.html" onMouseOut="MM_swapImgRestore()" önMouseOver="MM_swapImage('image1','','images/main_about.jpg',1)">About Zea</a>
</td>
</tr>
</table>
</center>
<br><br>
</div>

<div class="footer">
<div class="footbar">
<div class="ads"><center>
<table width="100%" height="90px">
<tr>
<td width="33%">
<form action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_s-xclick">
<input type="hidden" name="encrypted" value="-----BEGIN PKCS7-----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-----END PKCS7-----
">
<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!">
<img alt="" border="0" src="https://www.paypal.com/en_US/i/scr/pixel.gif" width="1" height="1">
</form>


</td>
<td width="33%">
<!-- Beginning of Project Wonderful ad code: -->
<!-- Ad box ID: 35458 -->
<script type="text/javascript">
<!--
var d=document;
d.projectwonderful_adbox_id = "35458";
d.projectwonderful_adbox_type = "1";
d.projectwonderful_foreground_color = "";
d.projectwonderful_background_color = "";
//-->
</script>
<script type="text/javascript" src="http://www.projectwonderful.com/ad_display.js"></script>
<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>
<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>
<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">
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>
</noscript>
<!-- End of Project Wonderful ad code. --></td>
<td width="33%"><div align="right"><font color="#c8c8c8" size="-3"><sub>Neopets-related images (c) 2000-2009 Neopets, Inc. </sub><br>
<sup>All Rights Reserved. Used With Permission.<br>
All other images copyright Zea-Web.</font></sup></div>
</td>
</tr>
</table>
</div>


</div>


</div>

</div>





</body>

</html>

oracleguy
12-31-2009, 06:10 PM
You will want to look into using server side includes.

You should also consider seriously reworking your HTML, you are suffering from a bad case of div-itus.

Excavator
12-31-2009, 06:17 PM
Hello deganu,
Welcome to codingforums.com!

oracleguy is right, includes can be your friend. Have a look at a good tutorial here. (http://www.tizag.com/phpT/include.php)
Maybe this tutorial about creating templates in DW (http://dmx-templates.com/tutorials/tutnewtemplate.cfm) will help as well?

The code you quoted in your post doesn't have a DocType and it really needs one. See the link about DocTypes in my sig below...as well as the links about validation and use of tables.

An explanation of Divitis can be found here (http://www.apaddedcell.com/div-itis).



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum