Defining the core structure of a simple yet dynamic website - PHP

As I said right at the beginning of this article, the website engine that I plan to build will be based on the functionality provided by some PHP 5 classes, which will be reviewed later. For now, I'd like to commence by defining the general structure of the dynamic website itself to give you a good idea of how it will look.

Basically, the skeleton of the sample website that I'll create will be comprised of the following sections: header, main navigation bar, left-placed column, center-placed column, right-placed column, and finally the usual footer section. Nothing unexpected, right?

As you can see, the structure that I described before corresponds to a typical three-column web page layout, which is properly exemplified by the set of screen shots included below. Please, have a look at the first one, which shows not only the overall appearance of the sample website in question, but also depicts the appearance of a "Profile" page included within the site:

As you'll realize, the above image reaffirms the concepts that I explained before. The layout of the sample website will be made up of a header, then three central columns, and finally a footer area.

In this specific case, the previous picture shows the look and feel that corresponds to a hypothetical "Profile" page, but there are still some other pages that I'd like to you show you. Take a look at the following screen shot, which shows the visual appearance of a "Products" page:

As you can see, the above image demonstrates the consistent look and feel of the sample website, and at the same time shows the basic appearance of a "Products" page. Of course, the overall visual presentation of the site can be significantly improved to fit your particular needs, but for the moment I decided to keep it simple. That will give you an accurate idea of how each section of this website will look, without having to mess up the overall development process too much.

Al right, at this point you've hopefully grasped the key points of how to define the general structure of this sample website. So let me show you finally a few additional screen shots, aimed at demonstrating the look and feel of the eventual  "Services," "Customers" and "Contact" pages. Here is how they look:

Okay, I think that the above screen shots are more than enough for demonstrating the core structure of the dynamic website that I plan to construct. As I mentioned before, each section of the site presents a consistent look, a fact that makes them very convenient to generate with a simple static template file.

Speaking of the concrete template file that will be used in this tutorial, in the following section I'll show you its source code. Click on the link below and keep reading to learn how this will be achieved.