This site uses Server Side Includes (SSI / shtml for the techies out there) and
Cascading Syle Sheets (CSS) to manage the look and feel of the site. Sounds
complicated doesn't it? ITS NOT!
It makes the life of an author easy. Anyone(!) can create content for the site
simply and quickly with very minor HTML know how. The only html you need
to know is simple and effective. If you can type then you can create - it really
is as simple as that.
Style management is one of the most important things about running a website,
it is critical that we keep our look and feel so our visitors feel comfortable
with our layout and that it's constant throughout the site.
First I'll explain what content is and what SSI does. Look at the image
below, SSI does *all* the grey bits every time a user requests a page, the content that you author is the
highlighted area. Looks less daunting now doesn't it?
What you create will look plain and boring in a browser, however when the
server applies the sites templates and style your content will fit perfectly!
Literally all you have to do is type content in the the right space.
Lets start. You need the template, to keep everything simple yo can download it here,
you need to right click the link then select "Save linked document as.." or "Save target as..", this will then save
the template.txt file on your computer. Open this file using notepad. You should now have a window that looks like this...
The first thing you need to do is change the top green border shown below.
In the template above this is called "your title or name or description"
- go ahead and change it in your file.
Now for the content itself, shown here in red
In the template above this is "your words". To make the big heading type
<h3>My heading</h3> - these are heading tags, they come in pairs the
first starts the heading and the second stops the heading. there is no need to
fiddle with fonts, text sizes or bold and other typeface attributes, the
cascading style sheet will do all this for you, simply use the h3 tags as shown
and keep it simple.Now is the fun part, your creation, your content. Just
remember that the <br> tag on it's own (it does not have a </br> companion) is a
line break and <p> is a paragraph break, again without a companion.
Images: To insert an image into your content we use the "img" tag. <img href="mypic.jpg">
where mypic.jpg is the name of the image file in the same directory as your
creation.
Testing your creation: Save your file, now rename it from .txt to .html and
double click on it. it should look something like this.
WELL DONE!
All you need to do now is e-mail me "webmaster a.t. steeple-claydon . org"
the file you created and any images you used. or give one of the webmasters a
floppy disk with them on in one of the local pubs :-)
This next bit has only been included for the webmasters in here and out
there, this is how we create our stylized logos. Content authors need not
further.
Logos:- this is the complicated bit. We use an online logo generator to create our logos then tweak then using a paint package. This link will create you any logo you wish.
Flaming text
We then modify the saved image by turning it into a high colour image and applying a standard fill that comes with
PaintShopPro.
If you don't have a copy then please send your images to me and I'll do the fills.
Then we reduce the colour depth once more so that the image is gif compatible.
Click this thumbnail to show the Paintshop pro workspace settings.
and this file contains the workspace you see in the
image.
|