Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Dec 2009
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question I need info on how to convert an html+css website into one with a template system

    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!!!!

    Code:
    <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>
    Last edited by oracleguy; 12-31-2009 at 06:08 PM. Reason: added code tags

  • #2
    Rockstar Coder
    Join Date
    Jun 2002
    Location
    USA
    Posts
    9,074
    Thanks
    1
    Thanked 328 Times in 324 Posts
    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.
    OracleGuy

  • #3
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello deganu,
    Welcome to codingforums.com!

    oracleguy is right, includes can be your friend. Have a look at a good tutorial here.
    Maybe this tutorial about creating templates in DW 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.
    Last edited by Excavator; 12-31-2009 at 06:20 PM.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •