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
The header file is called
This tells the webserver to include the contents of the
The header file contains the
The header file also tells the webserver to include the stylesheet. In this case the stylesheet is named
The first function preloads the images in order to speed up their presentation on the page.
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
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:
The content of each page is enclosed in a
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:
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
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.