Avoiding redundancy in your code

Howdy everyone,

Very first post here. A certain amount of background first… I used to be a C, C++, in addition to x86 assembly software program engineer. I spent all his time making sure I became utilizing good merchandise oriented techniques when coding and in the act of learning html I find myself initially frustrated simply because this seems difficult to do with HTML. As a result the Html page I’m generating has A lot of redundancy and Many opportunities to miss something as the site grows only decide to make a change to that redundant code that your. I assume there actually are some good methods of practice OOP with web development but since Now i’m so new… I simply don’t know where to take a look yet.

Okay obviously, how ’bout an example. I need to get up to date fast so WHEN I figured Dreamweaver was the best way to do this. So far so great but I’ve run into a bit of frustration with the particular menu bar.

The website I’m designing carries a menu bar and the bar is the identical under every web site. I’m using the actual Spry Menus within CS4. So, say I have this particular menu structure:

residence about pulldown1 pulldown2 phone location

therefore home links to help index. html, going to about. html, contact to contact. html and location to location. html

pulldown1 and pulldown2 comprise links to topical items so that they are in a folder around the root (called pulldown1 and pulldown2 respectively). Just about every submenu has numerous items… a, b, c, etc. which would be of a. html, b. html code, c. html, etc. If you find c. html it platforms the content for your page… here’s your kicker… the UI maintains the same nav menu during the entire entire website but to carry out that the code for that menubar must end up being replicated on Each and every HTML file and I dislike having redundant computer code. Should I get out there and change that eventually I have to edit Almost every file one specific.

Finally I don’t really want that. I wish to have the palate bar code available as one place so plainly change it, I simply change one file. It would possibly be great to write a menu purpose of sorts that we could just telephone from each web coding file and please have a #include with the top defining each function so as to not have to replicate identical code all above.

Can someone point me from the right direction of how I would go about repeating this with html

Kind regards, Joe

You simply can’t do it along with html. " php includes" is ideal. You can yahoo that, it’s very easy. Also, DW possesses " save when template" feature where you build the chief components (navbar, header, footer), save it like a template, then bring editable regions. You change the template and it changes on all pages. But similar to I said, php includes is an effective way as it may be a server side file which is called upon.

Thought I’d already posted a response… long day this morning. Anyhow, thank everyone Steve. That was *exactly* what I was looking for! Muchly loved.

Kind regards, Joe

Even better would be to use a templating composition that would permit you to wrap redundant snippets connected with HTML into template blocks that one could use to place other content.

A person lost me at " framework"! What does this involve

Should you be making your website for websites then your website should meet your users criteria as well as for this purpose make sure you hire an amazing web development company so there should end up being redundancy in any part of your website, moreover your site should be good so that any internet strategy can be start out here…



BTW, aero… in reference to your question above (which POST missed), a templating framework will be something like just what popular CMSes allow utilizing templating systems, or what you can do with XSL-T. Generally, you design the HTML of your respective site in " blocks" and also " wrappers". Each repeatable section contains a set of HTML PAGE. Then you define while in the programming how these kind of wrappers wrap subject matter and/or wrap the other person.

Here’s among an XSL-T template I made for a website about 5 rice. It’s probably a little bit outdated, but it will give you a sense connected with how templating is effective:

< xml version=" ONE. 0" encoding=" iso-8859-1" >
< xsl: stylesheet xmlns: xsl=" http: //www. w3. org/1999/XSL/Transform" version=" ONE. 0" >
<! -- Imported Templates -->
< xsl: tranfer href=" links. xslt" />
< xsl: tranfer href=" strings. xslt" />

<! -- Output Settings -->
< xsl: output media-type=" text/xml" version=" ONE. 0" encoding=" iso-8859-1" omit-xml-declaration=" yes" />

<! -- Details -->
< 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" />

<! -- Total Template -->
< xsl: format match=" /" >
<! --
< html code xmlns=" http: //www. w3. org/1999/xhtml" >
< html>
< head>
< title> < xsl: value-of select=" //*id=$id/contentlang=$lang/title" /> < /title>
< meta name=" description" content=" //*id=$id/contentlang=$lang/description" > < /meta>
< meta name=" keywords" content=" //*id=$id/contentlang=$lang/keywords" > < /meta>
< hyperlink 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" > <! CDATAvar 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" >
< the 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> < the href=" index. jsppage=$page& amplifier; id=$id& amp; template=$template& amplifier; locale=en_US" > < span> English< /span> < /a> < /div>
< div> < the href=" index. jsppage=$page& amplifier; id=$id& amp; template=$template& amplifier; locale=es_ES" > < span> Espaol< /span> < /a> < /div>
< div> < the href=" index. jsppage=$page& amplifier; id=$id& amp; template=$template& amplifier; locale=pt_PT" > < span> Portugus< /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" >
< the href=" index. jsp" > < img src=" /images/logo. gif" width=" 190" height=" 50" border=" 0" alt=" Turf 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>

<! -- Selection Template -->
< xsl: format 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=" contentlang=$lang/title" />
< /xsl: call-template>
< /h4> < /div>
< /xsl: for-each>
< /div>
< /xsl: template>

<! -- Alternatives Navigation Templates -->
< xsl: format match=" solutions" mode=" nav" >
< div id=" navigation" >
< xsl: apply-templates select=" *" mode=" nav" />
< /div>
< /xsl: template>
< xsl: format 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=" contentlang = $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 Selection Templates -->
< xsl: format ma

This entry was posted in Web Design and tagged , , , , , , , , , , , , , , , , , , , . Bookmark the permalink.

Related Posts

One Response to Avoiding redundancy in your code

Leave a Reply

Your email address will not be published. Required fields are marked *