I have a new website at the following url: http://loveunchained.com The problem I have is that i have a sidebar that has information that changes monthly (i.e. site of the month, vid of the month, fiction of the month, site news,etc.) I would like to be able to change this info only once and not once for every page!!! You see my dilema. I have read about i frames and ajax pages but am not sure if that is the way to go. Please can someone please help me!!
What you need are includes. SSI tutorial. That's for a web server include. For your favorite server side language, RTFM for that language. cheers, gary
um I'm sorry I'm new to all this coding and stuff. The website I had before was a tripod one with one of those easy site builders!! So I'm just learning how to do these things Is there a simpler way to explain this in stupid just starting out webmiss terms?
OK, we're talking about server side includes, SSI. The basic premise is that the server or the server side scripting language you're using will take a bit of code that's been saved in a file, and paste the file's content into the page. For example, let's say this is a representative page on your site: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" lang="en"> <head> <meta name="generator" content= "HTML Tidy for Linux/x86 (vers 1st August 2004), see www.w3.org" /> <meta name="editor" content="Emacs 21" /> <meta name="author" content="Gary Turner" /> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title></title> <style type="text/css"> /*<![CDATA[*/ html, body { margin: 0; padding: 0; } /*]]>*/ </style> </head> <body> <div id="wrapper"> [color=blue]<div id="topbanner"> <img src="logo.jpg" alt="xyz corp" /> <p><a href="sitemap.html" title="a floor plan of the site">sitemap</a></p> </div> <!-- end topbanner -->[/color] [color=red]<div id="nav"> <ul> <li>link</li> <li>link</li> <li>link</li> <li>link</li> </ul> </div> <!-- end nav -->[/color] <div id="main"> <h1>main stuff</h1> <p>blah, blah, blah</p> </div> <!-- end main --> </div> <!-- end wrapper --> </body> </html> Code (markup): Take the colored portions, and save to plain text files named, say, topbanner.inc and nav.inc. The .inc extension is a common protocol, but it could be anything. Now, if the pages were to use an include tag, the content of the file would replace the tag. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" lang="en"> <head> <meta name="generator" content= "HTML Tidy for Linux/x86 (vers 1st August 2004), see www.w3.org" /> <meta name="editor" content="Emacs 21" /> <meta name="author" content="Gary Turner" /> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title></title> <style type="text/css"> /*<![CDATA[*/ html, body { margin: 0; padding: 0; } /*]]>*/ </style> </head> <body> <div id="wrapper"> <!--#include virtual="topbanner.inc" --> <!--#include virtual="nav.inc" --> <div id="main"> <h1>main stuff</h1> <p>blah, blah, blah</p> </div> <!-- end main --> </div> <!-- end wrapper --> </body> </html> Code (markup): As you can see, a change in the nav.inc file would be applied to every page that had the <!--#include="nav.inc" --> tag—all in one fell swoop. cheers, gary
Hello, msbigbad. Depending on what kind of software you are using, there may be different solutions to you problem. The HTML approach you may use also differs according to your tastes and your knowledge. The SSI (server side includes) approach that Gary suggested is the easiest way if it is supported by your host and you are not so expert with HTML and JavaScript. You will have to replace in all pages the sidebar markup with something like the following: <!--#include virtual="/sidebar.inc" --> "sidebar.inc" is an include file that will contain the code you pulled out of the pages, i.e., it won't be a stand-alone page.