• Click the Insert text button once or select Insert text from the INSERT menu to open the Text properties form.

Specifying text properties

1. Use the Text format settings to specify the text element as:
   • Formatted text for normal web page text content
     
   • Unformatted text to write HTML or JavaScript code.
     
   • Comments to insert notes and instructions that are visible in the content editor only
     
   • Show HTML to show the HTML code written in the text element as normal text.
2. Write or paste the text in the large Compose text input area.
   
3. Use the Align... pulldown menu to set the text alignment to left, center or right from the Align select box.
   TIP: You can define the alignment in the style settings too.
   
4. Use the Text style� pull-down menu to select the pre-defined CSS style.
   The styles are created and defined in the CSS style editor of the Design view. (See Design editor: Styles). The CSS-style is applied to the whole text block.
   
5. You can also use the Box style� pull-down menu to select a predefined box style for the text element. [See Design editor CSS-styles] The CSS-style is applied to the whole text block.
   
6. You can apply bold, italic and underline styles to a selected part of the text.
   • Click and drag to select the text
     
   • Apply the style by clicking at the appropriate buttons.
     Clicking the style buttons adds style tags around the selected text.
     
   • To remove the style setting created with this method you have to remove the style tags.
7. Click to activate the Preview checkbox if you want to se the selected text style applied to the text in the Compose text text area. The Bold, italic and underline settings are ignored.
   
8. Click the done button once to apply the changes

1. Click the done button once to insert the element in the component.

• Click the Insert text button once or select Insert text from the INSERT menu to open the Text properties form.

You can insert images in the component by using the inswer image tool. To be visible in the web site the images have to be of file format supported by the browsers. The supported image file formats are: RGB JPEG, GIF and PNG.

• Click the Insert image button once or select Insert image from INSERT menu to open the Image properties form.

The Image properties form has four tabs for specifying the image properties:

• IMAGE
  
• STYLE
  
• LINK
  
• ADVANCED

1. Click the tab to open the view.

IMAGE

Selecting the image

• You can select the image from the file directory of your site or
• you can import the image from your computer�s hard disk.

Selecting the image from the site�s file directory

1. Click the Browse� button of the Image field once to open the File chooser pop-up window.
   
