Which do you prefer?

tony_l

When I construct a website, I use includes to piece together a design made out of tables.

I was just wondering if other people do that, or do you use functions?

An example of my technique for a simple page would be -


INCLUDE("header.php");//constructs beginning html tags and main table

Echo "Stuff goes here!";

INCLUDE("footer.php");//closes out table tags and html

Jason_Batten

I do the same because I know no better, I know it is a not so perfect way of doing things but everyone is guilty despite what they may admit too. A templating system would be best but that's being covered in another topic 😉

harmor

I use one file and put the header stuff into one variable and the footer stuff into another variable.

include("extras.php");

echo $header;

echo "Stuff goes here!";

echo $footer;

dalecosp

tony_l wrote:
When I construct a website, I use includes to piece together a design made out of tables.

Heh; now I expect to hear from goldbug pretty soon.......

[edit]BTW, I'm not making fun of tables or the folks who use them. I am trying to get away from them for layout. I also do have a good bit of code in use that is table-based, and probably isn't going to be replaced any time real soon (at least not at the current rate that my Padaw^{H^{H^{H^{H^Happrentice}}}} is learning HTML/CSS/PHP/Javascript)... but he's a busy fellow; when he gets out of college, then maybe he'll have time to actually learn something....[/edit]

Rodney_H_

Dang, when I read the title of this posts, I thought it was going to be about blondes, brunettes, and redheads...

Since it isn't, I do as you all do, and include headers, footers, and then content. I use <div> tags, and have been pretty good at using tableless css design, to boot...

I like to use constants for my meta information and my body ID's. Then, I echo them out in my header. I like using <body id="home"> the body ID attribute, so I can determine to show sub-navigation on specific pages or hide them via CSS, or I can use PHP conditionals to include sub-nav info in my header file based on the body id... you get the idea...

My latest layout is something like this:

<?php
// include functions / start session:
include('functions.php');

// define meta info:
define('TITLE', 'Page title');
define('KEYWORDS', 'keyword, keyword2');
define('DESCRIPTION', 'page description here...');

// define body id for css classes specific for page
define('BODY', 'home');

// include header
include('header.php');
?>

<div id="main"><!-- html code here //--></div>

<?php
// include footer
include('footer.php');
?>

_theworks

I've used a system like this one but i was loading XML files and getting the content from them... similar to this...

<?
//--------------------------------|
define (PAGE_TITLE,'Home');
define (PAGE_KEYWORDS,'php,css,html,xhtml');
define (PAGE_STYLE,'style1.css');
define(PAGE_DESC,'my webpage blah blah');
define(PAGE_AUTHOR,'Byron Adams');
//---------------------------------|
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >

<head>

	<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
	<meta name="author" content="<?echo PAGE_AUTHOR;?>" />
	<meta name="robots" content="all" />
	<meta name="keywords" content="<?echo PAGE_KEYWORDS;?>" />
	<meta name="description" content="<?echo PAGE_DESC;?>" />
	<title><?echo PAGE_TITLE;?></title>
	<link href="styles/<?echo PAGE_STYLE;?>" rel="stylesheet" type="text/css" />

</head>

<body>
<div id="body_wrap">

<div id="page_header"><? require('application_top.php'); ?></div>

<div id="page_wrap">

	<div id="page_nav"><? require('menu.php'); ?></div>
	<div id="page_content"><? require('content.php'); ?></div>

</div>

<div id="page_footer"><? require('application_footer.php'); ?></div>

</div>

</body>
</html>

but i agree with rodney use div's 😉

Rodney_H_

XML files? Yeah, that's cool. I have been meaning to try that, too.

tony_l

I am not at all familiar with CSS Layout. I use CSS for styles, but I just cannot get a CSS layout that looks like it was not drawn by a 5 year old. I am a structured type of guy 🙂 Does anyone know of a good tutorial on how make a layout with CSS? Obviously my CSS layout skills suck LOL.

Rodney_H_

I can suggest a GREAT book with lots of tutorials and sample codes that is written by a CSS guru, Eric A. Meyer: http://www.amazon.com/gp/product/073571245X/qid=1134575633/sr=1-2/ref=sr_1_2/002-3461415-1670439?s=books&v=glance&n=283155

I also suggest playing a lot with CSS and read A List Apart regularly:
1) http://alistapart.com/

Also, check this site out to get ideas: It is an unreal source of CSS inspiration:
2) http://www.csszengarden.com/ Let me explain a little about this: The content is the same, but each designer has provided a different layout. You can click through an archive of the coolest designs and see literally hundreds of interpretations of the same site...

Lastly, check out Stu Nichols CSS playground for ideas:
3) http://www.stunicholls.myby.co.uk/

rincewind456

tony_l wrote:
I am not at all familiar with CSS Layout. I use CSS for styles, but I just cannot get a CSS layout that looks like it was not drawn by a 5 year old. I am a structured type of guy 🙂 Does anyone know of a good tutorial on how make a layout with CSS? Obviously my CSS layout skills suck LOL.

