Step 4 - Pages

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.

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.

Each Object is represented on the page layout table by a specific icon. As far as the more graphical Objects are concerned (for instance the Image or the Gallery Object), after having defined the content, a small preview image will be displayed next to the icon, so to help you better identify the content you are looking for.

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:

▪	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.

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

	Content 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.).
	Style This command opens the Object Style window where you can define the appearance of the object selected in the page layout table.
	Margins 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.
	Extend 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.
	Effect 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. It can be set on an Object or a Row and it is used to create direct links to a specific section of the Page.

	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.
	Responsive 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.

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:

More Objects

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.

-	How to set up the page layout table
-	How to add contents to the page layout table
-	How to set a link on anchors