Archive for the ‘ Web Design ’ Category

Using PHP include statements to aid web design

Author: admin

Jan 30

Many websites created today are created from automated php scripts such as blogs or content management systems. These types of sites rely heavily on php include statements to build the website.

If however you build your own static page websites, where each page is individually created by hand, you could still benefit from the use of php include statements. By using these include statements you can greatly decrease the amount of time it takes to edit or create new pages for your site.

Most websites can be sub divided into 4 or 5 sections:

Left Menu Column
Content Area
Right Menu Column
Footer

Basic Website Layout

In a static multi page website if you want to change the header, footer, left or right menu then you need to make the same alteration on each individual page. For example, if you add a new page then you would have to add this page to the menu on every other in your site. This isn’t to much of a problem on small sites with only a few pages, but can be time consuming once you get 10 pages or more.

If you use php include statements then you can create separate php files for each component of your site and include them into your website template. Then if you want to make a change all you need to do is edit one file, and it will appear on all of your pages.

Lets take a look at a quick example. We will create a basic template to see how it works. Open your favourite text editor such as notepad and create a file called index.php and copy the following into it.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

</head>
<body>
<div style="width: 780px; margin: 0 auto 0 auto; border: 1px solid #000000; padding: 0px;">
	<?php include 'header.php'; ?>
	<?php include 'left-menu.php'; ?>
	<?php include 'right-menu.php'; ?>
<div style="width: 448px; margin: 0 auto 0 auto; border 0px;">
<h3>This is where you enter your content</h3>

In this area you would type in each pages content. This is the only are of each individual page tat needs altering as it's where your unique content is.
	</div>
<div style="clear: both;"> </div>

	<?php include 'footer.php'; ?>
</div>

</body>
</html>

Now create a file called header.php and copy the following into it

<div style="width: 100%; height: 150px; background: #000000; margin: 0px;">

<h1 align="center" style="color: #ffffff;">This Is Your Header</h1>
<p align="center" style="color: #ffffff;">This could be your tag line here
</div>

Now create left-menu.php for your left menu with the following code

<div style="width: 180px; float: left;">
<div style="width: 160px; margin: 10px 0px 10px 10px; border: 1px solid #aaaaaa">

	<a href="index.php">Menu Item 1</a>
	<a href="#">Menu Item 2</a>
	<a href="#">Menu Item 3</a>
	<a href="#">Menu Item 4</a>
	<a href="#">Menu Item 4</a></div>
<div style="width: 160px; margin: 0px 0px 10px 10px; border: 1px solid #aaaaaa">
	You could put a second menu here
	</div>
</div>

Now create right-menu.php for your right menu with the following code

<div style="width: 150px; float: right">
<div style="width: 130px; margin: 10px 0px 10px 10px; border: 1px solid #aaaaaa">
	You could put an advert here
	</div>
<div style="width: 130px; margin: 0px 0px 10px 10px; border: 1px solid #aaaaaa">
	You could put another advert here
	</div>
</div>

Now we just need a footer.php

<div style="width: 100%; height: 50px; background: #000000;">
<h3 align="center" style="color: #ffffff; padding-top: 5px;">This Is Your Footer Area</h3>
</div>

Copy the five files to a folder on your server and then navigate to the index.php to see the result. To see how easy it is to edit, duplicate the index.php a few times, changing the text in the content area and save save them as page1.php, page2.php, page3.php and so on. Upload them to the same folder on your web server as the other pages. Open the left-menu.php and change the links for the menu items to suit, and overwrite the file on the server with this edited file.

Now if you visit your new site you will see that the links are functional on all pages. If you add another page then you only need to edit left-menu.php, to have it appear on all of your websites pages.

For this to work you will need to save your pages with the .php extension, if you use .htm then your includes will not appear. If you want more information on basic php visit the downloads area of this site and download ‘I Hate PHP’.

0 Comments

Filed under: Web Design

Free Graphics Software

Author: admin

Jan 28

Creating graphics for your website is something every website owner has had to struggle with at some point in time. If you are working on a budget then top end graphics programs such as Photshop are probably not an option. You can however get free graphics software programs quit easily that are probably better suited to your needs.

One source for free graphics software is a company called ‘Serif’. I’ve been using their packages for over 10 years now. They continually update and upgrade their software, and offer older packages for sale at £9.99 or a free SE version for free.

The 2 serif packages I use are Photoplus and Drawplus. Photoplus is great for editing any photos that you may want to use, while draw plus is suited to making banners, animations and illustrations.

For more details visit:

http://www.freeserifsoftware.com/

Another free graphics software package worth looking at is Gimp. This is free open source software along the lines of Photoshop. There are versions available for Windows, Linux and Mac. With this software you can edit photos and create website banners.

http://www.gimp.org/downloads/

Gimp has been around for years and has plenty of tutorials online to help you get the most from it.

These free graphics software programs should cover all your graphic editing needs at a price everyone loves. Even Serifs latest products are reasonably priced if you want all the bells and whistles.