Website Documentation

Overview

The new group website uses php to deliver the webpages to the browser. In terms of writing a new page for the website this makes the overall effort small. It is easy to apply global changes to the layout of the website without having to edit each and every page. At the top of the page is a header, which contains the group logos, title information, java scripts as well as the navigation bar.

The display of style information, ie the colours and justification of the text is taken care of using CSS or Cascading Style Sheets. For more information on these if you have not come across them before please consult the w3 schools site http://www.w3schools.org.

At the bottom of a page is the last component - the footer. This contains copyright information, disclaimer and last modified date. This allows uses to see how actively maintained the site is, probably best to remove this if you don't think you will be updating the site much.

Structure of the file

All files on the website are labelled php files. For more information on PHP see this site: http://www.php.net/. This allows us to separate some of the structure of the site from the content. Each webpage is created by calling the individual parts of the page. The page is broken up into distinct sections - header, content and footer. By creating one header file or one footer file and getting all the other pages to include this file it means that whenever the content in the footer or header changes only one file has to modified.

Header

The header file is called header.php and is called by placing the following line in the webpage:

<?php include("header.php"); ?>

This tells the webserver to include the contents of the header.php file into the current webpage.

The header file contains the html tags that you would expect to see at the start of a webpage. Therefore there is no need to start your webpage with the <html> tags. Similarily the footer.php file closes these tags.

The header file also tells the webserver to include the stylesheet. In this case the stylesheet is named WEBSITE.CSS and is stored in the directory CSS/.

Javascript

The header file also contains the javascript functions. These take care of some of the image swapping on the links in the main header. Javascript is typically used to liven up the content on a webpage. In this case we use them to change the displayed images on some of the links. The javascript is enclosed in the <script type="text/javaScript"> tags in the html and is found before the body of the html document.

The first function preloads the images in order to speed up their presentation on the page. MM_preloadImages is called by the onLoad instruction in the body tag of the header.php file. Its pretty obvious - it tells the browser to load a number of images.

The MM_swapImage and MM_swapImgRestore functions instruct the browser to swap the default image for an alternate whenever the mouse hovers over the images. Pretty self explanitory really.

Organisation of banner

The main banner is a three column table, with the width defined as a percentage of the width of the page. This allows the display of the page to be independent of the resolution on the viewers screen - ie it is bigger or smaller depending on the size of the display you are using to view the webpage.

The flanking columns hold two images, on the left is the logo for the sequence analysis group and on the right the EMBL logo. In the centre is the main title - in this case the words Gibson Group Homepage. Below this is the first navigation bar. This holds four images pointing to links for some of the main activities of the group: Phylogeny, Linear Motifs, Alignment and Teaching. The mouse over action on these links is controlled by the javascripts mentioned above.

Navigation

The other navigation bar is below main banner of the page. This contains links to the other subpages of the site eg Services, collaborators, contact list etc. The mouse over action in this section is handled by the CSS stylesheet (explained later). This section is simply an unordered list of elements. Each element is in turn simply a link to another section of the site. To include this section of the site include the following line in your new page:

<?php include("nav.php"); ?>

Content

The content of each page is enclosed in a <div> tag. The class of this div is content - pretty simple eh? So in the webpage this would look like:

<div id="content""> Your content goes in here. </div>

Footer

Finally the footer.php file is included. This is the most simple file, and simply closes off the webpage. It includes a link to the disclaimer about the information on this webpage. It also contains a php script to inform users when the website was last updated. This script needs some work since it actually displays the last update to the index page. But more on that some other time.

CSS file

This controls most of the look and feel of the website. This allows global control of the formatting and presentation issues surrounding the site. For more see the w3.org site and the CSS section.

Essentially a series of div classes are defined and attributes are assigned to them. The whole page is contained within a page-container div, and each subelement of the page such as the header, navigation, content and footer are contained within this.

Each element of the site then has its own attributes, so for example the header div has the following entry:

header {

                background-color: #6699CC;
                border:"0"; 
                width:100%; 
                cellpadding:"0"; 
                cellspacing:"0";
                align: "center";                          
        }

This sets the background colour, border, the width of this element etc etc. Now whenever an element of the webpage is given the class header it will have these attributes.

Creating a new webpage

So, in order to create a new webpage you would create a blank file say foo.php. The php file extension is important as this tells the webserver how to serve this page. The most simple page would consist of the following lines:

<?php include("header.php") ?>

<?php include("nav.php") ?>

<div id ="content"> The foo page </div>

<?php include("footer.php") ?>

The foo page would be displayed in the white central box on the website. Another page would have to link to this page in order for people to access it.