PDA

View Full Version : Puzzled over how Server-Side include works within Dreamweaver


PC Bytes
04-20-2007, 05:18 PM
Hi everybody

This is my first post, I'm new to Dreamweaver. Before now I've always used Serif Webplus 10. The problem with this is that it produces absolute positioning which I don't like. The upside is that it takes care of all the coding for you.

Anyway. I am rebuilding a website that I had created in Webplus. I want a graphic Banner at the top, and some form of Navigation Bar on the left. I started by using frames but am told this has implications for search engines and is not ideal.

Therefore I am using Tables and Server-Side include. I create my banner in dreamweaver and rename this to banner.shtml I then start a new page and put a table 2 colums wide and 3 rows long. In the top right hand side column I tell Dreamweaver to insert a serverside include (banner.shtml). Now I can't type anything under this include, only above it. The same happens if I insert a shtml page with a navigation bar in it. Dreamweaver seems to be inserting the banner as well as the rest of the blank page and so I can't add any text.

Can anybody tell me what I am doing wrong?

The page I am working on is http://www.pc-bytes.co.uk/test/test.shtml

When I view the page sourse it doesn't actually show the ssi in the source so this is he source of the page:


!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>
<body>
<table width="100%" border="0">
<tr>
<td width="13%">&nbsp;</td>
<td width="87%"><!--#include virtual="banner.shtml" --></td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>
</body>
</html>


I really appreciate any help anybody can give on this, and I realise it's asking a lot because I'm new to the forum.

Many Thanks

Lee

Cary
04-21-2007, 12:38 AM
You are kind of on the right path, but notice how test.shtml is inserting all of the contents of banner.shtml? Except for the banner cell contents your test page is pretty much a complete html page.

The only info it needs is the banner code. You could just use the .html extension with the banner page since it doesn't include any SSI code. However, the only text you should have on the banner page is this:

<td width="14%"><div align="left"><img src="scibadge.gif" alt="SCI Logo" width="136" height="132" /></div></td>
<td width="16%"><img src="aniMartialArtsWhitebelt.gif" alt="White Belt" width="48" height="100" /></td>
<td width="40%"><div align="center"><img src="WSC Logo.gif" alt="WSC Logo" width="251" height="136" /></div></td>
<td width="16%"><div align="right"><img src="aniMartialArtsBlackbelt.gif" alt="Black Belt" width="48" height="100" /></div></td>
<td width="14%"><div align="right"><img src="scibadge.gif" alt="SCI Logo" width="136" height="132" /></div></td>
Your test.shtml page already contains the tr tag to hold these cells.

See if this then fixes your editing problems in DW. Having two sets each of html, head, and body tags were probably confusing it.

