Making template step 1

Home · Designer's Guide · Making template step 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.

The basic steps that follow will help you get started. Coming up with actual design ideas and getting it to display will be up to you, ok ? In this little walkthrough we're just trying to give you an idea of how to proceed in the making of a template. There might even be better and simpler ways, but here's how the author of this walkthrough does it:

Step 1 - laying the foundation.

For arguments sake, lets say the idea here is to make a two columned layout with header and footer. It will be a fixed layout, thus meaning the width of the page will be consistent, not changable. We will make it an 800px wide layout as this is the most common screen resolution.

What we now need to do is to make a XHTML file that will show two columns and one header and one footer which we later style by making the CSS:

<div id="container">
   <div id="header"></div> - Header/banner area
   <div id="content"></div> - Content column
   <div id="leftcol"></div> - Leftside column for eg menu
   <div id="footer"></div> - Footer/copywrite/links area
</div>

There. This isn't, however, a done XHTML file. This is mearly the code which will show the different sections in the body tag. We need to make the whole document a valid XHTML document, and that is done by adding this before and after what we've just accomplished (do not forget the sNews specific snippets):

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>

<body>
<div id="container">
   <div id="header"></div>
   <div id="content"></div>
   <div id="leftcol"></div>
   <div id="footer"></div>
</div>
</body>
</html>

Now all we need to do is to style this XHTML file, so that it shows things the way we want it to.

Doing this means making a CSS (Cascading Style Sheet) file, and we'll make an external one. Meaning a file of it's own only containing style information.

We open up a new empty text document using our favourite text editor, eg Crimson Editor, Notepad++, Regular Notepad or Wordpad. We do suggest using the Crimson Editor. Now we start by adding the basics of CSS first and then our own divs, so that we have something to work with. We'd better start 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. Some use the html selector, but I have never done that so it’s not listed.

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 redefined throughout the document as needed, if needed. This is especially true of the h1 element as it may have special usage as the 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 element is included. This, too, may be redefined throughout the document as needed, if needed.

p {}

6. Most pages will have links. Let’s style them using a anchor element. Some will write this as a:link. I don’t — I don’t see the need.

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 is some regards, such as providing a background color to make it highly visible to keyboard users.

a.current{}

10. In addition to background images, most web pages will offer embedded images (img), so I will offer them here. Mostly this is 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. I try to make the names as informative as possible so as to not confuse myself down the road. Using common names like this 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 {}

This making our first, non-styled, cssfile 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 {}

There, now we have a few groundrules. We have a ground to build from. We have the foundation of the "make up". Moving on to step 2, outlining the layout

Making template step 1

Step 1 - laying the foundation.

Creating a Template:

GET STARTED

LEARN

EXTEND

DISCUSS