spacer
EBIEBI Style Templates

I want to make an EBI Styled Webpage

These EBI webpage templates are provided and maintained by External Services (ES).

First you need to decide how will you be making your html webpages. We provide templates to make static html webpages or dynamic html/xml webpages, using perl, jsp, java servlet, php etc.

Please read the 'Important Guidelines for Group/Project Specific Pages' notice below before making your webpages.


NB. If you think we can improve these template guides please get in touch with us.


** Important Guidelines for Group/Project Specific Pages **
  1. The main EBI header and footer must remain intact and functional. No modalities are allowed. Avoid copying the header/footer and use the ones provided by making the relevant application call to the evo directories that have been set-up for this (Contact Us to add another machine). All calls to the head.html and foot.html must be a relative call i.e. "/inc/head.html" and "/inc/foot.html" NOT "/inc/head.html" and "/inc/foot.html", this is to prevent javascript security issues which are caused by using the javascript used within these files from another domain (other than ebi.ac.uk), for example all URL's under / are valid as http://www.embl-ebi.ac.uk.

  2. Do not remove the code onload="if(navigator.userAgent.indexOf('MSIE') != -1) {document.getElementById('head').allowTransparency = true;}", the top menus will not work in IE without this, it is needed, you can move it to another place in the code if necessary, but it is required, no joke I am serious, please do not remove this, I mean it, really really mean it...

  3. The styles described in this guide in references to colors and fonts must be followed (view sample pages).

  4. There is only 2 layouts acceptable for the body of the pages. With or without a left menu. There is no right column in the layouts.

  5. Text boxes and instructions on the main body of the pages (example).
    Text boxes and searches in every single page is confusing. It often gives the developer the feeling he is helping the user when in fact he is not.

  6. Logos are on the right hand side of the top paragraph in the main body of the page (example).

  7. The menus are aids for navigating and the menu area should be kept clutter free (no logos at the top). Also avoid using graphics in the Icon Boxes.

  8. The left menu content should remain consistent throughout the pages.
    The menu of a project should contain relevant items/categories:
    • Home of project
    • Help & Documentation
    • News
    • Statistics
    • Submissions
    • Downloads
    • Contact


Validation

Although there is not time to fix every web page on the EBI website to conform to standards, you can use our templates and validate your code as follows.

xhtml CSS WAG
Validate as xhtml 1.0 transitional.
Valid XHTML 1.0 Transitional 		Validate as CSS 2.0.
Valid CSS 		Also check the Web Accessibility Guidelines (WAG), we are conforming to cynthia level 1 content compliance in the templates.
Valid WAG


Suggested Work Procedure

Use firefox for development, install IE Tab to view your code as in Internet Explorer (Requires IE plugin/browser installed). You will also require the Web developer Extension for firefox which has many really good useful features, including an html validator.

N.B. You should also open up the javascript console in firefox and check for css parse errors and javascript errors. Press control-shift-j to open.

Help with making your web pages accessible

Click here

Help with making your web pages validate

Click here




Examples of tools forms that conform to ONE or BOTH these standards (and pass css parse error check and javascript check) are:

Tool Interface Location XHTML Validation WCAG Validation CSS 2.0 Parse Error Check Javascript Check
/Tools/clustalw/ Test Now Test Now Test Now Test Now
/Tools/clustalw2/ Test Now Test Now Test Now Test Now
/fasta/lgicp.html Test Now Test Now Test Now Test Now
/fasta/lgicn.html Test Now Test Now Test Now Test Now

>>> More Examples

Top


How this template works.

The template is now just a common skeleton, with slightly different css attributes to accomodate fixed or variable page width, and the optional left menu. The head and foot are stored in 2 files and are included by the templates. As the header has a large menu system, the contents is updated regulary, independently of any developers code, which remains unchanged. For javascript security, these have to be under the same domain name when testing.

The header files' menu is based on Son of Suckerfish Dropdowns By Patrick Griffiths and Dan Webb see http://www.htmldog.com/articles/suckerfish/dropdowns/, who based this on their original work published at http://www.alistapart.com/articles/dropdowns/.

It is an implemention using lightweight, accessible CSS-based dropdown menus that accommodated Internet Explorer by mimicking the :hover pseudo-class.

It has been modified to work as an inline frame, and to open onclick using javascript. When the menu is clicked, it comes to the top level of the z-index, then increases its height (in a transparent fashion) in order to allow the menu to drop down over the contents of the page.

To accomodate Internet Explorers transparency attribute, a non W3-compliant attribute ( onload="if(navigator.userAgent.indexOf('MSIE') != -1) {document.getElementById('head').allowTransparency = true;}") had to be added.

HTML and CSS tutorials, references, and articles HTML and CSS tutorials, references, and articles
Top


spacer
spacer