Manual and Documentation

NOTE: This manual describes HammerKit version 3.5. To view documentation for the current release of HammerKit Studio, please go to http://manual.hammerkit.com/
search
Index / C. Using HammerKit tools / Creating and editing content / Constructing and editing a component

A. Introduction
B. Installation and Configuration
C. Using HammerKit tools
Home
Creating and modifying site design
Creating and editing content
Managing site structure
Constructing and editing a component
Using directories
D. Object API
E. HammerScript
F. Access Rights
Constructing and editing a component

Inserting text
Inserting an image
Inserting a link
Inserting a file
Importing data from a file
Inserting a table
Inserting form elements
Insert action module
Inserting a row break
Swithcing the Element toolbox on and off
Saving changes to a component
Reverting to the last saved version of the component
Selecting an element
Editing text
Editing images
Undoing operations

Use the insert buttons of the Element toolbox or INSERT menu to add elements to a component and use the Editor box functions, operation buttons of the Element toolbox and EDIT menu to edit the content and structure of the component.

Showing the insert button names

  1. Hold the mouse over the button until the button name becomes visible

Using the Viewing modes

The content editor has two viewing modes, visual mode for near wysiwyg preview of the component and tagged mode for revealing the tags, table structure and included modules contained in the page. The tagged mode is useful for site designers when constructing dynamic pages that contain forms, scripts and modules. The visual viewing mode is on by default.

  1. Select Tagged from the VIEW menu to switch the tagged viewing mode on or off. The v mark is visible in the menu when the tagged viewing mode is on.

Changing the editor background color

  1. Choose Editor background color from the VIEW menu to open the Color chooser
  2. Specify the color and click done to apply the settings.
    The background color is not applied in tagged viewing mode.

Editor box

The editor box contains the content or elements of the component such as:
  • text blocks
  • images
  • links
  • file links
  • form elements
  • tables
  • action modules
  • included components
  • logic scripts
The editor box contains two interface elements:
  • The selector button
  • The row break button

The selector button

Each individual has a selector button, a small green square that turns red when the mouse is over it and remains red if it has been clicked once. Use the selector button to select and to edit elements.

The row break button

The row break button is a green small square containing connected white lines at the bottom and in the right side of the square. The row break generates a <br>tag in the HTML source code of the component.

Using the row break button

You can select, edit and move Row break buttons in the similar way as the selector buttons.

Editing elements

  1. Click the selector button twice to open the element properties window.
  2. Specify the changes to the element�s properties.
  3. Click the done button to confirm the settings.
  4. The changes to element properties are not saved permanently until you click the save button in the component toolbox to save the changes to the component.

Selecting elements

  1. Click the selector button once to select the element.
    The selector button turns red.
    Hold the shift key down to select several elements.
    Choose Select all from the EDIT menu to select all elements in the component.

Moving elements

  1. Select one or more elements. [See ]
  2. Click the target element�s selector button or the row break button once.
  3. The browser is updated and the selected elements are re-located after the target element.

Pointing the target element

Pointing the target element is a method of specifying the location where the elements should be inserted, pasted or moved.

  1. Click the target element�s selector button or the row break button once.
    The button turns red.
  2. The elements will be re-located in the right side or after the target element. If you point the row break button or a table�s selector button the element will be inserted below the row break. Some Action Modules behave in this way too.

Undoing operations

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 menu title is light grey the operation is not available. This is the case for example if you have undone every operation since the last save.

Using the EDIT menu

  1. Click the EDIT menu title of the content editor once.
    The Edit pop-up menu appears.
  2. Click undo once to undo the last operation.
  3. You can repeat the undo until you have reached the state that the component had when it was saved the last time.

Using the operation buttons

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

Redoing operations

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

Using the EDIT menu

  1. Click the EDIT menu title of the content editor once.
    The Edit pop-up menu appears.
  2. Click redo once to redo the last operation and cancel the undoing.
  3. You can repeat the redo up to first undone operation

Using the redo button

  1. Click the redo button in the element toolbox once to redo the last operation and cancel the undoing.
  2. You can repeat the redo up to first undone operation

Cutting elements from the component to the clipboard

Using the edit menu

  1. Point and click the selector buttons and/or row break buttons to select the elements. Hold the shift key down to select multiple elements.
    The selector buttons of the selected elements turn red.
  2. Click cut once.
    The elements are removed from the editor box and placed in the clipboard.

