PHP, CSS and website design

The advantages of designing a website with PHP and CSS

I have discussed general web PAGE design at standards.php#design so this section is more about web SITE design.

Generally speaking a website uses consistent looking page headers, footers and navigation bars:

These components can be written onto every page, and in fact that is the way pages used to be written before the advent of FRAMES. Because of the need for consistent appearance of pages on a website, a modular method of writing web pages was devised using FRAMES, where each frame was a separate file called from a FRAMESET. The browser (eg Internet Explorer, Netscape) would look at the frameset, collect each frame file from the server and compose the page.

It was an excellent system because web authors did not have to repeat all the header, navigation or footer information on every page. If they wanted to change a link for instance, they could just change the one navigation file and the entire site would show the change.

There were inherent problems with frames however. They relied on consistent handling by browsers, but browsers are notoriously inconsistent with the manner in which they handle code. What looked good on one browser did not look good on another browser.

Some web authors had problems with frames. A classic was having the header, nav and footer frames being included in the contents frame, so the page was cluttered with headers and footers! Thoroughly awful!

Then along came PHP, a scripting language that resides on the server and does all sorts of wonderful jobs, in this case, creating web pages from separate files. Because the browser receives a complete page from the server, it does not have to make the page itself, so the page has a greater chance of appearing as the author intended.

The modular advantages of frames are retained, eg. make a change to the company logo on the header and the change is shown on every page.

If you want to know more, try my fun little PHP tutorial. Sure it's rough and ready, but I put it together in just a few hours.

So what is CSS?

Cascading Style Sheets are the tool used to put style onto web pages, coloured text or backgrounds, borders, font sizes and styles etc. All these things can be specified on a single file called a stylesheet. By referring to the stylesheet in the header, the pages will be displayed according to the style sheet. One small change in the stylesheet will then be reflected sitewide. For example, I am using brown as the colour for my headings. I could change that easily on the stylesheet as follows:

H1, H2, H3, H4, H5, H6
{
	color: #630;
}

H1, H2, H3, H4, H5, H6
{
	color: #f00;
}

By using these techniques I can produce consistent looking webpages economically and update them as required simply and inexpensively. Where other web authors will produce websites for around $100 per page I can produce similar sites for as low as $30 per page.