Template
Keeping it Consistent.
With the freedom to use fonts, colours and layouts without limit it may seem a bit boring to make all the pages look the same. It is done to avoid confusing and overwhelming visitors. The really interesting stuff should be the content not the appearance
Read this section if you are curious or really want to know. Otherwise press on to the content guide section.
The site does not try to keep up with XML. It does not come any simpler.
Basically every page has a layer structure and the content bit goes in between clearly marked <!--CONTENT--> remark tags.
Here is the very basic structure.
<html>
<head>
<title>Template - LPMCC.net</title>
</head>
<body>
<h1>Template</h1>
<p>The content goes here</p>
</body>
</html>
The title is what is shown in the title bar at the very top of the browser window. It also appears in the History list and when bookmarked. Therefore - on this site - the convention is:
- Use a short title that will fit the History list
- Use the same title as the page title in the body
- Add " - LPMCC.net" to identify the site when it is bookmarked as a Favorite
Maybe that was a bit too simple. Here is a bit more with comments as we go.
Start and head
<html>
<head>
<title>Template - LPMCC.net</title>
<meta name="description" content="How the LPMCC.net site is put together.">
<meta name="keywords" content="template,tags,title,body,meta">
The description and content meta tags are used by some search engines to index the site. It is a chore but please fill them in with an appropriate phrase and words from the main body text.
<link rel="stylesheet" type="text/css" href="../home/default.css">
<link rel="stylesheet" type="text/css" href="local.css">
Links to the cascading style sheet (CSS) pages.
- The default.css in the home folder contains the bulk of the consistent appearance definitions.
- The local.css holds styles specifically for the current section of the site. For example the Gallery has definitions peculiar to a photo intensive section. This help section has a definition for the appearance of the script examples.
<script language="JavaScript" type="text/javascript" src="../home/data.js"></script>
<script language="JavaScript" type="text/javascript" src="../home/xmem.js"></script>
<script language="JavaScript" type="text/javascript" src="../home/common.js"></script>
<script language="JavaScript" type="text/javascript" src="standard.js"></script>
Similar to the CSS files, the JavaScript files contain site-wide and section-specific functions.
- The data.js and xmem.js files contain data on event venues, recent page additions, star rating and information about ex-members.
- The site-wide common.js file contains 'includes' used to write the top and bottom menus and many other functions that make the site work.
- The section-specific standard.js file contains functions specific to its own section.
Not only do shared script files make all the HTML page files shorter, there are far fewer files to change to alter ALL the menus on hundreds of pages!
</head>
There, not difficult so far. Generally leave all that alone apart from adding a title, description and keywords to the meta tags.
Body
Now look at the template parts that are in the body.
<body onLoad="init()">
onLoad="init()" Calls a function in the common.js file that runs all the routines needed after the page has loaded. It also calls on to the local.js localInit() function. Does all kind of useful things that are listed later.
<script>layersafterbody()</script>
Here we are with the very first JavaScript 'include' right from GO ? This one puts unseen layers on the page that form the right click menu and the tooltips. One of the few examples of a sensibly named function!
The whole page is laid out using layers. Here is what it is going to look like. Click on the title bar or menu column or content area to see the positioned layer move.
And here are the bits that do it.
Content area
The first layer holds the content.
<div ID="IDcontent">
This layer has an ID that the default.css style sheet positions and arranges. The local.css puts a background image along the left edge to tell visitors which section they are in. It is easy to get lost on this site; people have read old Megaphone transcripts and thought they described current events!
Whoopee! Now you can put in your immortal prose and photographs.
<h1 class="main">Template</h1>
<p>Immortal prose etc.</p>
As mentioned before, the area for the actual content is clearly marked in the template by the remarks "Content Start" and "Content End"
Then there are a couple more JavaScript includes for good measure.
<script>bottommenu()</script>
<script>star()</script>
Both functions are in the site-wide common.js file. One writes the bottom menu links and the other puts in the star rating box and all the jiggery pokery that goes with it. You will have to guess which is which.
The "content" layer is closed.
</div>
Menu column
<div ID="IDmenu">
<script>mainmenu()</script>
</div>
Blow me down, there is another JavaScript include. The function mainmenu() is located in the common.js file the same for all pages.
This makes the light blue main menu layer on the left. It has a style sheet specifically for "IDmenu" that defines colour, tapered background and other stuff.
There is a centered image of the Phoenix that is also a link to the home page. That is a general convention; the logo is always a link to home.
Title bar
<div ID="IDtitle">
<script>topmenu()</script>
</div>
The topmenu() JavaScript include is in the common.js file the same for all pages.
Very similar to the menu layer but the top title has a fancy text header, the strap line and the site search system.
Finally the body and html are closed and we all go to the pub for a pint.
</body>
</html>
Where can you get a template from? Well I could put one in a ZIP file and ask you to download it, unzip it and so on. But I won't. Just click this link and when the Blank page opens (in a new window) click View > Source on the Internet Explorer menu. Blank Template.
That is all the heavy stuff for now. The next bit is about the actual content. It is more about plain English than gobbledy-geek.
Summary
All pages are based on the same template.
It is important to complete the meta tags so the site can be accurately indexed.
The page layout is controlled by style sheet 'div' layers.
Lines of HTML repeated on every page that need frequent updating are written using JavaScript 'includes'.