Encapsulating HTML in PHP??

peb7268

Hi Guys... and Gals,

I want to make my site PHP but I have a few questions.
First, I built a site in fireworks, sliced it up and exported it to dreamweaver where im applying CSS and linking everything. An acquaintance told me that using fireworks wasn't the best way to go, that professionally it should be laid out with div tags and CSS only versus the table based way fireworks and photoshop lay things out. If that is the case then what is that process like, generally speaking?

Second,
It is my understanding based upon my study that if I wanted to incase my HTML site in PHP then I basically copy the top and insert it into PHP tags, copy the middle and do that, and then copy the footer and do the same. My problem is though that my page is laid out so erratically that im not sure how to do that. Its not a simple three row layout. I have a logo, then a nav bar directly under it. under this I have a left bar with stuff in it and right beside it is a flash gallery, under the flash gallery is going to be page specific content and then all of it is encase in a footer. Here are some img's of the site:

http://gaglobaltech.net/pt2_of_pg1.jpeg
http://gaglobaltech.net/pg1.jpeg

How do I encase this in php and make it so that the flash gallery and the part right under it is in its own php so It can change from page to page?

Thank you so much for the comments and direction!!

Paul

reddrum

Hi Paul,
It is true you can mix HTML markup and PHP, but if you don't need server side processing then you don't need PHP, HTML does just fine on its own. If you do need PHP I would suggest a PHP tutorial.
As for tabless layout this link http://www.celoxsystems.com/div_tbl_frm.html will simulate a table using div tags, take a look at the markup and you can get the idea of how it works.

funktopia

What I believe your friend is suggesting is that you split your html into re-usable chunks that you include using php. The benefit of this is that when you want to update the html across all the pages, you only need to update the include file rather than manually update each page in your website.

Whilst the details of how to do this depend on your layout, the principle is the same regardless. Assume your pages each look something like the following:

<html>
<head>...</head>
<body>
<div id="header">
<!--page header-->
</div>
<div id="content1">
<!--1st page specific bit of content-->
</div>
<div id="sharedContent">
<!--some shared content that is the same for all pages in your site-->
</div>
<div id="content2">
<!--2nd page specific bit of content-->
</div>
<div id="footer">
<!--page footer-->
</div>
</body>
</html>

Then you can split the shared sections (header, footer and sharedContent) off into separate includes

so we have 3 new files

header.inc.php

<div id="header">
<!--page header-->
</div>

sharedContent.inc.php

<div id="sharedContent">
<!--some shared content that is the same for all pages in your site-->
</div>

footer.inc.php

<div id="footer">
<!--page footer-->
</div>

You can then change your original file as follows

<html>
<head>...</head>
<body>
<?
include "header.inc.php";
?>
<div id="content1">
<!--1st page specific bit of content-->
</div>
<?
include "sharedContent.inc.php";
?>
<div id="content2">
<!--2nd page specific bit of content-->
</div>
<?
include "footer.inc.php";
?>
</body>
</html>

Note that you do not neccessarily need php tags in the includes themselves - they can just be straight chunks of html. Also you will need to make sure your pages are parsed by the PHP parser. Usually the easiest way to do this is to give them the .php extension.

If you do this with all your pages then you will end up with each page in the site only containing the html that is unique to that page whilst all of the shared html is stored in separate includes. This will dramatically reduce the time it takes to make sitewide changes to your site. Whilst the example above is pretty simplistic and only uses includes inside the <body> tag, you can use as many includes as you need and they will also work inside the <head> section as well

One downside tho is that many Wysiwyg editors won't be able to follow the includes so the pages will appear broken in the editor. It depends on your current workflow as to how much of a disadvantage this is to you

peb7268

Thank you both gentleman!

Funktopia, you are right on the money. Thank is exactly what im trying to do.
I am going to try this out and let you know if this works. I hope this will work.

My site layout is basically 3 horizontal container divs for the logo, then the navbar, then a img.

next I have a left column that has some space for announcements and ads, then to the right a main window for page specific content, flash galleries and slideshows, and ect..

then another img and lastly a footer.

I am worried about the middle part getting laid out correctly since it is composed by tons of divs inside of divs and tables. If I just use the PHP include method how do I control the layout of where the elements are placed when the browser renders the page?

here is my layout
http://gaglobaltech.net/pt2_of_pg1.jpeg
http://gaglobaltech.net/pg1.jpeg

Im attatching the html right under this in a separate comment.

peb7268

<link href="CSS/site_layout.css" rel="stylesheet" type="text/css" />

