Best Practices > Step 4 - Pages > How to create a page using the page layout table

WebSite X5 uses a unique page layout method where you see exactly what the page will look like as you work on it.

The page is shown as a table where you can specify the number of rows and columns to make the cells which will contain the various contents.

You can easily drag and drop the content Objects into the cells.

The default table is 2 rows x 2 columns, and you can add more rows and columns so that you have enough cells for all your contents, and then you proceed to add the necessary content Objects to the cells.

Use the buttons in the tool bar to add rows and columns. The table can have a maximum of 64 rows and 12 columns.

All the rows and columns in the page layout table automatically have the same width and height.

By default, the page layout table's column width is obtained by dividing the width of the page (determined by the template) by the number of columns it has. You can change the width of the columns manually using the cursors at the bottom of the table:

▪	Click on and drag a cursor to move the column line. It is moved by a tenth of the available space. For greater precision, hold down the CTRL key to move the line one pixel at a time.

▪	Right-click on a cursor and choose Set Column Width from the menu, and then type in the width of the column in pixels.

▪	Right-click on a cursor and select Reset Column Width to restore all the columns to the same width.

The row height depends on the height of the objects inserted in the row, and this value cannot be modified manually.

You can modify the graphics of the rows by changing the settings in the Row Formats window, which opens when you click on the button. Using the options available in this window, you can also make the Lines take up the same width and/or height as the viewport, or the Site visitor's Browser window.

Once you have defined the size of the page layout table, you can enter the page contents by adding Objects to the cells. To add an object, select the icon that represents it and drag and drop it into the appropriate cell.

A cell can contain only one object, but an object can occupy several adjacent cells. If you drop an object icon onto the border of a cell, the object will occupy the cells sharing that border. You can also pull on the object's handles to pull it into adjacent cells.

You can move objects around the page layout table, even when they occupy more than one cell, providing there is enough space for them in the position you want to move them to. You can use the arrow keys for moving objects:

▪	arrow keys: they move the selected object from one cell to another in the table.

▪	CTRL + arrow keys: this combination moves the selected object to a different place in the table, maintaining its size.

▪	SHIFT + arrow keys: this combination moves the selected object to a different place in the table but it changes its size, making it bigger (compatibly with other objects) or making it smaller to occupy fewer cells.

You can right-click on an object's icon in a cell to open a menu with the commands for managing this object: Cut, Copy, Paste, Remove, Object Style, Effect.

Use these commands, for example, to make a copy of an object and paste it into a different cell or page, or delete it. You can also remove an object by dragging it outside the page layout table, or by pressing the DEL key. Remember that an object will be removed if you add a new object to the cell it is in, and the second object will take its place. However, if you drag an object from one cell to an occupied cell, the two objects will simply change places.

The Object Style | Copy and Object Style | Paste commands in the submenu of the Object Style command are used to apply the settings defined in the Object Style window for the object in one cell to the object in another cell.

Likewise, the Effect | Copy and Effect | Paste commands let you apply the effect that has been given to the first object to the second one.

Finally, the Object Style | Edit... and Effect | Edit... commands respectively open the Object Style and Reveal effect windows.

When you have added an object to a cell, you can open the window in which to define its actual content, double-clicking on the object in the table where you have inserted it or selecting the object and clicking on the Object Content button.

You don't have to populate all the cells in the table. Remember, though, that:

▪	an empty cell will correspond to an empty space in the page;

▪	you cannot define the graphics of an empty row;

▪	empty cells and rows reduce the possibilities of putting objects in a specific order when working on a responsive website.

The page layout can be changed and updated at any time.

If you are creating a responsive website (because you selected the Responsive Site option in the Resolutions and Responsive Design window), when you make changes to the contents of a page, you must consider how the page will behave in the various viewports between the active breakpoints.

To make the best use of the page layout possibilities, remember that the software follows these rules:

▪	The page width is determined by the template.

▪	The width of the columns in the table is equal to the page width divided by the number of columns. By default, all the columns have the same width, but you can change the width of each one manually.

▪	All the cells in a row have the same height: by default, the height is that of the biggest object among those in the cells in a row.

▪	Inserted objects are automatically resized according to the size of the cells in the table.

Further information:

-	The Box Model in WebSite X5