Heres a few,
http://www.w3.org/TR/REC-CSS1
http://www.css.nu/
http://developer.mozilla.org/en/docs/Consistent_List_Indentation
http://www.w3.org/Style/CSS/
http://www.positioniseverything.net/
http://www.freeprogrammingresources.com/freecss.html
http://www.janim.net/web-freeware/free-css-editors.php
http://www.docnmail.com/learn/CSS.htm
http://glish.com/css/
http://www.quirksmode.org/
http://www.wdvl.com/Authoring/Style/Sheets/
http://webreference.com/authoring/style/sheets/
http://examples.tobyinkster.co.uk/3col
http://centricle.com/ref/css/filters/?highlight_columns=true

tony_l

Thanks man - the A List Apart site is awesome! Very informative.

_theworks

Rodney H. wrote:
Also, check this site out to get ideas: It is an unreal source of CSS inspiration:
2) http://www.csszengarden.com/ Let me explain a little about this: The content is the same, but each designer has provided a different layout. You can click through an archive of the coolest designs and see literally hundreds of interpretations of the same site...

yeh csszengarden.com is where i learnt (became interested in ) CSS based design no better way to demonstrate it's ability's

also heres a big list of tutorials.
have fun.

tony_l

Well I am about to start a new topic folks - Anyone use a template system? LIKE SMARTY? I am wondering if I should go with a templating system.

bpat1434

I started a topic about templating systems in teh echo lounge a couple days ago... but I hate SMARTY. It's too much do this just get that type of code.

I would also suggest CSS Creator. That's a really active and good forum for CSS.

All of my sites now are done in CSS with no tables. I love it. Especially when I make a site for someone, and they decide to take it and run, their next "webmaster" can't figure out what I did, so they either A) break it so it looks terrible or 😎 can't use divs properly so the text becomes unreadable, and they ahve to start from scratch!! HAHAHAHAHA!! Happened with the last website I did, and that guy just broke it. And then came back asking me for help, but that's another story.

The one thing about tables is that it restricts you in what you can do. I'd like to see tables, get this design: Patterson Web Services (Non-operational site).

~Brett

rincewind456

Very nice site shame about the spelling :-)

bpat1434

yeah... it's non-operational... so there's a lot of rough spots I've got to go through and fix.... It was the design that was my focus, so the text was just thrown in there.

~Brett

bubblenut

Of all show so far I'd go with theworks, if only for this one simple reason. Each element can be made into valid XML. Using the header, footer paradigm doesn't allow this because some elements opened in the header will not be closed until the footer. The beninifit of the nested paradigm shown by theworks really comes into it's own when you start setting up unit tests on your output. You can imediately see when and where markup bugs are working there way in.

Rodney_H_

bubblenut wrote:
Of all show so far I'd go with theworks, if only for this one simple reason. Each element can be made into valid XML. Using the header, footer paradigm doesn't allow this because some elements opened in the header will not be closed until the footer. The beninifit of the nested paradigm shown by theworks really comes into it's own when you start setting up unit tests on your output. You can imediately see when and where markup bugs are working there way in.

Hey, Bubblenut: I am a little slow on the uptake today. Perhaps due to the holiday party last night/this morning, and waking up in a town I never heard of...

... but, could you explain what you mean? I don't follow... :o

bubblenut

To explain what I main I shall use two examples. The first, is made up of a header, body and a footer while the second is made up of a bootstrap, a header and a body. In both cases I shall just show them as variables but assume that this HTML is being rendered by some view class or function (or even just some structured "module" of code). Also, the markup is overly simplified, assume the markup to be very complex and made up of multiple distinct modules.

Header, body, footer

<?php
$head = <<<END_HTML
<html>
<head>
<title>Blah Blah</title>
</head>
<body>
END_HTML;

$body = <<<END_HTML
<p>This is all there is in the page</p>
END_HTML;

$footer = <<<END_HTML
</body>
</html>
END_HTML;

echo($header . $body . $footer);
?>

As you can see in this example the header and the footer are not valid XML. The html and body tags are opened in header but then closed in footer. The problem here is that it becomes difficult to test the individual parts. The easiest way of testing that there aren't errors in the rendering of an XHTML output module is to check that the output is valid. In this setup you have to render the entire page before you can test whether the output is invalid and then you have to manually figure out where that error is originating. Contrast this with the second example.

Bootstrap, header, body

$bootstrap = <<<END_HTML
<html>
<head>
<!--HEADER HOOK//-->
<body>
<!--BODY HOOK//-->
</body>
</html>
END_HTML;

$header = <<<END_HTML
<title>Blah Blah</title>
END_HTML;

$body = <<<END_HTML
<p>This is all there is in the page</p>
END_HTML;
?>

In this method each module produces valid XML and each module is concerned with it's semanic psition. We can now validate each module independantly when we run our unit tests and and locate any errors very quickly when they work their way in. For example, if we were to remove the closing paragraph tag from $body and run our unit tests we'd emediately be able to see that the body module is in err rather than just seeing that the page is in err if we'd stuck with the first example.

Notes for reading.
PHPUnit Pocket Guide

Rodney_H_

OK, Bubblenut.

I see very well what you mean through your examples. Makes perfect sense, too.

Thanks. I appreciate it.