<!-- javacript that preloads the buttons -->
<script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
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_nbGroup(event, grpName) { //v6.0
  var i,img,nbArr,args=MM_nbGroup.arguments;
  if (event == "init" && args.length > 2) {
    if ((img = MM_findObj(args[2])) != null && !img.MM_init) {
      img.MM_init = true; img.MM_up = args[3]; img.MM_dn = img.src;
      if ((nbArr = document[grpName]) == null) nbArr = document[grpName] = new Array();
      nbArr[nbArr.length] = img;
      for (i=4; i < args.length-1; i+=2) if ((img = MM_findObj(args[i])) != null) {
        if (!img.MM_up) img.MM_up = img.src;
        img.src = img.MM_dn = args[i+1];
        nbArr[nbArr.length] = img;
    } }
  } else if (event == "over") {
    document.MM_nbOver = nbArr = new Array();
    for (i=1; i < args.length-1; i+=3) if ((img = MM_findObj(args[i])) != null) {
      if (!img.MM_up) img.MM_up = img.src;
      img.src = (img.MM_dn && args[i+2]) ? args[i+2] : ((args[i+1])? args[i+1] : img.MM_up);
      nbArr[nbArr.length] = img;
    }
  } else if (event == "out" ) {
    for (i=0; i < document.MM_nbOver.length; i++) {
      img = document.MM_nbOver[i]; img.src = (img.MM_dn) ? img.MM_dn : img.MM_up; }
  } else if (event == "down") {
    nbArr = document[grpName];
    if (nbArr)
      for (i=0; i < nbArr.length; i++) { img=nbArr[i]; img.src = img.MM_up; img.MM_dn = 0; }
    document[grpName] = nbArr = new Array();
    for (i=2; i < args.length-1; i+=2) if ((img = MM_findObj(args[i])) != null) {
      if (!img.MM_up) img.MM_up = img.src;
      img.src = img.MM_dn = (args[i+1])? args[i+1] : img.MM_up;
      nbArr[nbArr.length] = img;
  } }
}
//-->
</script>

<!-- Inline CSS for the site-->
<style type="text/css">
<!--
body {
	background-image: url(images/mysitebackground.jpg);
}
#apDiv2 {
	position:absolute;
	left:123px;
	top:274px;
	width:108px;
	height:107px;
	z-index:1;
}
.topleftframe {
	font-size: 10px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
}
.style1 {
	font-size: 26px;
	color: #999999;
}
-->
</style>
</head>

<!-- Tells the site to load the navbar first -->
<body onload="MM_preloadImages('buttons/uphome.png','buttons/overhome.png','buttons/downabout.png','buttons/overabout.png','buttons/downservices.png','buttons/overservices.png','buttons/downportfolio.png','buttons/overportfolio.png','buttons/downcontact.png','buttons/overcontact.png')">
<div class="style3" id="apDiv2">  <span class="topleftframe">Imperative Design is looking for driven talent. <br />
  <br />
Want to join our team? <a href="#">Click here</a> to find out more.
</span></div>

<!-- div tag that holds the body -->
<div id="site_layout">
  <table width="1000" border="0" cellpadding="0" cellspacing="0" bgcolor="">

<tr>
<td width="75"><img src="images/spacer.gif" width="100" height="1" border="0" alt="" /></td>
<td width="147"><img src="images/spacer.gif" width="147" height="1" border="0" alt="" /></td>
<td width="674"><img src="images/spacer.gif" width="605" height="1" border="0" alt="" /></td>
<td width="100"><img src="images/spacer.gif" width="93" height="1" border="0" alt="" /></td>
<td width="4"><img src="images/spacer.gif" width="1" height="1" border="0" alt="" /></td>
</tr>
<tr>

<td colspan="4"></td>
<td><img src="images/spacer.gif" width="1" height="6" border="0" alt="" /></td>
</tr>
<tr>
<td rowspan="6"></td>
<td colspan="2"><br /><div id="logo">

<img src="images/logo.png" alt="logo" width="348" height="59" />