Using the cut button

  1. Point and click the selector buttons and/or row break buttons to select the elements. Hold the shift key down to select multiple elements.
    The selector buttons of the selected elements turn red.
  2. Click the cut button once.
    The elements are removed from the editor box and placed in the clipboard.

Copying elements to the clipboard

Using the EDIT menu

  1. Point and click the selector buttons and/or row break buttons to select the elements. Hold the shift key down to select multiple elements.
    The selector buttons of the selected elements turn red.
  2. Click the EDIT menu title of the component editor once.
    The edit pop-up menu appears.
  3. Click copy once.
    The copies of selected the elements are placed in the clipboard.

Using the copy button

  1. Point and click the selector buttons and/or row break buttons to select the elements. Hold the shift key down to select multiple elements.
    The selector buttons of the selected elements turn red.
  2. Click the copy button once.
    The copies of selected the elements are placed in the clipboard.

Pasting elements from the clipboard

  1. Click the selector button of the target element or the row break icon to point the location for the elements.
  2. Click the paste elements button in the element toolbox to open the clipboard pop-up menu.
  3. Click to select the operation.
    • Click Paste all to paste all elements from the clipboard.
    • Click the title of the element to paste a single element.
UPDATED: 11.09.2005 17:43
  • 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.

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.

    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.

    Use the link element tool to:
    • create a dynamic link to any component of the site using the component chooser
    • specify a link to any component of the site
    • specify a link to any file in the file directory
    • create a link to any external URL
    • create an e-mail link
    You can create links also in the text element by writing the HTML code of the link inside the text. And you can attach links to images too.

    1. Click the Insert link button once or select insert link from the INSERT menu to open the Link 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.

    Use the insert file operation to insert links to files locating in the site�s file directory. Clicking the file�s link in the page launches the download of the file.

    Inserting a file

    1. Click the insert file button once or select File from the INSERT menu to open the file properties window.
    2. Click the Browse... button of the Choose a file field once to open the file chooser.
    3. Select or upload the file [See
    4. The directory path of the file appears in the Choose a file field.
    5. Select the Display option
      • Select File attribute to display a specified file attribute as selected from Attribute select box.
      • Select Free text to specify the text
      • Select Embed (works with .swf files) to embed a Flash Shockwave animation
      • Select Button to display a button
      • Select Thumbnail (formatted metafle) to display a thumbnail associated to file.
      Specify a link target for the file attribute or free text.
      • Click the Browse button of the Link target field to open the Component chooser
      • Select Special components to specify a download link to THIS FILE.

    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.

    Use import data operation to import text from a RTF or HTML file and HammerKit components from a zip compressed HammerKit export file.

    You can save text file in Rich Text Format (RTF) in all the general text editors including Microsoft Word. In the import the formatting of the text file is converted to html formatting. The importing of the RTF file generated by Mac�s TextEdit gives unsatisfactory results.
    The importing of the HTML file generated by Microsoft Word is not recommended and may generate unsatisfactory results because it contains lots of special settings and tags supported by Microsoft Internet Explorer only and not in accordance with the HTML standards.

    Importing data from a file

    1. Click the Import data button once or select import from the INSERT menu to open the Import data form.
    2. Select the file format for the file import from the File type select box.
      • Select Hammerkit Export to import components from a zip-compressed Hammerkit Export file.
      • Select HTML to import the source code from an HTML file.
      • Select RTF to import formatted text from the RTF file
    3. Click the Browse button of the Choose a file field once to open the file upload window for selecting a file from your computer
    4. Click the done button once to complete 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.

    Tables are used for two purposes in the web page:
    • to present table format data and
    • to position content elements on the page.
    Because of the limitations of the HTML code, tables are widely used by content creators and web designers as a lay-out tool to position and organize content and design elements on a web page. In HammerKit�s content editor, you can place all kinds of content elements, components, scripts and modules inside table cells in the content editors content box.

    Placing tables inside tables
    However, it is not possible in Hammerkit to place another table directly inside a table�s cell. Instead, you can include another component containing a table or several tables inside a table�s cell using a component module.

    Using box styles to specify table design
    In addition to the design settings available in the table tool you can set the table design by applying the pre-defined box styles to tables and table cells.

    1. Click the insert table button once or select Table from the INSERT menu to open the Table editor.

    Specifying table properties

    1. Specify the table width in pixels or as a percentage value. If you leave the width unspecified, the table width conforms to the table content.
    2. Specify the table height in pixels. The percentage value for the table height is not supported by all browsers.
    3. Specify the number of columns and rows.
    4. You can specify uniform cell padding for all table cells in pixels or as a percentage value. Use box styles to define an unique cell padding for individual table cells.
    5. You can specify uniform cell spacing for table cells in pixels or as a percentage value. Use box styles to define an unique cell padding for individual table cells.
    6. You can specify the table border width in pixels
    7. You can select a pre-defined box style to specify the table style.
    8. Click the set button once to apply the settings.
      If you created a new table, the Table target selector appears in the right side of the table properties form and the table preview is visible below it.
    9. After completing the settings, click the done button once to return to the content editor.

      Specifying table properties

      1. Specify the table width in pixels or as a percentage value. If you leave the width unspecified, the table width conforms to the table content.
      2. Specify the table height in pixels. The percentage value for the table height is not supported by all browsers.
      3. Specify the number of columns and rows.
      4. You can specify uniform cell padding for all table cells in pixels or as a percentage value. Use box styles to define an unique cell padding for individual table cells.
      5. You can specify uniform cell spacing for table cells in pixels or as a percentage value. Use box styles to define an unique cell padding for individual table cells.
      6. You can specify the table border width in pixels
      7. You can select a pre-defined box style to specify the table style.
      8. Click the set button once to apply the settings.
        If you created a new table, the Table target selector appears in the right side of the table properties form and the table preview is visible below it.
      9. After completing the settings, click the done button once to return to the content editor.

        Specifying table properties

        1. Specify the table width in pixels or as a percentage value. If you leave the width unspecified, the table width conforms to the table content.
        2. Specify the table height in pixels. The percentage value for the table height is not supported by all browsers.
        3. Specify the number of columns and rows.
        4. You can specify uniform cell padding for all table cells in pixels or as a percentage value. Use box styles to define an unique cell padding for individual table cells.
        5. You can specify uniform cell spacing for table cells in pixels or as a percentage value. Use box styles to define an unique cell padding for individual table cells.
        6. You can specify the table border width in pixels
        7. You can select a pre-defined box style to specify the table style.
        8. Click the set button once to apply the settings.
          If you created a new table, the Table target selector appears in the right side of the table properties form and the table preview is visible below it.
        9. After completing the settings, click the done button once to return to the content editor.

          Specifying table properties

          1. Specify the table width in pixels or as a percentage value. If you leave the width unspecified, the table width conforms to the table content.
          2. Specify the table height in pixels. The percentage value for the table height is not supported by all browsers.
          3. Specify the number of columns and rows.
          4. You can specify uniform cell padding for all table cells in pixels or as a percentage value. Use box styles to define an unique cell padding for individual table cells.
          5. You can specify uniform cell spacing for table cells in pixels or as a percentage value. Use box styles to define an unique cell padding for individual table cells.
          6. You can specify the table border width in pixels
          7. You can select a pre-defined box style to specify the table style.
          8. Click the set button once to apply the settings.
            If you created a new table, the Table target selector appears in the right side of the table properties form and the table preview is visible below it.
          9. After completing the settings, click the done button once to return to the content editor.

            Specifying table properties

            1. Specify the table width in pixels or as a percentage value. If you leave the width unspecified, the table width conforms to the table content.
            2. Specify the table height in pixels. The percentage value for the table height is not supported by all browsers.
            3. Specify the number of columns and rows.
            4. You can specify uniform cell padding for all table cells in pixels or as a percentage value. Use box styles to define an unique cell padding for individual table cells.
            5. You can specify uniform cell spacing for table cells in pixels or as a percentage value. Use box styles to define an unique cell padding for individual table cells.
            6. You can specify the table border width in pixels
            7. You can select a pre-defined box style to specify the table style.
            8. Click the set button once to apply the settings.
              If you created a new table, the Table target selector appears in the right side of the table properties form and the table preview is visible below it.
            9. After completing the settings, click the done button once to return to the content editor.

              Specifying table properties

              1. Specify the table width in pixels or as a percentage value. If you leave the width unspecified, the table width conforms to the table content.
              2. Specify the table height in pixels. The percentage value for the table height is not supported by all browsers.
              3. Specify the number of columns and rows.
              4. You can specify uniform cell padding for all table cells in pixels or as a percentage value. Use box styles to define an unique cell padding for individual table cells.
              5. You can specify uniform cell spacing for table cells in pixels or as a percentage value. Use box styles to define an unique cell padding for individual table cells.
              6. You can specify the table border width in pixels
              7. You can select a pre-defined box style to specify the table style.
              8. Click the set button once to apply the settings.
                If you created a new table, the Table target selector appears in the right side of the table properties form and the table preview is visible below it.
              9. After completing the settings, click the done button once to return to the content editor.

                Specifying table properties

                1. Specify the table width in pixels or as a percentage value. If you leave the width unspecified, the table width conforms to the table content.
                2. Specify the table height in pixels. The percentage value for the table height is not supported by all browsers.
                3. Specify the number of columns and rows.
                4. You can specify uniform cell padding for all table cells in pixels or as a percentage value. Use box styles to define an unique cell padding for individual table cells.
                5. You can specify uniform cell spacing for table cells in pixels or as a percentage value. Use box styles to define an unique cell padding for individual table cells.
                6. You can specify the table border width in pixels
                7. You can select a pre-defined box style to specify the table style.
                8. Click the set button once to apply the settings.
                  If you created a new table, the Table target selector appears in the right side of the table properties form and the table preview is visible below it.
                9. After completing the settings, click the done button once to return to the content editor.
                  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.

                  All the actions in the HammerKit-generated site are based on the Action Modules.

                  Create input elements to save data in the scores table of the database.

                  Create input elements to save data in the scores table of the database.

                  Create input elements to save data in the scores table of the database.

                  Create input elements to save data in the scores table of the database.

                  Create input elements to save data in the scores table of the database.

                  Create input elements to save data in the scores table of the database.

                  Create input elements to save data in the scores table of the database.

                  Create input elements to save data in the scores table of the database.

                  Create input elements to save data in the scores table of the database.

                  Create input elements to save data in the scores table of the database.

                  Create input elements to save data in the scores table of the database.

                  Create input elements to save data in the scores table of the database.

                  Create input elements to save data in the scores table of the database.

                  Create input elements to save data in the scores table of the database.

                  Create input elements to save data in the scores table of the database.

                  Create input elements to save data in the scores table of the database.

                  Create input elements to save data in the scores table of the database.

                  Create input elements to save data in the scores table of the database.

                  Create input elements to save data in the scores table of the database.

                  Create input elements to save data in the scores table of the database.

                  Create input elements to save data in the scores table of the database.

                  Create input elements to save data in the scores table of the database.

                  Create input elements to save data in the scores table of the database.

                  Create input elements to save data in the scores table of the database.

                  Create input elements to save data in the scores table of the database.

                  Create input elements to save data in the scores table of the database.

                  Create input elements to save data in the scores table of the database.

                  Create input elements to save data in the scores table of the database.

                  Create input elements to save data in the scores table of the database.

                  Create input elements to save data in the scores table of the database.

                  Create input elements to save data in the scores table of the database.

                  Create input elements to save data in the scores table of the database.

                  Create input elements to save data in the scores table of the database.

                  Create input elements to save data in the scores table of the database.

                  Create input elements to save data in the scores table of the database.

                  Create input elements to save data in the scores table of the database.

                  Create input elements to save data in the scores table of the database.

                  Create input elements to save data in the scores table of the database.

                  Create input elements to save data in the scores table of the database.

                  Create input elements to save data in the scores table of the database.

                  Create input elements to save data in the scores table of the database.

                  Create input elements to save data in the scores table of the database.

                  Create input elements to save data in the scores table of the database.

                  Create input elements to save data in the scores table of the database.

                  Create input elements to save data in the scores table of the database.

                  Create input elements to save data in the scores table of the database.

                  Create input elements to save data in the scores table of the database.

                  Create input elements to save data in the scores table of the database.

                  Create input elements to save data in the scores table of the database.

                  Create input elements to save data in the scores table of the database.

                  Create input elements to save data in the scores table of the database.

                  Create input elements to save data in the scores table of the database.

                  Create input elements to save data in the scores table of the database.

                  Create input elements to save data in the scores table of the database.

                  Create input elements to save data in the scores table of the database.

                  Create input elements to save data in the scores table of the database.

                  Create input elements to save data in the scores table of the database.

                  Create input elements to save data in the scores table of the database.

                  Create input elements to save data in the scores table of the database.

                  Create input elements to save data in the scores table of the database.
                  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.

                  Inserting a row break

                  Use the row break element to create row breaks. The row break element adds a
                  tag in the HTML source code of the component.

                  1. Click the insert row break button once or select line break (br) from the INSERT menu .
                  2. The row break icon appears in the location that was pointed.

                  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.
                    UPDATED: 11.09.2005 17:43


                    � HammerKit Oy 2008 UPDATED: 11.09.2005 17:43