OpenCms e-Course (work in progress)

last update: 2005/08/27

This document contains introductory material about working with OpenCms Workplace. It describes how to create web pages with OpenCms using the OpenCms workplace and the WYSIWYG editor. In this section we are going to introduce the basics of working with the OpenCMS Workplace, the so called Explorer View. After reading this section you shall be able to create folders and pages, insert images, add the page to the navigation and finally publish the page to the Online Project Website. Furthermore you will become custom with uploading files and documents to the Workplace and add them to the menue navigation.

Table of Contents

• The Welcome page

• Request Your User-Account

• Logging into the system from the Welcome page
  

• Introduction to the User Workplace, the so called Exlporer View

• The Context Menu

• Functions of the new Button

  • Create a new folder

  • Create a new page

  • Editing pages

  • Publishing pages

  • Create an External-Link

  • Create a text file

  • Upload new document(s)

  • Create Extended Folders, the so-called Galleries

  • Create Structured Content (Portlet Example)
    

  • Create a Sibling

• Working with the WYSIWYG Editor

The Welcome page

The Welcome page shown below consists of several Elements, each of which can be changed .....

Request Your User-Access-Account

Your 30 day trial User-Access-Account can be provided to you by requesting your account via the OnlineForm.

Logging into the system from the Welcome page

The Login Page can be accessed via the following URL or by clicking on the Web-CMS login Link on the left side of the Welcome page:

Please enter your user name and password, which has been provided to you through the registeration procedure or use the following developer test account:

Introduction to the User Workplace, the so called Exlporer View

The Explorer View is displayed by default after logging into the OpenCMS Workplace. This is the central view for the users of the Web-CMS Frontend.
In the header are the menues and buttons which are available in all views.

The OpenCMS Workplace consists of a menue bar at the top, the Workplace NavigationTree at the left and the "Working Area" at the right side. The Project dropdown box provides two different modes, the Offline and Online Project. The Offline project is the default project after loging into the workplace, offline means that the content is in a staging phase, before it has been published to the Online version of the public website. Pages can only be created and edited in offline mode only.

The Context Menu

The Context Menue is displayed when the user clicks the left or the right mouse button on an icon for the particular resource, for instance on the page icon or the Folder icon

• Select "Edit page" to edit the selected page. After that you will enter the WYSIWYG editor (HtmlArea for Firefox , Netscape and Mozilla, or MS DHTML Plugin for Internet Explorer), where you can write down or copy and paste your desired content from external documents. Please refer to the "Working with the WYSIWYG Editor" section of this document.
  

• by clicking on the "save and exit" button you can return to the Workplace or alternatively you can click the "publish directly" button to publish the content to become Online. Online means that the content will be available for others on the public website.

Functions of the New button

From the New dialog window the following resources can be created, except the jsp type which is only visible for users with administartive rights:

Create a New Folder

In the Create a new folder dialog window enter the following details:

• Name: Enter the name of the directory (spaces or invalid characters will be replaced with "underscore").

• Check both "Edit properties of the new folder" and "Create index file in new folder" checkboxes, if you wish to create a new page in the folder.
  

• Press the "Continue >>" button.
  

• The title will be taken from the provided name of the folder, which can be overwritten if you wish to do so. If you wish to add this folder to the menue navigation stucture, please check the "add to the navigation" checkbox and provide the desired name for the navigation-menue.

• Click on the "Finish" button to create a new directory

Please Note: After creating a new folder in the current folder please publish the newly created folder, so that you can create other Subfolders or other resources beneath this newly created folder. You can publish a folder or other resources by selecting the folder icon in the right section of the Workplace and select "pulish directly" from the dropdown menue, such as:

Create a new page

In the Create new page dialog window enter the following details:

• Name:
  Enter the name of the new HTML page here.
  

• Template:
  Select the required template for the new page from the dropdown menu. The "Content Template" is selected by default. The "PopUp Template" is a simplified version of the default template and the "Empty Template" doesn't contain any layout.
  

• Please press the "Continue" button.

• Copy body from: please select "ThreeColumns" or "OneCloumn". By selecting "ThreeColumns" you can provide additional text to the left and right Column of the Content Area.

• Select "Edit properties of the new file" checkbox to enter / change additional properties for the resource, like Title, Keywords, Description, Navigation and the avigation position respectively and press the "Continue >>" button. The "Title" and "Text in navigation" will be taken from the provided name, which can be overwritten if you wish to do so.
  

• Keywords:
  Enter keywords which can be included in the page metadata.

• Description:
  Provide a short description of the page here. The page description will be shown by the search results.

