Comenzando con la rejilla propuesta por defecto, conformada por 2 filas y 2 columnas, se procede a añadir un número de filas y de columnas suficiente para alojar todos los contenidos de la página y, en segundo lugar, añadir en las celdas los objetos necesarios.

Para añadir filas y columnas basta usar los botones que hay en la barra de herramientas. Se pueden crear rejillas con un máximo de 64 filas y 12 columnas.

Automáticamente, todas las filas y las columnas de la rejilla de maquetación tienen la misma anchura y altura.

Por defecto, el ancho de las columnas de la Rejilla se obtiene dividiendo el ancho de la Página (determinado por la Plantilla) entre el número de las columnas añadidas. Es también posible configurar manualmente el valor del ancho de las columnas mediante los cursores presentes en la parte inferior de la rejilla de maquetación:

En cambio, por lo que respecta a la altura de las Filas, esta está determinada por los Objetos en ellas añadidos, y no puede modificarse manualmente.

Es posible trabajar en el aspecto gráfico de las Filas mediante los ajustes reunidos en la ventana Estilo de las Filas que se abre por medio del botón . Mediante las opciones disponibles en esta ventana es también posible hacer que las Filas asuman el mismo ancho y/o el mismo alto que la viewport, es decir que la ventana del Navegador del visitante del Sitio web.

Una vez configurada la rejilla de maquetación, es posibel añadir un Objeto seleccionando el icono que lo representa de la lista de objetos disponibles, arrastrándolo y soltándolo en la celda que se quiere que ocupe.

Cada celda de la rejilla de maquetación puede contener un único objeto, pero un objeto puede ocupar varias Celdas adyacentes, tanto en sentido horizontal como vertical. El icono del objeto seleccionado, de hecho, puede ser arrastrado sobre los bordes de las celdas: en ese caso, el objeto ocupará el espacio de esas celdas. Además, es posible usar los anclajes de la selección del objeto añadido para extenderlo a más celdas.

Una vez definido el número de celdas que debe ocupar un objeto, este se mantendrá, en compatibilidad con la presencia de otros objetos, incluso si el objeto es desplazado a otros puntos de la rejilla. Para mayor comodidad, es posible trabajar en la rejilla utilizando las teclas de cursor:

Haciendo clic en el botón derecho del ratón sobre el icono del objeto añadido en una celda, se abre un menú contextual con las herramientas que permiten gestionar ese Objeto: Cortar, Copiar, Pegar, Eliminar, Estilo del Objeto, Efecto.

A través de estos comandos es posible, por ejemplo, crear una copia de un objeto pegándolo en otra celda, en otra página, o eliminarlo. Un objeto añadido puede ser eliminado de la página también arrastrándolo fuera de la rejilla de maquetación o mediante la tecla SUPR. En cualquier caso, añadiendo un objeto nuevo a una celda ya ocupada, el objeto ya existente se borra y es sustituido por el segundo. Ahora bien, si se arrastra un objeto ya existente a una celda ya ocupada, los dos objetos son intercambiados de posición.

Los comandos Estilo del Objeto | Copiar y Estilo del Objeto | Pegar, presentes en el submenú que se abre con el comando Estilo del Objeto, permiten hacer que los ajustes definidos en la ventana Estilo del Objeto para  el Objeto contenido en una celda se apliquen automáticamente también al Objeto contenido en una segunda celda.

Del mismo modo, los comandos Efecto | Copiar y Efecto | Pegar permiten aplicar a un segundo Objeto el mismo efecto aplicado al primer Objeto.

Por último, los comandos Estilo del Objeto | Editar... y Efecto | Editar... permiten, respectivamente, abrir la ventana Estilo del Objeto y la ventana Efecto de visualización.

Después de haber añadido un objeto se puede abrir la ventana en la que se podrá definir su contenido haciendo doble clic sobre el Objeto mismo o seleccionando el objeto y pulsando el botón Contenido Objeto.

La constitución de la Página puede ser modificada y actualizada en cualquier momento.

Si se ha activado la creación de un Sitio Web Adaptable (mediante la opción Habilitar Sitio Adaptable disponible en la ventana Resoluciones y Diseño Adaptable), en el momento en que se hacen cambios en los contenidos de una Página es preciso considerar cómo esta se debe comportar en las diferentes Vistas determinadas por los puntos de interrupción activados.

Para comprender mejor cómo aprovechar al máximo las posibilidades de maquetación, es preciso recordar que el funcionamiento del programa se atiene a las siguientes reglas:

-

El Box Model en WebSite X5