<div id="navbar"><table border="0" cellpadding="0" cellspacing="0">
<tr><td><a href="javascript:;" target="_top" onclick="MM_nbGroup('down','group1','Home','buttons/downhome.png',1)" onmouseover="MM_nbGroup('over','Home','buttons/overhome.png','',1)" onmouseout="MM_nbGroup('out')"><img src="buttons/downhome.png" alt="" name="Home" border="0" id="Home" onload="MM_nbGroup('init','group1','Home','buttons/uphome.png',1)" /></a></td>
<td><a href="javascript:;" target="_top" onclick="MM_nbGroup('down','group1','About','buttons/downabout.png',1)" onmouseover="MM_nbGroup('over','About','buttons/overabout.png','',1)" onmouseout="MM_nbGroup('out')"><img src="buttons/upabout.png" alt="" name="About" width="115" height="45" border="0" id="About" onload="" /></a></td>
<td><a href="javascript:;" target="_top" onclick="MM_nbGroup('down','group1','Services','buttons/downservices.png',1)" onmouseover="MM_nbGroup('over','Services','buttons/overservices.png','',1)" onmouseout="MM_nbGroup('out')"><img src="buttons/upservices.png" alt="" name="Services" width="115" height="45" border="0" id="Services" onload="" /></a></td>
<td><a href="javascript:;" target="_top" onClick="MM_nbGroup('down','group1','Portfolio','buttons/downportfolio.png',1)" onMouseOver="MM_nbGroup('over','Portfolio','buttons/overportfolio.png','',1)" onMouseOut="MM_nbGroup('out')"><img name="Portfolio" src="buttons/upportfolio.png" border="0" alt="" onLoad="" /></a></td>
<td><a href="javascript:;" target="_top" onClick="MM_nbGroup('down','group1','Contact','buttons/downcontact.png',1)" onMouseOver="MM_nbGroup('over','Contact','buttons/overcontact.png','',1)" onMouseOut="MM_nbGroup('out')"><img name="Contact" src="buttons/upcontact.png" border="0" alt="" onLoad="" /></a></td>
</tr>
</table>
</div>
</div>
</td>

<td rowspan="6"></td>
<td><img src="images/spacer.gif" width="1" height="76" border="0" alt="" /></td>
</tr>
<tr>

<!-- Search Bar-->
<td colspan="2"><div id="header"><br /><br /><br />&nbsp;<input name="Go" type="submit" value="Go" />&nbsp;<input name="Search" type="text" id="Search" value="Search.." width="100" />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;
</div></td>

<td><img src="images/spacer.gif" width="1" height="84" border="0" alt="" /></td></tr><tr>
<td rowspan="2">

<!-- Left sidebar-->      

<div id="leftbar"><div class="text" id="#leftbar"><div class="toptext">

<div class="employment" id="employment">
<p>&nbsp;</p><p align="left">&nbsp; </p><p>&nbsp;</p>
</div>
<br />

<div class="newsletter" id="newsletter">
</div>
<br />

</div>
<br />

<br /><br /><br />

<div id="leftbarbottom">
<span><img src="images/news.png" alt="news" align="left"/>
<span class="news">&nbsp;<u><span class="style1">News</span></u> </span></span>
<br />
<br />

<a href="#">Headline1
Headline2
Headline3
<br /><br />
March Promotion

</a></div>
</div>
</div>
</td>

<!-- Flash -->
<td><div id="flash">
<!-- I took the actual code out bc it was too long for forum--!>
</div></div>

</td>
<td><img src="images/spacer.gif" width="1" height="404" border="0" alt="" /></td>
</tr>
<tr>

<td>
<div id="body"><img src="images/mysite_r7_c3.png" alt="body" width="605" height="123" /></div>
</td>

<td><img src="images/spacer.gif" width="1" height="128" border="0" alt="" /></td>
</tr>

<tr>
<td colspan="2">

<!-- Footer -->      

<div id="footer"><div class="footertext" id="footertext"> 
<span> <a href="#">Privacy Policy</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
Home|About|Services|Portfolio|Contact</span>
</div>
</div>


</td>
<td><img src="images/spacer.gif" width="1" height="88" border="0" alt="" /></td>
</tr>
<tr>
<td colspan="2">&nbsp;</td>
<td><img src="images/spacer.gif" width="1" height="14" border="0" alt="" /></td>
</tr>
</table>
</div>
</body>
</html>

Thanks again SOOO much!
I really want to get better and know what i'm doing. Im spending all my free time reading up on this stuff. Thanks.

Paul

Weedpacket

peb7268 wrote:
I really want to get better and know what i'm doing. Im spending all my free time reading up on this stuff. Thanks.

Another aspect of what funktopia was talking about separating the page into chunks that can be maintained separately ought to be done in the HTML as well. That big block of inline JavaScript and that big block of inline CSS should be in separate files that would then be loaded by the browser into every page that uses them. That's a third of the page gone right there.

After that the next job would be to replace stuff that uses things like:

<table width="1000" border="0" cellpadding="0" cellspacing="0" bgcolor="">

and

<div id="header"><br /><br /><br />&nbsp;<input name="Go" type="submit" value="Go" />&nbsp;<input name="Search" type="text" id="Search" value="Search.." width="100" />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;
</div>

with styling.

peb7268

ok,

So what do I replace that table code with? Div tag?
Also, I couldnt get the image to slide over enough using styles so I added the nbs'ps

Im not really sure how to position my stuff in CSS. I use dreamweaver, do I use the positioning stuff under box or under positioning when I have my CSS options open?

Thanks,

Paul