Euro-Mediterranean Information System on know-how in the Water sector
International portal
 

HTML Document Portal layout exercises

Released 12/09/2006
PDF

Generic exercises

Usability - Test some navigation features (breadcrumbtrail, sitemap, main sections bar, left navigation portlet)

Use the Sitemap to reach a certain page in the portal and then use the breadcrumb trail to check any of the upper levels in the site hierarchy.

Go to Administration - Main sections tab and customize the portal main section bar.

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 portal interface

Customizing the portal title, subtitle and the description for the welcome page.
Choosing the logo.

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 a new logo.

Customizing header thumbnails

Go to Administration - Header thumbnails tab. Add/Delete thumbnails.

Choosing a layout and a color scheme for your website

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

Go to Administration - Portal layout - Charter colour (view)
Several layout parts of the portal can be customized from here.

Customizing the navigation bars

Go to Administration – List of links – Footer 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.
Create a portlet using a list of links.

Modifying the CSS

Go to Zope Management Interface(ZMI).

http://server_name:8080/semide/manage/

Go to: portal_layout – semide – blue (blue) – style (Main CSS)

You are now in the CSS edit form. Go to the body style description
and modify the background-color attribute of the body class

from:

background-color: white;

to:
background-color: #ccc;



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