Design & Development Blog | Jared Lunde » html http://www.jaredlunde.com/blog A logo design blog and web development blog by designer and developer Jared Lunde. Sat, 04 Sep 2010 02:53:34 +0000 http://wordpress.org/?v=2.8.6 en hourly 1 Smart Layouts with PHP and HTML in Web Design http://www.jaredlunde.com/blog/smart-layouts-with-php-html/ http://www.jaredlunde.com/blog/smart-layouts-with-php-html/#comments Tue, 24 Nov 2009 00:13:25 +0000 Jared Lunde http://www.jaredlunde.com/blog/?p=140 Difficulty level: Novice

Honestly anyone with knowledge of HTML can do this and trust me it will save you loads of time in the long run.  The main idea behind this structure is that anything that is going to be on more than one page in your website is going to be called through a php include.  The reasoning behind it is that if you ever plan on updating the design or structure of your site, you’ll be able to do so much quicker through this method because instead of updating each page individually, you’ll only have to update one file.  It is also a wonderful solution because of how clean your markup will look.

The first thing we want to do is map out the areas that we are going to be using on every page on our site.  Let’s start with the information between our <head> tags.

<head> – include name: “head-constants.php”
Likely culprits in this section include your content type, favicon, stylesheets, javascript and possibly RSS feeds:
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="/global.css" />
<script type="text/javascript" src="/js/global.js">
<link rel="shortcut icon" href="/images/favicon.ico" />
<link rel="alternate" type="application/rss+xml" title="Development Blog RSS" href="http://www.jaredlunde.com/blog/feed/" />

Next let’s think about the <body> of our document. Since I like to keep similar page structure on all of my sites for easier user navigation, I’m going to include a file that has the <body> tag within it. This file will be required directly after the </head> tag.

<body> – include name: “body-top.php”
<body>
<div class="main">
<div class="content">

Now that I have my main page structure set in body-top.php, I’ll want to include a file within body-top.php that takes care of the header portion of my website.

Header & Navigation – include name: “header.php”
Within header.php, we’ll keep our markup for our logo, navigation, search bar, etc. Anything that will be in the header of every page on your site.

If you have a sidebar that is constant on your entire site, it’d be a good idea to include that as well, but for the sake of length I’m only going to include a footer in this example.

Footer – include name: “footer.php”
The footer is where we will close our body, html and set structure tags. You may also want to include a footer navigation or copyright information in this file as we did with header.php.
</div>
</div>
</body>
</html>

So what does this look like when it is all pieced together into a document?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Hello World!</title>
<meta name="description" content="An example of a well-structured HTML layout" />


<?php require('head-constants.php'); ?>


</head>


<?php require('body-top.php'); ?>


Here is the rest of our body content.


<?php require('footer.php'); ?>

It’s looks clean and pretty doesn’t it? What’s great is that we can now spend 10 minutes updating all of our pages instead of 10 hours or having to deal with the horror of a massive find/replace.

]]> http://www.jaredlunde.com/blog/smart-layouts-with-php-html/feed/ 4