Portal layout exercises

Generic exercises

Web Accessibility – Browsing with Javascrpit disabled

Try to browse different websites with Javascript enabled then with Javascript disabled (http://www.biodiv-chm.de/ for instance)

Usability – Test some navigation features

Use the Sitemap to reach a certain page in the portal, then use the breadcrumb trail to check any of the upper levels in the site hierarchy. (ex: test on http://biodiversity-chm.eea.europa.eu/)

Semantic HTML - Exemplifying the importance of marking the page titles properly.

Search on Google for the generic expression: events devoted to Biodiversity. The EC CHM website will be the first link because of the use of <h1> tag.

Semantic HTML – Search definitions for certain terms

Search on Google the definition for a certain term (“allozymes” for instance). In order to restrict the results only on definitions type define:allozymes

CSS2 – Printing a page from browser

You want to print a portal page. Go to your browser menu and select “File> Print preview” to check how your page would look like on paper.

Modifing your EC-CHM interface

Customizing the portal title and subtitle; and the description for the welcome page;
Choosing the logo(logos)

Go to Administration – Portal properties – Metadata tab
Fill in the corresponding fields for site titles and description.
Use the translation bar to provide their translations, in the available languages.

Go to Administration – Portal properties – Logos tab
Upload each of the two logos.
You can use for instance the files bellow for the left and for the right logo.

Choosing a layout and a color scheme for your website

Go to Administration – Portal layout
Use the "Layout" combo box and the "Color scheme" combo box to select a skin for your layout.

Customizing the top menu navigation bars

Go to Administration – List of links – Top navigation links item

Use the Add new link form to fill in the “Title”, “Description” and “URL” for the new added link and choose its order number.

Managing your portlets (left, right and/or middle)

Go to Administration –Portlets:Manage– Static HTML tab
Click on “Add new portlet” to reach the corresponding form. Fill in the fields title (with “My portlet”) and body.

Go to Administration –Portlets:Arrange – Left side tab

Scroll the “Available portlets” select list and choose “My portlet”. Click on the “Add ->” button to move your portlet in the “Current left portlets” list.

Modifying the CSS

Go to Zope Management Interface(ZMI).


Go to: portal_layout – chm (CHM) – indigo (indigo) – style (Main CSS)

You are now in the CSS edit form. Go to the body style description and modify the padding attribute


padding: 0em;

padding: 2em;

Go to the previous browser and refresh the page to see the result.