Making a template, Part 1

So, here we are. We have edited our index to operate with sNews. We have a list of functions to add in order to show content. Now the fun begins, we’re about to make our own template from scratch.

The basic steps that follow will help you get started. Coming up with actual design ideas and getting them to display will be up to you. This 2-part tutorial will give you an idea of how to proceed in making a template from scratch. There might even be better and simpler ways, but let’s get started on this simple approach.

Before going further, we’ll assume you have (at least) one ‘good’ code editing application installed on you computer. By ‘good’, we mean one that does not automatically generate a lot of uncessary code as WYSIWYG web page applications like MS FrontPage and Dreamweaver do. We mean one that gives you total control over the code writing process. There are several free code editors available by download out there on the web (such as Crimson Editor, or PHP Designer, or Notepad++, orWordpad) but, you can also get away with using NotePad on a Windows machine.

Step 1 – Laying the foundation.

Let’s start with a simple, two-columned layout with a header and footer. It will be a fixed layout, which means the width of the page will be consistent, not changable. We will make it with an overall width of 800px – to fit the most common (at this time) screen resolution most people view websites with.

First, we want to make a XHTML file that will show two columns and one header and one footer, and we’ll style it later with CSS Rules in a css file. So, our new file starts with the following elements:

– The container division that wraps around everything else,
– The header division which will contain the site page header,
– The content division, which will serve as the main content container,
– The leftcol division, which will contain menus and other stuff,
– And the footer division which, of course, will contain the footer script
– Then we close the container division.

This isn’t, however, the complete file. It is just the set of divisions that we will place within the template’s body tags. We need to make the whole document a valid XHTML document, by adding this before and after what we’ve just accomplished (do not forget the sNews specific snippets):

As of sNews 1.7, session_start(); should be removed from the index.php file

REMEMBER THIS ?
<?php session_start(); include (“snews.php”); ?>

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>

<head>
REMEMBER THIS ?
<?php title(); ?>
First we add the funtion title(), and then other things like meta tags, css links and other HEAD stuff
</head>

<body>
Here goes all that XHTML code we did earlier.
</body>
</html>

So the whole document would look something like this:

<?php session_start(); include (“snews.php”); ?>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<?php title(); ?>
Here goes meta tags, css links and other HEAD stuff as for instance:
<link rel=”stylesheet” type=”text/css” href=”YOURCSS.css” />
</head>

Now… all we need to do apply some styling rules to this XHTML file, so that it displays our content the way we want it to.

CSS Terminology

CSS has its own language and terminology but it really isn’t that complicated at all. Let’s take a simple string and break it down.

p { color: red; }

The entire string (above) is referred to as a Rule. The Rule starts with p which is the Selector. We’ll refer to it as a tag selector. The CSS Specification refers to it as a type selector. The part inside the curly braces is the Declaration. The keyword color is a Property and red is the property value. The semicolon after the property-value pair separates it from other property-value pairs in the same declaration.

Formatting the CSS Stylesheet

In this tutorial we’ll make an external (independent) CSS (Cascading Style Sheet) file… meaning that it will be a file on it’s own and it will only only contain style rules.

Open a new file using your favourite text editor, and start by adding the basics of CSS first, along with our own division rules, so we have something to work with.

1. First the main stuff, the Star selector is used to target every element. This is often used to zero out the margin and padding. This creates some common ground from which to begin.

* {}

2. Body is used to provide basic page styles meant to be inherited by nearly all of the page’s children: font-face, size, alignment, etc. We could also use the html selector, but we’ll just use body in this case.

body {}

3. The container div can be used to contain the page itself. It can also redefine some characteristics inherited from the body. It is high on this page as it’ll contain everything else used.

#container {}

4. Here are the headings. These may be re-defined throughout the document as needed. This is especially true of the h1 element as it may have special usage as a main page heading, and maybe as a link.

h1, h2, h3, h4, h5, h6 {}

5. A page without paragraphs would be pretty unusual. Let’s make sure the p selector is included. This, too, may be re-defined as needed.

p {}

6. Most pages will have links. Let’s style them using an anchor selector.

a {}

7. Links really should have some interactivity characteristics for accessibility and usability reasons. The a:active pseudo-class is offered.

a:active {}

8. As is a:hover.

a:hover {}

9. a.current. Current should be different than hover in some ways, such as providing a background color to make it highly visible for keyboard users.

a.current{}

10. In addition to background images, most web pages will offer embedded images (img), so we will offer them here. This is mostly used to remove borders and text-decoration (if the image is a link).

img, a img {}

11. Call them what you like, but these are some really common IDs you may use yourself. Make the names of these selectors as informative as possible to make them easy to identify down the road. Using common selector names like these offers insight to any editor later on. Note that the “container” ID is covered above… as it needs to be high up in the cascade.

#header {}
#content {}
#leftcol {}
#footer {}

Now… our first css file – without style declarations – will look like this:

* {}
body {}
#container {}
h1, h2, h3, h4, h5, h6 {}
p {}
a {}
a:active{}
a:hover {}
a.current{}
img, a img {}
#header {}
#content {}
#leftcol {}
#footer {}

To summarize, we have established the ‘ground rules’ on which we will build from. We have the foundation – the ‘make up’. Now let’s move on to Making a Template, Part 2 where we’ll add in the style declarations. Before doing that, though, you can save your file as style.css in your project folder.

Tutorial by: Patric & Keyrocks.
(Last update: Nov.18.08)

Creating a Template: