WebBlock editing is based on nested tables in which you create lines and columns. |
| Manipulating Lines and Columns|
A WebBlock contains at least one table with ONE line and ONE column. This is the case when you start with a blank WebBlock. To add lines or columns, click on the icons in the table borders.
Several tools are available for working with lines and columns:
- Adds a line or column to the table.
- Deletes a line or column from the table..
- Moves a line up.
- Moves a line down.
- Moves the column to the right.
- Moves the column to the left.
- Creates a copy of the line (with its content) on a new line beneath the copied one.
| The Notion of Cells|
The intersection of each line and column is a cell.
Each cell in a table has a two columned context menu for accessing various functions. By default, this menu displays just outside the top righthand corner of the cell, but it can also be accessed by right-clicking inside the cell.
The properties defining each cell can be edited from the Cell Properties menu. You can access this by clicking on "Cell Properties" in the first column of the cell's context menu. The following settings are available in Cell Properties:
- Background Color and Background Image: Define a colour or an image for the cell's background.
- Horizontal/Vertical Alignment: How contained elements will be positioned in the cell.
- Width: This can be defined either as a percentage or in pixels. The value will apply to the entire column unless:
- Another cell in the column is set to a greater width.
- If an element contained in one of the column cells is wider than the column settings. In which case, the column will be "enlarged" by that element.
- Height : This can be defined either as a percentage or in pixels. The value will apply to the entire line unless:
- Another cell in the line is set to a greater height.
- If an element contained in one of the cells on the line is taller than the line settings. In which case, the line will be "heightened" by that element.
- Spread to the Right (in cells): Lets you merge a cell with the one from the next column (or columns) to the right.
- Spread Downward (in cells): Lets you merge a cell with the one from the next line (or lines) below.
| The Notion of Elements|
You can add one or more elements to each cell.
An element can be a text, an image, a video… You'll find more information about elements in the help topic: WebBlocks, Elements
Several elements can be added to the same cell. These elements will display one next to the other until their total width is greater than the cell's defined width. The elements will then display underneath the first and so on.
Most of the time, you will probably only use one cell per element to have better control over its position. And yet, sometimes several elements per cell can be useful, like for example, if you wanted to change font styles, or apply a navigation behaviour to only certain words in a sentence, while using text type elements.
| Copying Cells and Elements |
Cell context menus offer the standard cut / copy / paste editing options allowing you to duplicate or move the contents of one cell to another. The Paste Cell function lets you retrieve not only the content but the copied cell's properties as well. A Paste Elements function is also available that lets you paste only the contents (elements) without affecting cell format.
It should be noted that these copy / paste functions can also apply to cells containing tables (see the following chapter) letting you easily retrieve a layout previously created in one of them.
| Nesting Tables|
You may insert "table" type elements into a cell. You can therefore create numerous nested tables.
This possibility can be very handy for presenting products for example, and particularly for creating a Home Page WebBlock.
| Table Properties|
Each table element has its own proprties that you can edit by clicking on the icon in the table's upper left hand corner You can define the following properties for each table::|
- Border Width : Define the thickness of an HTML border. Remember that you can't customise borders created this way.
- Table Alignment: How the table will be positioned in the page.
- Table Width:: This can be defined either as a percentage or in pixels. If the total column widths is greater than the defined table width, the table will be "enlarged" to adapt to its contents.
- Cell Spacing: Defines the gap or outer margin (in pixels) between cells.
- Padding: Defines the inner margins (in pixels) separating a cell's content from it's border.
- Background Music : (only offered for the main table) Lets you play a midi file (.mid) when the page is loaded. However, we advise against using this somewhat outdated feature.
- Background Color / Background Image: Define a colour or an image to be applied to the table background. Remember that this colour or image will be hidden by any table cells using a background colour or image.
- Advanced Properties:
Here you can create an ID or associate a specific class to each table in your WebBlock allowing you to apply specific CSS rules. These rules can be:
For more information about CSS, classes and IDs, we suggest you read the following help topic: CSS Site Designs
With this functionality you can, for example, create custom borders for WebBlock tables.