2. Point the image [ See:
3. Click the done button once to confirm the operation.
   The File chooser disappears and the directory path of the file appears in the Image text field.
   
4. If no other settings are necessary, click the done button once to close the Image properties form and to insert the image in the component.

Importing the image from your own computer�s hard disk

1. Click the Browse� button of the Image field once to open the File chooser pop-up window.
   
2. Point the file directory folder to which you want import the image. [See: ]
   
3. Click the upload button once to open the HammerKit�s File upload form.
   
4. Click the Browse... button of the File field once to open the File upload window of your computer.
   
5. Select the file and confirm the operation to close the window.
   The directory path of the selected file appears in the File field.
   
6. You can specify the width and height of the automatically generated thumbnail image for the imported image in the Thumbnails settings
   
7. Write the caption or description in the Description text area.
   
8. Click the save button once to import the image.
   The import may take some time, depending on the size of the image and the quality of your internet connections.When the upload is completed the File upload window is closed and you return to the file chooser.
   The image is visible in the preview area at the bottom of the file chooser and the file directory path is visible file directory path field above the preview.
   
9. Click the done button once to include the image in the image element.
   
10. If no other settings are necessary, click the done button once to close the Image properties form and to insert the image in the component.

Specifying the image URL

1. You can include an image from any URL or web address in a component by simply writing the exact URL or the web address of the image in the or image from URL text field.

Specifying the Alt textThe behaviour of the Alt text :

• If the pictures are blocked by the browser settings the alt text is shown instead.
  
• The browsers that are not capable to display images show the alt text instead.
  
• When you hold the mouse over the image the alt text is shown
  
• Some applications (for visually impaired visitors) speak the alt text.

1. Write the alternative text in the Alt text field.

STYLES

You can specify the image size, margin, alignment, border and CSS-styles in the STYLES view.

1. Click the STYLES tab once to open the STYLES view

Size

1. Define the image width in pixels (for example 200px) or as a percentage value (for example 80%). If height is not defined the image is scaled proportionally to match the width setting
   
2. Define the image height in pixels (for example 120px). The percentage value is not available for the image height. If width is not defined the image is scaled proportionally to match the height setting.
   If both values are defined the image will be scaled un-proportionally to meet the size settings.

Margins

1. Define the margins or horizontal space (hspace) and vertical space (vspace) around the image in pixels.

Border

1. Define the border width in pixels. The color of the line is defined in the style settings Alternatively You can use the Box style settings to define the border for the image.

Box style

1. Select the pre-defined CSS style from the Styles select box.
   You can use box styles to create pre-defined frames around images.

Location

1. Use the Location pull-down menu to set the image alignment to left, center or right.
   The image is aligned to left by default.
   
2. Click to activate the the inset check box if you want to inset the image inside the text block.
   The center alignment does not support the insetting of the image.

LINK

1. Click the LINK tab once to open the link settings.

You can attach links to images

• to open a page of your site
  
• to open external URLs
  
• to open an e-mail client application
  
• to open the image in larger size in a new window
  
• to create image buttons

Specifying a link to a component

1. Click the Browse� button of the Target component field to open the Component chooser.
   
   To create a dynamic link
   
   • Click THIS PAGE if you want to create a link to this page.
     
   • Click PREVIOUS PAGE if you want the link to open the page that was visited previously.
     
   • Click NEXT PAGE IN MENU if you want the link to open the next page in the same directory.
     
   • Click THIS COMPONENT if you want the link to open this component only. This is the right option when the component is included in the page containing other components and you want to open this component only.
     
   • Click BY SOURCE ID if you want to use cgi variable source_ids.
     
   • Click THIS IMAGE if you want the link open a new window containing this image only in original size.
   
   To create a link to a a specific component of the site
   • Use the Component chooser to point the component.
   
   
2. The directory path of the selected target appears in the directory path field in the bottom of the component chooser.

Creating a link to a file in the File directory.

1. Click the Browse� button of the Target file field to open the File chooser.
   
2. Point the target file.
   
   To create a dynamic link to a file:
   • Click THIS COMPONENT FOLDER
     
   • or THIS PAGE FOLDER
   
   To create a link to a specific file:
   
   • Use the File chooser to point the file

Linking to an URL

1. Write the URL in the or Write the URL text field.
   It is not necessary to add the http:// prefix because it is automatically added in the URL. But prefixes that are different from http:// (for example https://) have be included in the web address for the link to function correctly.

Specifying a link to an URL of the Component

You can create a link to an URL of the component. This is necessary for example when linking to a component of another HammerKit site.

1. Find out the URL of the component.
   The structure of the URL of the component is
   
   site URL + /index.php? + article_id= + article id number
   
   for example:
   
   www.hammerkit.com/index.php?article_id=123
   
   To find out the article_id number of the component
   • Hold the mouse over the component�s document or folder icon in the component list of the content editor. The component id number becomes visible.
     
   • Or open the component or the page in the site and recognize the article_id number in the Navigarion toolbar�s URL field.
     
     When you are browsing the site as a visitor, the URL of the component contains an unique session id consisting of numbers and letters.
     
     for example:
     
     http://www.hammerkit.com/index.php?hammerkit= 11253783356637afc508ec50c48f029e66d6360d33&article;_id=123
     
     In this case the session id is
     
     hammerkit=11253783356637afc508ec50c48f029e66d6360d33&
     
     Do not include the session id in the URL.
   
   
2. Write URL of the component in the or link to URL field.

Specifying an e-mail link

1. Write the e-mail address in the or link to URL field.
   
2. Check the E-mail URL option.

Opening the link in a new window

By default the target of the link is opened in the same window. But you can set the link to open in a new window.

1. Select New window from the Open link in pull down menu.
   The Window properties settings appear.
   
2. Specify the Width and Height of the new window in pixels in the Size settings.
   
3. Specify the Location of the new window in pixels as a x value for horizontal distance of the new window�s left edge from the display�s left edge and as a y value for vertical distance of the new windows top edge from the top edge of the display.
   
4. Click to activate the Scrollbars option to make the scrollbars appear in the new window if the contents of the window flow over the window area.
   
5. Click to activate the options for the browsers toolbars to be set visible in the new window. The available toolbar options are:
   • Menubar
     
   • Toolbar
     
   • Location
     
   • Directories
     
   • Status
6. Click to activate the Resizable option to make the new window resizable

ADVANCED

In the advanced options view you can write e.g. JavaScript actions connected to links.

Confirming the operation

1. Click the done button once to confirm the settings.

1. Click the done button once to insert the element in the component.

• Click the Insert text button once or select Insert text from the INSERT menu to open the Text properties form.

Specifying a link to a component

1. Click the Browse� button of the Target component field to open the Component chooser.
   
   To create a dynamic link
   
   • Click THIS PAGE if you want to create a link to this page.
     
   • Click PREVIOUS PAGE if you want the link to open the page that was visited previously.
     
   • Click NEXT PAGE IN MENU if you want the link to open the next page in the same directory.
     
   • Click THIS COMPONENT if you want the link to open this component only. This is the right option when the component is included in the page containing other components and you want to open this component only.
     
   • Click BY SOURCE ID if you want to use cgi variable source_ids.
     
   • Click THIS IMAGE if you want the link open a new window containing this image only in original size.
   
   To create a link to a a specific component of the site
   • Use the Component chooser to point the component.
   
   
2. The directory path of the selected target appears in the directory path field in the bottom of the component chooser.

Creating a link to a file in the File directory.

1. Click the Browse� button of the Target file field to open the File chooser.
   
2. Point the target file.
   
   To create a dynamic link to a file:
   • Click THIS COMPONENT FOLDER
     
   • or THIS PAGE FOLDER
   
   To create a link to a specific file:
   
   • Use the File chooser to point the file

Linking to an URL

1. Write the URL in the or Write the URL text field.
   It is not necessary to add the http:// prefix because it is automatically added in the URL. But prefixes that are different from http:// (for example https://) have be included in the web address for the link to function correctly.

Specifying a link to an URL of the Component

You can create a link to an URL of the component. This is necessary for example when linking to a component of another HammerKit site.

1. Find out the URL of the component.
   The structure of the URL of the component is
   
   site URL + /index.php? + article_id= + article id number
   
   for example:
   
   www.hammerkit.com/index.php?article_id=123
   
   To find out the article_id number of the component
   • Hold the mouse over the component�s document or folder icon in the component list of the content editor. The component id number becomes visible.
     
   • Or open the component or the page in the site and recognize the article_id number in the Navigarion toolbar�s URL field.
     
     When you are browsing the site as a visitor, the URL of the component contains an unique session id consisting of numbers and letters.
     
     for example:
     
     http://www.hammerkit.com/index.php?hammerkit= 11253783356637afc508ec50c48f029e66d6360d33&article;_id=123
     
     In this case the session id is
     
     hammerkit=11253783356637afc508ec50c48f029e66d6360d33&
     
     Do not include the session id in the URL.
   
   
2. Write URL of the component in the or link to URL field.

Specifying an e-mail link

1. Write the e-mail address in the or link to URL field.
   
2. Check the E-mail URL option.

Specifying the link text

The link text is shown instead of the URL. Clicking the link text opens the link.

1. Write the link text in the Link text field.

If no Link text is specified the menu title of the target component or the URL is used.

Opening the link in a new window

By default the target of the link is opened in the same window. But you can set the link to open in a new window.

1. Select New window from the Open link in pull down menu.
   The Window properties settings appear.
   
2. Specify the Width and Height of the new window in pixels in the Size settings.
   
3. Specify the Location of the new window in pixels as a x value for horizontal distance of the new window�s left edge from the display�s left edge and as a y value for vertical distance of the new windows top edge from the top edge of the display.
   
4. Click to activate the Scrollbars option to make the scrollbars appear in the new window if the contents of the window flow over the window area.
   
5. Click to activate the options for the browsers toolbars to be set visible in the new window. The available toolbar options are:
   • Menubar
     
   • Toolbar
     
   • Location
     
   • Directories
     
   • Status
6. Click to activate the Resizable option to make the new window resizable

specifying link styles

1. Click the STYLES tab once access link style settings.
   
2. Select the predefined Link style for the link from the Text: pulldown menu. You can also select a box style for the link from the Box: pulldown menu
   
3. Select the predefined Mouseover style from the Text: pulldown menu. You can also select a box style for the link mouseover text from the Box: pulldown menu
   
4. Select the predefined Active style for the link from the Text: pulldown menu. You can also select a box style for the link from the Box: pulldown menu
   
5. You can set the horizontal alignment of the link to left, center or right from the Alignment pull-down menu
   
6. You can specify bullet character for the link in the Bullet text field or
   
7. Click the Browse... button of the or image file field once to open the file chooser for selecting or uploading the bullet image for the link

1. Click the done button once to insert the element in the component.

• Click the Insert text button once or select Insert text from the INSERT menu to open the Text properties form.

• Click the Insert text button once or select Insert text from the INSERT menu to open the Text properties form.

• Click the Insert text button once or select Insert text from the INSERT menu to open the Text properties form.

1. Click the done button once to insert the element in the component.

• Click the Insert text button once or select Insert text from the INSERT menu to open the Text properties form.

You can use the Insert Form tool to create various input forms for saving data in the database of the site. You can create

• feedback and message input forms to receive messages from visitors.
  The feedback messages are listed in the Messages directory of the Home view .
  
• You can create login forms to check the user rights and to open access to privileged content and actions for intranet and extranet users.
  
• You can create user data input forms to save the data in the user data directory.
  
• You can create file upload forms to upload files and images and related information to the file directory.
  
• You can create order input forms to save the customer and order information to order database
  
• You can create questionnaries to save the information to questions and answers table of the database. You can use questions and answers table of the database for gallups, tests, games etc.
  
• You can create input forms for actions.

Creating and editing forms

To master the construction of web forms you need to understand a few basic rules:

• The order of the form elements must always be: Form start, input elements, submit button, form end.
  
• No special characters or spaces are allowed in the form element names.
  
• Form element values can contain any caharacters
  
• Always point the target component or the page which is accessed after submitting the form. (See Pointing the target component)
  
• Don�t mix data types.
  It is not possible to use one form to input two types of data. For example it is not possible to save the data to the order management database and user database with a same form.
  
• Place the form elements in the correct reading order for the system. If the form elements are scattered inside different table cells you have take into account the reading order of the table cells, which is from left to right and then from top to bottom. For example in the table with two columns and two rows the left top cell is read first then the top right cell and after that the left bottom cell and the right bottom cell last.
  
• The form has to be ended.
  In most cases the form end element is automatically added whet the submit button for the form is placed. In some occasions you need to place the form end element to make sure the form is ok.
  
• You can mix freely form elements with other types of elements.
  For example you can use the text tool to create the labels for the input elements. Just remember the correct order of the form elements.

Creating a form element

1. Click the Insert form element button once to open the Form editor.
   
2. Select the form element type from the Add element select box.
   
3. Specify the element settings.
   
4. Click the done button once to confirm the settings.
   The form editor is closed and you return to the content editor.<(li>

Editing a form element

1. Click the selector button of the form element twice to open the Form editor.
   
2. Specify the settings.
   
3. Click the done button once to apply the settings.
   
4. After you have made the changes, click the save button once to save the changes to the component permanently.

1. Click the done button once to insert the element in the component.

• Click the Insert text button once or select Insert text from the INSERT menu to open the Text properties form.

1. Click the done button once to insert the element in the component.

• Click the Insert text button once or select Insert text from the INSERT menu to open the Text properties form.

1. Click the done button once to insert the element in the component.

• Click the Insert text button once or select Insert text from the INSERT menu to open the Text properties form.

1. Click the done button once to insert the element in the component.

• Click the Insert text button once or select Insert text from the INSERT menu to open the Text properties form.

1. Click the done button once to insert the element in the component.

• Click the Insert text button once or select Insert text from the INSERT menu to open the Text properties form.

Saving components

1. Click the COMPONENT menu title once to open the component menu.
   
2. Choose Save to save the changes.

or

1. Click the save button in the component toolbox once.

1. Click the done button once to insert the element in the component.

• Click the Insert text button once or select Insert text from the INSERT menu to open the Text properties form.

Reverting to the last saved version of the component

1. Click the COMPONENT menu title once to open the component menu.
   
2. Click Revert once:
   The pop-up window appears.
   
3. Confirm the operation

or

1. Click the dark grey revert button in the component toolbox once.
   The pop-up window appears
   
2. Confirm the operation

1. Click the done button once to insert the element in the component.

• Click the Insert text button once or select Insert text from the INSERT menu to open the Text properties form.

1. Click the done button once to insert the element in the component.

• Click the Insert text button once or select Insert text from the INSERT menu to open the Text properties form.

1. Click the done button once to insert the element in the component.

• Click the Insert text button once or select Insert text from the INSERT menu to open the Text properties form.

Editing the text element

1. Click the selector button of the text element twice to open the Text properties window.

Specifying text properties

1. Use the Text format settings to specify the text element as:
   • Formatted text for normal web page text content
     
   • Unformatted text to write HTML or JavaScript code.
     
   • Comments to insert notes and instructions that are visible in the content editor only
     
   • Show HTML to show the HTML code written in the text element as normal text.
2. Write or paste the text in the large Compose text input area.
   
3. Use the Align... pulldown menu to set the text alignment to left, center or right from the Align select box.
   TIP: You can define the alignment in the style settings too.
   
4. Use the Text style� pull-down menu to select the pre-defined CSS style.
   The styles are created and defined in the CSS style editor of the Design view. (See Design editor: Styles). The CSS-style is applied to the whole text block.
   
5. You can also use the Box style� pull-down menu to select a predefined box style for the text element. [See Design editor CSS-styles] The CSS-style is applied to the whole text block.
   
6. You can apply bold, italic and underline styles to a selected part of the text.
   • Click and drag to select the text
     
   • Apply the style by clicking at the appropriate buttons.
     Clicking the style buttons adds style tags around the selected text.
     
   • To remove the style setting created with this method you have to remove the style tags.
7. Click to activate the Preview checkbox if you want to se the selected text style applied to the text in the Compose text text area. The Bold, italic and underline settings are ignored.
   
8. Click the done button once to apply the changes

Saving the changes

1. Click the save button in the Component toolbox once to save the changes to the permanently

1. Click the done button once to insert the element in the component.

• Click the Insert text button once or select Insert text from the INSERT menu to open the Text properties form.

Editing image properties

1. Click the small green square selector button of the image twice to open the Image properties form.

IMAGE

Selecting the image

• You can select the image from the file directory of your site or
• you can import the image from your computer�s hard disk.

Selecting the image from the site�s file directory

1. Click the Browse� button of the Image field once to open the File chooser pop-up window.
2. Point the image [ See:
3. Click the done button once to confirm the operation. The File chooser disappears and the directory path of the file appears in the Image text field.
4. If no other settings are necessary, click the done button once to close the Image properties form and to insert the image in the component.

Importing the image from your own computer�s hard disk

1. Click the Browse� button of the Image field once to open the File chooser pop-up window.
2. Point the file directory folder to which you want import the image. [See: ]
3. Click the upload button once to open the HammerKit�s File upload form.
4. Click the Browse... button of the File field once to open the File upload window of your computer.
5. Select the file and confirm the operation to close the window. The directory path of the selected file appears in the File field.
6. You can specify the width and height of the automatically generated thumbnail image for the imported image in the Thumbnails settings
7. Write the caption or description in the Description text area.
8. Click the save button once to import the image. The import may take some time, depending on the size of the image and the quality of your internet connections.When the upload is completed the File upload window is closed and you return to the file chooser. The image is visible in the preview area at the bottom of the file chooser and the file directory path is visible file directory path field above the preview.
9. Click the done button once to include the image in the image element.
10. If no other settings are necessary, click the done button once to close the Image properties form and to insert the image in the component.

The mouse over image

The mouseover image replaces the image in the component when the mouse is over the image.

1. Select the Mouseover image the same way as the Image

Specifying the image URL

1. You can include an image from any URL or web address in a component by simply writing the exact URL or the web address of the image in the or image from URL text field.

STYLES

You can specify the image size, margin, alignment, border and CSS-styles in the STYLES view.

1. Click the STYLES tab once to open the STYLES view

Size

1. Define the image width in pixels (for example 200px) or as a percentage value (for example 80%). If height is not defined the image is scaled proportionally to match the width setting
2. Define the image height in pixels (for example 120px). The percentage value is not available for the image height. If width is not defined the image is scaled proportionally to match the height setting. If both values are defined the image will be scaled un-proportionally to meet the size settings.

Margins

1. Define the margins or horizontal space (hspace) and vertical space (vspace) around the image in pixels.

Border

1. Define the border width in pixels. The color of the line is defined in the style settings Alternatively You can use the Box style settings to define the border for the image.

Box style

1. Select the pre-defined CSS style from the Styles select box. You can use box styles to create pre-defined frames around images.

Location

1. Use the Location pull-down menu to set the image alignment to left, center or right. The image is aligned to left by default.
2. Click to activate the the inset check box if you want to inset the image inside the text block. The center alignment does not support the insetting of the image.

ADVANCED

In the advanced options view you can write e.g. JavaScript actions connected to links.

Confirming the operation

1. Click the done button once to confirm the settings.

1. Click the done button once to insert the element in the component.

• Click the Insert text button once or select Insert text from the INSERT menu to open the Text properties form.

You can undo one by one the operations you performed to a component after the last save or opening of the component. If the undo button is light grey the operation is not available. This is the case for example if you have undone every operation since the last save.

1. Click the undo button once.
   
2. You can repeat the undo until you have reached the state that the component had when it was saved the last time.

1. Click the done button once to insert the element in the component.