• add to navigation:
  This checkbox is selected by default. If you wish to prevent the page to be shown in the menue navigation structure, please uncheck the checkbox.
  

• Text in Navigation:
  The "Text in Navigation" will be taken from the povided Name and can be overwritten, if desired.
  Note: If the "add to navigation" checkbox is not selected then this field is not available.

• Insert after:
  In this dropdown menu the relative navigation position of the page can be specified.
  Note: If the "add to navigation" checkbox is not selected then this menu is not available.

Click on the "Finish" button to create the new page in the current directory.

Editing pages

Please select the "Edit page" function of the dropdown menu as shown above, alternatively you can open the page and use the "direct edit" function to edit the page in WYSIWYG mode:

Publishing Pages
You can publish a page by using the "publish directly" function from dropdown menue of the page or directly from the WYSIWYG Editor by clicking on the "direct publish" button.

---

Create an External-Link

In the Create a new external Link dialog window enter the following details:

• Name:Enter the name of the new HTML page here.

• Link: Enter the desired Link, for instance

By selecting the "Edit properties of the new file" chechbox and clicking on the "Continue >>" button you can select the "Add to navigation" checkbox and provide the text for the "text in navigation" attribute, e.g:

Create a text file

Create a simple text file without using any templates

Upload new file from the filesystem of the local PC into OpenCms filesystem, which we call the "Virtual File System " or VFS, Virtual because the structure is held in the Database

By clicking on the "Upload" button on the tool bar you can upload any file(s) to the current folder (filesize is limited to 16 MB). Tip: If you wish to upload more than one file, please use a archived Zipfile of your documents, which you wish to upload and select the "unzip file" checkbox.

You have also the choice to upload documents via the Upload- Applet, for doing so please check the "Use Upload-Applet" Checkbox in your preferences. The Upload Applet requires ant Java Runtime Environment 1.3 or higher.

Create Extended Folders, the so-called Galleries

Galleries are predefinded folder types for organizing Images, Downloads, External-Links, Tables and HTML templates in a stuctured way. To create and External-Folder please select the External-Folder Checkboxfrom the "New" dialog window and click the "Continue>>" button.

In the next dialog, you can create Image-, Download-, External-Links-, Table-, and HTML- Galeries:

Create Structured Content

With this function you can create different types of structured content with webforms, like CMS-Portlets, News, Events, Pressreleases, Onlineforms, etc... for your website. This mechanism can be used in general for every type of structured XML-Content. An example for a structured content on our site is the CMS-Portlet which can be reused on every page, withouht having to create it more than once :

To create such a portlet, please select after pushing the "New" wizard button the "Structured Content" option box:

Select the first option box "Portlet":

Press continue, provide a name for it, e.g. Cms_Demo_Portlet --> click finish:

Click on the "X" icon of the newly created Cms_Demo_Portlet as shown above and select edit, which brings you to a form similar like this:

Provide a Title, Short Title (which will be shown in the bread crumb navigation), press the image gallery icon on the right to the Image text field:

Select the portlet_images from the list of Image Galleries:

Click on the green check button to insert the image in the text field.

Press the external links gallery button to select the link for the image:

Optionaly you can provide the same link, which will be set to the Title and provide the release date of the portlet, click finish.

Bevor you launch the Cms_Demo_Portlet, you have to set the template and template-elements properties for your portlet, by selecting the properties from the dropdown menue list:

and provide the path to the template and template-elements of your portlet:

launch the Cms_Demo_Portlet, which shall show you something similar to this nice CMS_Portlet:

To place this portlet on the left or right side of any page, or in some cases in the content area of your page, you have to set the properties "portlets", "portlets_left" or "portlets_center" to the path where the portlets have been created. In this demo installation on our site we have created the following folders beneath the "en" directory:

/en

/portlets

/portlets_center

/portlets_left

The "portlets", "portlets_left" or "portlets_center" properties of the index.html page for instance have been set as follow:

Create a Sibling 

Definition: A Sibling is a copy of the same resource within the Sitestructure and can be placed and moved anywhere you would like.

With Siblings it is possible to create links, which can be moved, without becoming deadlinks. For instance you could create a sibling named TestSibling.html to the index.html page under "/Tutorials/<Your Account>-Tutorial/index.html".

After that click on the Sibligs page icon ans select "Show siblings" from the dropdown menue:

Then you shall get the follwing result in the "Working Area", which means you have created the same resource in a different directory:

Now if you select to edit the "TestSibling.html" page, you shall notice that you are editing the same resource "index.html" and if "index.html" moves to another place, the TestSibling.html doesn't become a deadlink!

Working with the WYSIWYG (What You See Is What You Get) Editor

Figure abvove shows additional functions, which can be used