Page Creation

Page Creation

Previous pageReturn to chapter overviewNext page
Show/Hide hidden text

Once you have defined your project's Map, you can start creating the various pages that will make up your website. The Page Creation window is where you can create your pages and add their content.

The pathname and page title of the page you are working on are indicated as the Current page.

Click to expand/collapse

Click to expand/collapseReference: The page layout table

WebSite X5 uses a table to make page layout easy. The default table is 2 rows by 2 columns (giving a total of 4 cells): to create your page (add content to it), all you have to do is drag an object from the list of those available and drop it into a cell. Each cell can only contain one object.

If you want, you can add more rows and columns to the default table, so increasing the number of cells available for content. You can also change the width of each column. As we will see, being able to modify the page layout table and insert objects so that they cover more than one cell gives you plenty of scope for complex and professional page layouts.

Note: the page layout table is not visible when your website is published on the Internet. the sole purpose of the table is to help you lay out your page contents to obtain the best effect. The page layout table is not translated as a table in the page's HTML code (apart from very few, specific cases of complex page layout combinations).

As mentioned above, a cell in the page layout table can contain only one object, but an object may cover adjacent cells both horizontally and vertically, so that it takes up more space in the page.

The way in which cells are displayed in the page layout table changes according to their status:

Click to expand/collapse

If the cell contains an object that has not yet been populated, the object's icon is displayed in the cell with a background of gray diagonal lines;
If the cell contains an object that has been populated, the object's icon is displayed in the cell with a blue background;
If the cell contains the selected object, the border and selection handles are displayed.

To make working with the page layout table easier, all the rows in the table are numbered (in the lefthand side) and the column width cursors appear along the lower border.

Click to expand/collapseReference: The toolbar commands

The toolbar is immediately above the page layout table, and it contains the following commands:


This command opens a window where you can create the object that has been selected in the page layout table. The window that is opened depends in the type of object selected (text, image, etc.).


This command opens the Object Style window where you can define the appearance of the object selected in the page layout table.


Opens the Margin and Alignment: window: using the options available, you can set the pixel value for the exterior and interior margins of the current Object, as well as align the Object vertically and horizontally in relation to the Cell in which it is contained (see The Box Model in WebSite X5).


This allows the selected Object to extend to fit the entire width of the Page (determined by the Model) and take up all of the available space in the Browser window.

The button is always active, but it only actually takes effect if the selected object is the only one present in its line. In the Page Layout Grid, the Objects for which the Extend feature has been activated are easily recognizable since they are larger than the columns that make up the page. Clicking on the Extend a second time restores the Object to its normal behavior, meaning it will adapt to the width of the Page rather than that of Browser window.


This command opens the Reveal effect window where you can specify the transition to associate with the object selected in the page layout table.

Set an Anchor to the selected Object

This command creates an anchor and associates it with the object selected in the page layout table. If you click on the arrow next to the button, you will see a menu with these options: Insert Anchor..., Edit... and Remove.

An anchor is a reference that helps identify the position of an object within a page: it is used to set up links directly to the object.

Add a Row before the selected Cell/Add a Column before the selected Cell

You can add a new row or column to the page layout table. Click on the arrow next to the buttons to indicate whether the row/column should be added before or after the selected cell. The maximum size for page layout tables is 64 rows x 12 columns.

Remove the selected Row/Remove the selected Column

These commands remove the selected row/column from the page layout table. The minimum size for page layout tables is 1 row x 1 column (one cell).

Row Formats

This command opens the Row Formats window where you can set the format of the row containing the objects.


This command opens the Responsive settings window where you can specify the behavior of each object on the basis of the page's resolution.

Before you can use the options in the Responsive settings window, you must first choose to create a responsive website, selecting the option to do this in the Resolutions and Responsive Design window.

Click to expand/collapseReference: The list of objects available

The list of objects available is next to the page layout table. To insert an object in a page, select its icon from the list and drag&drop it into the appropriate cell of the page layout table.

To make it easier to choose the most appropriate object, you can filter them and use the following options:

Filter list

This option shows a list of the filters that are available for selecting objects that are used for a particular purpose. You can, for example, show all the Main page contents or the Main Template contents.

Show Objects Management

This opens the Objects Management window where you can install, uninstall and update all the objects that are not included in the initial Program installation.

The objects that are Main page contents and Main Template contents are:

Once you have inserted an object in the page layout table, select it and click on the Content button (or double-click the object) to open the window for actually creating it.


Best practices:


How to create a page using the page layout table


How to create and use anchors


How to work on the Object Style


How to work on the Row Formats

Further information:


The Box Model in WebSite X5