Jump to content

Php Web Template


Recommended Posts

A Simple PHP Web Template

by David Alderson

 

 

This is to show you how easy it is to create a PHP enabled web site.

I'm including the basic html and php code here.

Plus I'm sharing my file structure for the web site I created this past hour.

 

 

 

Features

A header, a footer, a menu on the left and one on the right with content floating in the middle. There's also a sub-header I call a sales_menu because I'm using it for rotating sales banners on a daily or weekly basis.

 

Update 1,000's of web pages at once, by dragging and dropping a single file!

 

The Code

 

<html>

 

<head>

<meta http-equiv="Content-Language" content="en-us">

<meta name="GENERATOR" content="Microsoft FrontPage 5.0">

<meta name="ProgId" content="FrontPage.Editor.Document">

<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">

<title>Web Site Title</title>

</head>

 

<body>

<?php include 'header.php'; ?>

<?php include 'sales_menu.php'; ?>

<div align="center">

<center>

<table border="0" cellpadding="10" cellspacing="0" style="border-collapse: collapse" bordercolor="#FFFFFF" width="85%" id="AutoNumber1" bgcolor="#FFFFFF">

<tr>

<td width="20%"><?php include 'left_menu.php'; ?></td>

<td width="53%">

<p align="left" style="margin-top: 0; margin-bottom: 0">content</td>

<td width="27%"><?php include 'right_menu.php'; ?></td>

</tr>

</table>

</center>

</div>

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

</body>

 

</html>

 

 

Where it says CONTENT - You place your page content. The rest is calling upon php files to create your header, footer and left and right sided menu's, similar to those on my site, found here.

 

 

File Structure

 

content_images

footer_images

header_images

htm_files

php_files

right_images

sales_images

left_images

 

This is what my file structure looks like in Front Page and what it could look like for you when you design your site.

 

When you copy and paste your images into the folder after you've built your footer or header or menu in the htm design view, Front Page points the html code to that folder without you having to do any manual pointing yourself.

 

It's neatly tucked away, so that way you drag and drop your entire folder in Coffee Cup Free FTP or a similar program, having all your images neatly organized for each php file.

 

HTM and PHP Files

I have created a folder for htm files and php files.

 

I do all of my editing in the htm view and then I copy the page into my php folder and change the htm extension to .php

 

This allows me to click on the htm file in Front Page and have it automatically pop up in design view for editing.

 

If you click on a php file, it opens a notepad style view for editing, rather than a Front Page design view, which I like.

 

 

My PHP Files

As noted above in the code.

 

header

sales_menu

left_menu

right_menu

footer

 

The Code

<?php include 'header.php'; ?>

 

Alter as needed.

header.php

footer.php

left_menu.php

right_menu.php

sales_menu.php

 

 

 

 

 

 

Clean Design

I find this method great for clean design.

 

 

BETA Testing and Added Benefits

What's great about this method of using PHP files is that I'm able to beta test a web site. I can create a sub-domain on my account and create active hyperlinks that work and publish the web.

 

I'm working on something right now that I'd like to purchase some server space and a domain name for.

 

This way I can get everything up and running and tested on a locked sub-domain on my existing account.

 

Rather than having to edit hundreds and maybe thousands of hyperlinks to point to the actual registered address, all I have to do now is change the links in the .htm footer, header, right_menu, left_menu and sales_menu. Copy them to my php folder in Front page and change the extension to .php and upload them to the server.

 

Now I've updated literally hundreds or possibly thousands of hyperlinks, and I can see my site live as it would be working tonight!

 

 

On Front Page

I have Dreamweaver MX and the latest Front Page, but I prefer Front Page.

Many people would argue Dreamweaver is a far superior program, but I preferred my latest greatest Front Page to Dreamweaver CS3 because I know so many of the hot keys and can create without letting my hands leave the keyboard, or with having my left hand always on the keys and my right hand always on the mouse for long periods of time.

 

For me, learning Dreamweaver MX is something I'm doing slowly, but Front Page is definitely my program, and now that I tonight learned how to create with basic PHP, you have no idea. I can apparently barely wait to get going, since I was ready for bed and 2 hours later had a new web site and a tutorial up and running.

 

 

Conclusions

I now have IE, Firefox, Safari, Opera and Camino all on my system, and it's amazing how different my pages look on each different browser. That's where I'm headed next. Creating flexible pages that look great on as many browsers as possible.

 

My site is supposed to float on a white background, but I've noticed how many different browsers show my automatic frame colors in black, when they should be in white, so I'm learning every hour of every day.

 

I hope this tutorial takes some of the intimidation out of PHP and puts the power in your hands immediately to start using it in your web sites today.

:(

 

see my other php tutorial here. php in 5 minutes or less.

Edited by thedesignstudent
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Unfortunately, your content contains terms that we do not allow. Please edit your content to remove the highlighted words below.
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...