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.
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:
Maybe that was a bit too simple. Here is a bit more with comments as we go.
Start and head
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">
Links to the cascading style sheet (CSS) pages.
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!
There, not difficult so far. Generally leave all that alone apart from adding a title, description and keywords to the meta tags.
Now look at the template parts that are in the body.
To run a page specific onLoad function the system also checks if there is a pageInit() function.
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.
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.
The first layer holds the content.
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.
The main class helps to identify the content titles as well as defining the space at the top and the text colour.
As mentioned before, the area for the actual content is clearly marked in the template by the remarks "Content Start" and "Content End"
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.
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.
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.
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.
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.