You'll also need to insert this styling in the head of test.shtml since you don't want it inserted into the table row with your banner cells (xhtml shouldn't have the comment tags).

<style type="text/css">
body {
background-color: #d6edfd;
}
</style>

Cary
04-21-2007, 12:46 AM
Oh, I just noticed this. You should probably use this code in test.shtml instead of what you have.

<tr>
<!--#include virtual="banner.shtml" -->
</tr>

Your banner page provides all the cells for this row. Of course, you're going to have to modify the other rows one way or another since they only have two cells each.

PC Bytes
04-21-2007, 08:56 PM
Hi Cary

Many Thanks for your reply. I have taken your advice and that seems to solve the problem, thank you.

I am struggling with a menu now. It does the same thing, as soon as I insert the Server Side include page Menu.html I can not edit any of the other cells in the table on test.shtml

I even tried putting text into the table first, which shows in the source but not on the page.

The test page is: http://www.pc-bytes.co.uk/test/test.shtml

The new banner page (which now works fine) is: http://www.pc-bytes.co.uk/test/Banner.html

If it helps, the menu page is: http://www.pc-bytes.co.uk/test/Menu.html

I have made sure the menu page has no Body or Head tags this time but it doesn't help.

Many thanks for any advice you or anybody else can offer.

Lee

Cary
04-21-2007, 10:40 PM
Hi Lee,

The easiest way to do what you are attempting is to just go ahead and create the completed page without using any SSI. Then you can see the complete code, split it into pieces, and save those various parts into other files while replacing the locations they take up in the original file with the SSI code.

You basically are making a puzzle of sorts with the missing pieces added latter on. If the pieces don't fit, then the puzzle looks really bad. The easiest way to make a puzzle is to start with the full picture and simply cut pieces out of it. This is all you really need to do.

By starting with pieces with excess information, you're going to have a very hard time.

For instance, your menu.html includes the opening body tag, but the shtml already takes care of that. Your menu.html also has the closing body, and html tags, but again,this is in also in your shtml file... The pieces aren't matching up and that's what is throwing DW off. Begin with the complete page and then simply cut out the banner and menu sections and paste them into external files.

This also allows you to easily validate your code before going too far. For instance, you would find that the banner code invalidates the final page because your shtml file has an xhtml doctype, but your banner.html file's img tags aren't closed in the xhtml style (with the space and the "/").

I hope these tips help.

PC Bytes
04-22-2007, 04:41 PM
Hi Cary

I just wanted to say thank you. Your suggestion works a treat. In the space of a few days I've gone from having to use frames to being able to use tables with server side includes. Thank you so much for all your help. I have also added a footer to all my pages using ssi in the same way. Many thanks again.

Lee

PC Bytes
04-22-2007, 05:41 PM
Oh dear

I spoke to soon. I've just uploaded the home page (minus the footer). Where my 2 SSI's are supposed to be I have an error message saying 'an error occurred while processing this directive'

Does anybody know what has gone wrong?

http://pc-bytes.co.uk/test/

Many Thanks

Lee

Cary
04-22-2007, 06:49 PM
Did you use the correct case in your SSI code? For instance, Menu.html instead of menu.html?

PC Bytes
04-22-2007, 07:07 PM
Did you use the correct case in your SSI code? For instance, Menu.html instead of menu.html?
Ooops. Yes I had made that schoolboy error. Unfortunately I've now corrected it and the menu is working but I still get the error where the banner.html should be.

Any ideas?

Many thanks again

Lee

Cary
04-22-2007, 08:31 PM
This is an almost complete solution, since I don't know the code for your footer, but if you want the results I think you do, then this code should do.

You had spaces in some of your file names. This code uses "%20" instead of spaces for references to those particular file names. I also removed spaces you used for rollover variable names. Basically, you should avoid using spaces in any names for files or variables. In such cases an underscore (_) would be better. As it is, the final page will validate.

index.shtml:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
body {
background-color: #d6edfd;
}
</style>
<script type="text/JavaScript">
<!--
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
</head>
<body onload="MM_preloadImages('Home%202.gif','Where%20&amp; When%202.gif','The%20Art%202.gif','The%20Coaches%2 02.gif','Club%20Stuff%202.gif','Links%202.gif','Co ntact%20Us%202.gif','Guestbook%202.gif')">
<table>
<tr>
<td colspan="2">
<!--#include virtual="banner.html" -->
</td>
</tr>
<tr>
<td width="14%" valign="top">
<!--#include virtual="menu.html" -->
</td>
<td width="86%">
<table width="100%" border="0">
<tr>
<td>
<p>Welcome to the website of Worcester Spirit Combat, a Jujitsu club based in Martley, Worcester. This site will hopefully give you some information about both the club, and ju-jitsu in general. </p>
<p>The club was set up in January 2004 by Sensei Peter Jones, himself a martial arts veteran of numerous styles. Sensei Peter shares Judo founder Professor Kano&rsquo;s vision of Martial Arts being accessible to all. Anyone over the age of six (an insurance company, not club stipulation) can train, irrespective of race, gender, religion, disability or body size. Prices are kept to a minimum in order that no-one loses out in what Sensei Peter sees as a valuable life experience. Aside from insurance which is legally compulsory, nothing else is forced on the student. Students have the chance to study not only jujitsu, but also elements of aikido, kick-boxing and weapons combat. </p>
<p>Worcester Spirit Combat continues to prosper. We are frequently bringing in new ideas to the dojo. We are supported by an international organisation which ensures that its coaches are up-to-date with the law, health and safety and current accepted teaching methods. As coaches, we have to keep ourselves fresh too and this is all to the benefit of the class. </p>
<p>We are a member of Spirit Combat International and Martial Arts All Styles (MAAS). For more information on both these organisations, please see our links page. Please enjoy browsing this site, and why not come along and give it a try! Remember the 1st lesson is always free, so you have nothing to lose. </p>
<p>If you have any questions or comments, please feel free to contact Sensei Peter. His contact details are on the contact page. To find out training days and times please see &lsquo;Where and when&rsquo; in our &lsquo;Club Stuff&rsquo;. Finally, if there is a flashing News logo at the bottom of the page, be sure to click it to find out any new news.</p>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td colspan="2">
&nbsp;<!-- Replace this with your footer code -->
</td>
</tr>
</table>
</body>
</html>banner.html:
<table width="100%" border="0">
<tr>
<td><img src="scibadge.gif" width="136" height="132" alt="SCI Logo" /></td>
<td><div align="center"><img src="WSC%20Logo.gif" alt="WSC Logo" width="251" height="136" /></div></td>
<td><div align="right"><img src="scibadge.gif" width="136" height="132" alt="SCI Logo" /></div></td>
</tr>
</table>menu.html:
<table width="12%" border="0">
<tr>
<td><div align="center"><a href="index.shtml" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Home_Page','','Home%202.gif',1)"><img src="Home.gif" alt="Home Page" name="Home_Page" width="81" height="29" border="0" /></a></div></td>
</tr>
<tr>
<td><div align="center"><a href="where.shtml" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Where_When','','Where%20&amp;%20When%202 .gif',1)"><img src="Where%20&amp;%20When.gif" alt="Where &amp; When?" name="Where_When" width="81" height="29" border="0" /></a></div></td>
</tr>
<tr>
<td><div align="center"><a href="theart.shtml" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('The_Art','','The%20Art%202.gif',1)"><img src="The%20Art.gif" alt="The Art" name="The_Art" width="81" height="29" border="0" /></a></div></td>
</tr>
<tr>
<td><div align="center"><a href="coaches.shtml" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('The_Coaches','','The%20Coaches%202.g if',1)"><img src="The%20Coaches.gif" alt="The Coaches" name="The_Coaches" width="81" height="29" border="0" /></a></div></td>
</tr>
<tr>
<td><div align="center"><a href="clubstuff.shtml" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Club_Stuff','','Club%20Stuff%202.gif ',1)"><img src="Club%20Stuff.gif" alt="Club Stuff" name="Club_Stuff" width="81" height="29" border="0" /></a></div></td>
</tr>
<tr>
<td><div align="center"><a href="links.shtml" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Links','','Links%202.gif',1)"><img src="Links.gif" alt="Links" name="Links" width="81" height="29" border="0" /></a></div></td>
</tr>
<tr>
<td><div align="center"><a href="contactus.shtml" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Contact_Us','','Contact%20Us%202.gif ',1)"><img src="Contact%20Us.gif" alt="Contact Us" name="Contact_Us" width="81" height="29" border="0" /></a></div></td>
</tr>
<tr>
<td><div align="center"><a href="guestbook.shtml" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Guestbook','','Guestbook%202.gif',1)"><img src="Guestbook.gif" alt="Guestbook" name="Guestbook" width="81" height="29" border="0" /></a></div></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td><div align="center"><img src="ashiguruma.gif" width="100" height="122" alt="Ashiguruma" /></div></td>
</tr>
</table>

PC Bytes
04-23-2007, 03:03 PM
Cary

I don't know what to say. I can't thank you enough. That is absolutely fantastic. Thank you so much again.

Regards

Lee