WebBlocks, Elements

Elements are used to add content to a WebBlock. Each element is placed in a cell (that can contain several elements). If you haven't already, we advise you to read the help topic WebBlocks, Structures before continuing.
 Inserting an Element

Most elements can be added using a cell's context menu accessed by the second icon.

For certain, more rarely used elements, you should click on "Add an unlisted element" at the bottom of this menu to access the complete list of elements avaiable for WebBlocks.

 Text Element

This element lets you add text to a cell. Once inserted, you access a properties page. To come back to this page later, simply click on the text. The following properties can be defined here:
  • Text:
Text input area.

Unlike the rich text element, there is no easy way to format text within this element. The text will inherit the alignment properties of the cell in which it's placed.

Still, a text zone can receive and interpret HTML tags which can be used to format text if needed.

We advise you to keep your tags simple. A font tag will always be added to the generated HTML code as well as line breaks. For example, this type of element would not at all be suitable for adding JavaScript to your WebBlock. For that we would suggest using an "Add HTML Code or a Script" element instead.
  • Precede this text with a bullet:
Lets you create unordered lists by adding a bullet before the text.
  • Name:
This field is only used in very specific cases when creating advanced WebBlocks using execution scripts.
  • Font:
This is a required field . You can either: define a specific font style and choose the font face, size, colour and style effects, or use a font from the site design. We recommend opting for the latter so that your WebBlock will display in the same style as the rest of your pages. The site font styles are defined in the Site Design.

N.B : When creating a WebBlock that will be used as a newsletter, you must define specific font styles to your text elements. The reason being, the CSS rules that define the typography for your site design won't be sent along with the newsletter.
  • Navigation Behaviour Properties:
You can make this text a hyperlink by defining a navigation behaviour.

 Image Element

This element lets you add an image to a cell. Once inserted, you access a properties page. To come back to this page later, simply click on the image. The following properties can be defined here:
  • Image:
By clicking on the browse [...] button, you access an interface for selecting images from your gallery. You can also add or modify the image to be used in this element.

  • Alignment:
Define image alignment in the cell.

- The setting "Default" allows the image to inherit the containing cell's alignment properties.
- The other possible values will overide the cell's alignment setting if several elements are contained in the same cell (for example a text and an image). In that case you can define a specific behaviour for the image.
  • Dimensions:
It's possible to modify the size of an image without having to re-import the picture into your gallery in a new format. This is very practical for fine tuning your WebBlock layout.

Be careful however, to use an image close enough to the dimensions you want to set. An image originally 400 X 400 pixels that you display at 60 X 60 pixels would needlessly weigh down your page. The opposite, an image originally only a hundred pixels displayed in large format, would appear pixelised.

Incidentally, you need not fill in both the "height" and "width" fields. One value is enough, the system will display the resized image proportionally.
  • Alternate Text:
This field lets you define the text that will be seen when the user "mouses over" the image.

Aside from this simple functionality, alternate text is very useful for search engine optimization (SEO). Since a search engine doesn't "see" images, it uses alternate texts to guess what's in them. Don't hesitate to add a few strategic keywords into these zones.
  • Navigation Behaviour Properties:
You can make this image a hyperlink by defining a navigation behaviour.

 Horizontal Line Element

As the name suggests, this element creates horizontal separating lines. You can either use one of the models used in the components ("Use a class") or define a specific colour and thickness for your line.

 Drop-Down Navigation List Element

These elements let you create drop-down select list type menus, each line being a link taking the visitor to a specified page.
  • The Name column is the text seen for each menu item on the list.

  • The Navigation Behaviour.column defines what should happen when the menu item is selected.

  • The right column lets you add, delete or move items in the list.

  • The Name is required, however the Navigation Behaviour is optional, which lets you add separators (dashes, spaces, etc;) if necessary, to make the list clearer.
 Multimedia Elements (Video, Flash)
  • The Add a Video element simply lets you add videos posted on You Tube or Daily Motion.

  • The Add a Flash Animation element lets you use a Flash animation included in your File Gallery.
    - Select your Flash animation (.swf file) amongst the elements in your file gallery by clicking on the browse […] button.
    - Define the dimensions of your animation, height and width in pixels.
    - Save your settings

    Your Flash animation is automatically displayed in your WebBlock.
 HTML Code or Script Element

This type of element lets you directly enter lines of HTML code or JavaScript into your WebBlocks.

You can use this if you are skilled in one of these languages or if you want to insert code furnished by one of your partners.

You can also copy and paste code from an editor like Dreamweaver or FrontPage. Be careful however, as some tags must only be used once on a page. Please do not insert here <body>, <head> or <html> tags. . Limit yourself to copying the code found between the <body> and </body> tags of your editor.
 Additional Help

Several other element types available for WebBlocks are described in the following online help topics:

Add to favorites: http://www.oxatis.co.uk/Help/HelpCenterContent.asp?ActionID=512&TID=55233&MID=5000%7C12000%7C55799&LangID=1
© 2001-2018 Oxatis. All rights reserved.