Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 10 of 10
  1. #1
    Junior Member
    Join Date
    Jan 2010
    Posts
    2
    Member #
    21005
    Hi everyone,

    First post here. A bit of background first... I used to be a C, C++, and x86 assembly software engineer. I spent a lot of time making sure I was utilizing good object oriented techniques when coding and in the process of learning html I find myself initially frustrated because this seems difficult to do with HTML. As a result the HTML code I'm generating has A LOT of redundancy and A LOT of opportunities to miss something as the site grows if I decide to make a change to the redundant code in question. I assume there actually are some good ways to practice OOP with web design but since I'm so new... I just don't know where to look yet.

    Okay that said, how 'bout an example. I need to get up to speed fast so I figured Dreamweaver was a good way to do this. So far so good but I've run into a bit of frustration with the menu bar.

    The website I'm designing has a menu bar and that bar is the same under every web page. I'm using the Spry Menus in CS4. So, let's say I have the following menu structure:

    home || about || pulldown1 || pulldown2 || contact || location

    so home links to index.html, about to about.html, contact to contact.html and location to location.html

    pulldown1 and pulldown2 contain links to topical items so they are in a folder on the root (called pulldown1 and pulldown2 respectively). Each submenu has several items... a, b, c, etc. which would be associated with a.html, b.html, c.html, etc. If you select c.html it displays the content for that page... here's the kicker... the UI maintains the SAME nav menu throughout the entire website but in order to do that the code for the menubar must be replicated on EVERY single HTML file and I don't like having redundant code. Should I decide to change that at some point I have to edit EVERY single file on the website.

    Ultimately I don't want that. I would like to have the menu bar code in ONE place so if I change it, I just change one file. It would be great to write a menu function of sorts that I could just call from each html file and just have a #include at the top defining each function so as to not have to replicate the same code all over.

    Can someone point me in the right direction of how I might go about doing this with html?

    Cheers, Joe

  2.  

  3. #2
    Senior Member aeroweb99's Avatar
    Join Date
    Feb 2008
    Location
    Port Huron, Michigan
    Posts
    1,037
    Member #
    16468
    Liked
    1 times
    You can't do it with html. "php includes" is the way to go. You can google that, it's pretty easy. Also, DW has "save as template" feature where you build the main components (navbar, header, footer), save it as a template, then add editable regions. You change the template and it changes on all pages. But like I said, php includes is the best way as it is a server side file that is called upon.

  4. #3
    Junior Member
    Join Date
    Jan 2010
    Posts
    2
    Member #
    21005
    Thought I'd already posted a response... long day yesterday. Anyhow, thank you Steve. That was *exactly* what I was looking for! Muchly appreciated.

    Cheers, Joe

  5. #4
    WDF Staff smoseley's Avatar
    Join Date
    Mar 2003
    Location
    Boston, MA
    Posts
    9,729
    Member #
    819
    Liked
    205 times
    Even better would be to use a templating framework that would allow you to wrap redundant snippets of HTML into template blocks that you can use to wrap other content.

  6. #5
    Senior Member aeroweb99's Avatar
    Join Date
    Feb 2008
    Location
    Port Huron, Michigan
    Posts
    1,037
    Member #
    16468
    Liked
    1 times
    You lost me at "framework"! What does this involve?

  7. #6
    Banned
    Join Date
    Dec 2009
    Posts
    43
    Member #
    20675
    Liked
    7 times
    If you are making your website for your online business then your website should meet the users criteria and for this purpose you should hire a very good web development company so that there should be redundancy in any section of your website, moreover your website should be good so that any internet marketing campaign can be start here...

  8. #7
    Senior Member aeroweb99's Avatar
    Join Date
    Feb 2008
    Location
    Port Huron, Michigan
    Posts
    1,037
    Member #
    16468
    Liked
    1 times
    Quote Originally Posted by mark villey
    If you are making your website for your online business then your website should meet the users criteria and for this purpose you should hire a very good web development company so that there should be redundancy in any section of your website, moreover your website should be good so that any internet marketing campaign can be start here...
    What?

  9. #8
    WDF Staff smoseley's Avatar
    Join Date
    Mar 2003
    Location
    Boston, MA
    Posts
    9,729
    Member #
    819
    Liked
    205 times
    LMFAO

  10. #9
    WDF Staff smoseley's Avatar
    Join Date
    Mar 2003
    Location
    Boston, MA
    Posts
    9,729
    Member #
    819
    Liked
    205 times
    BTW, aero... in reference to your question above (which I missed), a templating framework would be something like what popular CMSes allow with their templating systems, or what you are able to do with XSL-T. Basically, you design the HTML of your site in "blocks" or "wrappers". Each repeatable section contains its own set of HTML. Then you define within the programming how these wrappers wrap content and/or wrap each other.

    Here's an example of an XSL-T template I made for a website about 5 years ago. It's probably a little outdated, but it gives you a sense of how templating works:

    Code:
    <?xml version="1.0" encoding="iso-8859-1" ?> 
    <xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
      <!-- Imported Templates -->
      <xsl:import href="links.xslt" />
      <xsl:import href="strings.xslt" />
      
      <!-- Output Settings -->
      <xsl:output media-type="text/xml" version="1.0" encoding="iso-8859-1" omit-xml-declaration="yes" />
      
      <!-- Parameters -->
      <xsl:param name="lang">en</xsl:param>
      <xsl:param name="style">base</xsl:param>
      <xsl:param name="rootUrl">http://www.rooturl.com/</xsl:param>
      <xsl:param name="dataUrl">
        <xsl:value-of select="concat($rootUrl, 'xml/')" />
      </xsl:param>
      <xsl:param name="template" />
      <xsl:param name="page" />
      <xsl:param name="id" select="$page" />
      
      <!-- Overall Template -->
      <xsl:template match="/">
        <!--
        <html xmlns="http://www.w3.org/1999/xhtml">
        -->
        <html>
          <head>
            <title><xsl:value-of select="//*[@id=$id]/content[@lang=$lang]/@title" /></title>
            <meta name="description" content="{//*[@id=$id]/content[@lang=$lang]/@description}"></meta>
            <meta name="keywords" content="{//*[@id=$id]/content[@lang=$lang]/@keywords}"></meta>
            <link rel="stylesheet" type="text/css" href="/css/{$style}.css"></link>
            <script language="javascript" type="text/javascript" src="/js/bittime.js"></script>
            <script language="javascript" type="text/javascript"><![CDATA[var flashVersion = 0;]]></script>
            <script language="javascript" type="text/javascript" src="/js/flash.js"></script>
          </head>
          <body>
            <!-- Base Template -->
            <div id="bg">
              <div id="header-bg">
                <div id="header">
                  <div id="header-left">
                    <a href="index.jsp">
                      <img alt="Logo" border="0" height="50" src="images/gra-logo.gif" width="190">
                    </a>
                  </div>
                  <div id="header-right">
                    <div id="languages">
                      <div><a href="index.jsp?page={$page}&amp;id={$id}&amp;template={$template}&amp;locale=en_US"><span>English</span></a></div>
                      <div><a href="index.jsp?page={$page}&amp;id={$id}&amp;template={$template}&amp;locale=es_ES"><span>EspaŮol</span></a></div>
                      <div><a href="index.jsp?page={$page}&amp;id={$id}&amp;template={$template}&amp;locale=pt_PT"><span>PortuguÍs</span></a></div>
                    </div>
                    <xsl:apply-templates select="document('menu.xml', $dataUrl)" mode="menu" />
                      <div id="america-band">
                        <img alt="Americas" border="0" src="images/americas-logo.gif">
                      </div>
                  </div>
                  <div id="header-right">
                    <a href="index.jsp"><img src="/images/logo.gif" width="190" height="50" border="0" alt="Grass Roots BitTime" /></a>
                  </div>
                </div>
              </div>
              <div id="body-bg">
                <div id="body">
                  <xsl:apply-templates />
                </div>
              </div>
              <div id="footer-bg">
                <div id="footer">
                  <p class="copyright">Copyright ©1999-2006</p>
                </div>
              </div>
            </div>
          </body>
        </html>
      </xsl:template>
      
      <!-- Menu Template -->
      <xsl:template match="menu" mode="menu">
        <div id="menu">
          <xsl:for-each select="link">
            <div><h4>
              <xsl:call-template name="link">
                <xsl:with-param name="template" select="@template" />
                <xsl:with-param name="page" select="@href" />
                <xsl:with-param name="id" select="@id" />
                <xsl:with-param name="text" select="content[@lang=$lang]/@title" />
              </xsl:call-template>
            </h4></div>
          </xsl:for-each>
        </div>
      </xsl:template>
      
      <!-- Solutions Navigation Templates -->
      <xsl:template match="solutions" mode="nav">
        <div id="navigation">
          <xsl:apply-templates select="*" mode="nav" />
        </div>
      </xsl:template>
      <xsl:template match="solution" mode="nav">
        <div>
          <h4>
            <xsl:call-template name="link">
              <xsl:with-param name="template">solution</xsl:with-param>
              <xsl:with-param name="page" select="$page" />
              <xsl:with-param name="id" select="@id" />
              <xsl:with-param name="text" select="content[@lang = $lang]/@title" />
            </xsl:call-template>
          </h4>
          <xsl:if test="contains($id, @id)">
            <ul>
              <xsl:apply-templates select="modules/module" mode="nav" />
            </ul>
          </xsl:if>
        </div>
      </xsl:template>
    
      <!-- Sidebar Navigation Templates -->
      <xsl:template match="section" mode="nav">
        <div id="navigation">
          <div>
            <h4>
              <xsl:call-template name="link">
                <xsl:with-param name="template" select="local-name()" />
                <xsl:with-param name="page" select="$page" />
                <xsl:with-param name="text" select="//section/content[@lang = $lang]/@title" />
              </xsl:call-template>
            </h4>
            <ul>
              <xsl:apply-templates select="clients/client|pages/page" mode="nav" />
            </ul>
          </div>
        </div>
      </xsl:template>
      
      <xsl:template match="client[count(projects/project)>0]|page|module" mode="nav">
        <xsl:variable name="template">
          <xsl:choose>
            <xsl:when test="@template">
              <xsl:value-of select="@template" />
            </xsl:when>
            <xsl:otherwise>
              <xsl:value-of select="local-name()" />
            </xsl:otherwise>
          </xsl:choose>
        </xsl:variable>
        <li>
          <xsl:call-template name="link">
            <xsl:with-param name="template" select="$template" />
            <xsl:with-param name="page" select="$page" />
            <xsl:with-param name="id" select="@id" />
            <xsl:with-param name="text" select="content[@lang = $lang]/@title" />
          </xsl:call-template>
        </li>
      </xsl:template>
    
      <!-- Image List Template -->
      <xsl:template match="*" mode="imageList">
        hi
        <img src="/images/clients/{content[@lang=$lang]/@image}" />
      </xsl:template>
      
      <!-- Header Template -->
      <xsl:template name="header">
        <xsl:param name="id" />
        <xsl:param name="title" />
        <xsl:if test="$style != ''">
          <div id="header-image">
            <img src="images/headers/{$lang}/{$id}.jpg" width="750" height="120" border="0" alt="{$title}" /><br />
          </div>
        </xsl:if>
      </xsl:template>
      
      <!-- HTML Elements Templates -->
      <xsl:template match="div|span|p|ul|ol|dl|li|h1|h2|h3|a|img|table|thead|tbody|tr|th|td|center">
        <xsl:copy-of select="." />
      </xsl:template>
      
      <!-- Objectives -->
      <xsl:template match="objectives">
        <xsl:apply-templates select="objective" mode="window" />
      </xsl:template>
      <xsl:template match="objective" mode="windowContent">
        <div>
          <p><xsl:apply-templates /></p>
        </div>
      </xsl:template>
      
      <!-- Windows -->
      <xsl:template match="*" mode="window">
        <div class="window">
          <div class="left">
            <div class="right">
              <div class="content {@class}">
                <xsl:apply-templates select="." mode="windowContent" />
              </div>
            </div>
          </div>
        </div>
      </xsl:template>
      
      <!-- PODs -->
      <xsl:template match="pods">
        <xsl:for-each select="pod">
          <table class="pod" cellpadding="0" cellspacing="0" border="0">
            <tr>
              <td align="left"><img src="/images/windows/horizontal/top.gif" width="500" height="10" border="0" alt="" /></td>
            </tr>
            <tr>
              <td align="left">
                <div style="padding-left: 10px">
                  <h3><xsl:value-of select="@title" /></h3>
                  <div style="float: left"><img src="/images/icons/{@icon}" width="96" height="96" border="0" alt="{@title}" /></div>
                  <div style="width: 360; float: right"><xsl:apply-templates /></div>
                </div>
              </td>
            </tr>
            <tr>
              <td align="left"><img src="/images/windows/horizontal/bottom.gif" width="500" height="10" border="0" alt="" /></td>
            </tr>
          </table>
        </xsl:for-each>
      </xsl:template>
      
      <!-- Features -->
      <xsl:template match="features">
        <xsl:variable name="title">
          <xsl:choose>
            <xsl:when test="@type"><xsl:value-of select="@type" /></xsl:when>
            <xsl:otherwise><xsl:text>features</xsl:text></xsl:otherwise>
          </xsl:choose>
        </xsl:variable>
        <h3>
          <xsl:call-template name="get-string">
            <xsl:with-param name="lang" select="$lang" />
            <xsl:with-param name="id" select="$title" />
          </xsl:call-template>
        </h3>
        <ul class="features list">
          <xsl:for-each select="feature">
            <li><xsl:apply-templates /></li>
          </xsl:for-each>
        </ul>
      </xsl:template>
      
      <!-- Statistics -->
      <xsl:template match="statistics">
        <ul class="statistics list">
          <xsl:for-each select="statistic">
            <li><xsl:apply-templates /></li>
          </xsl:for-each>
        </ul>
      </xsl:template>
      
      <!-- Source -->
      <xsl:template match="source">
        <span class="source">- <xsl:apply-templates /></span>
      </xsl:template>
    </xsl:stylesheet>

  11. #10
    Senior Member aeroweb99's Avatar
    Join Date
    Feb 2008
    Location
    Port Huron, Michigan
    Posts
    1,037
    Member #
    16468
    Liked
    1 times
    =-O Thanks Steve, looks like nuclear physics to me, but thanks.


Remove Ads

Posting Permissions

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

Search tags for this page

how to avoid redundant code

,

html redundant code on every page

,

redundancy in html code

Click on a term to search for related topics.
All times are GMT -6. The time now is 10:55 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com