Paso 4 - Páginas

Después de haber construido el Mapa del proyecto, se puede proceder a la creación de cada una de las páginas incluidas en el sitio web. La ventana Creación de la página permite definir la estructura de la página y efectuar la inserción de los contenidos.

La ruta de acceso y el título de la página en la que se está trabajando se indica como Página actual.

Para hacer más intuitiva la maquetación de los contenidos, WebSite X5 ofrece una rejilla que, por defecto, consta de 2 filas y 2 columnas: basta arrastrar los objetos disponibles dentro de las celdas de la rejilla (un objeto por celda) para conformar la página.

Naturalmente, es posible añadir filas y columnas para disponer de un número mayor de celdas y, además, es posible definir manualmente la anchura de cada columna. Como veremos, gracias a estas posibilidades de diseño de la Rejilla y al hecho de poder disponer un Objeto también en varias celdas adyacentes, es incluso posible obtener diseños de página muy refinados.

Una aclaración importante: el uso de la Rejilla sirve únicamente al fin de simplificar y guiar la maquetación de los contenidos. Con la excepción de unos pocos casos muy concretos, representados por combinaciones de maquetados muy complejos, la rejilla de maquetación no se "traduce" como tabla en el código HTML de las páginas. En cualquier caso, la rejilla de maquetación no se verá nunca durante la navegación con el explorador de internet.

Como ya se ha dicho, cada celda de la rejilla puede contener un único Objeto pero cada Objeto puede ser dispuesto también en varias celdas adyacentes horizontal o verticalmente, de modo que ocupe un espacio mayor de la Página.

El aspecto de las celdas de la rejilla de maquetación cambia en función de los distintos estados que puede asumir:

▪	si contiene un Objeto que aún no ha sido construido, presenta el icono correspondiente al tipo de Objeto sobre un fondo de líneas grises oblicuas;

▪	si contiene un Objeto que ya ha sido construido, presenta el icono correspondiente al tipo de Objeto sobre un fondo azul degradado.

▪	si contiene el Objeto seleccionado, se muestran el perímetro y las manillas de selección.

Para mayor comodidad, todas las filas de la Rejilla están numeradas (el número está indicado a la izquierda), mientras que los cursores para modificar el ancho de las columnas están situados en el borde inferior.

Justo encima de la rejilla de maquetación está la barra de herramientas, que ofrece los siguientes comandos:

	Contenido Abre la ventana que da la posibilidad de proceder a la creación del Objeto seleccionado en la rejilla de maquetación. La ventana que se abre es diferente según el tipo de Objeto (Texto, Imagen, etc.).
	Estilo Abre la ventana Estilo del Objeto para definir el aspecto gráfico del Objeto seleccionado en la rejilla de maquetación.
	Márgenes Abre la ventana Márgenes y Alineación: mediante las opciones disponibles es posible tanto establecer el valor en píxeles para los márgenes externos e internos del actual Objeto como alinear vertical y/u horizontalmente el Objeto respecto a la Celda en la que está contenido (ver El Box Model en WebSite X5).
	Extender Hace que el Objeto seleccionado se extienda más allá del ancho de la Página (determinado por la Plantilla) y ocupe todo el espacio disponible en la ventana del Navegador. El botón está siempre activo, pero de hecho funciona solo si el Objeto seleccionado es el único presente en esa fila. En la Rejilla de maquetación, los Objetos para los que se ha activado la función Extender son fácilmente reconocibles porque son más anchos que las columnas que componen la Página. Pulsando una segunda vez en el botón Extender, el Objeto vuelve a su comportamiento normal adaptándose al ancho de la Página y ya no al de la ventana del Navegador.
	Efecto Abre la ventana Efecto de visualización para definir la transición que se quiere asociar al Objeto seleccionado en la Rejilla de maquetación.
	Asignar un delimitador al Objeto seleccionado Crea un delimitador y lo asocia al objeto seleccionado en la rejilla de maquetación. Pulsando en la flecha al lado del botón se muestra un menú con los siguientes comandos: Insertar delimitador..., Editar... y Eliminar.

El delimitador es un punto de referencia que sirve para localizar la posición de un Objeto dentro de la página: se emplea para configurar enlaces directos a ese Objeto.

	Agregar una fila antes de la celda seleccionada/Agregar una columna antes de la celda seleccionada Añaden una nueva fila o una nueva columna a la rejilla de maquetación. Pulsando sobre la flecha al lado de los botones, es posible elegir si la fila o columna debe añadirse antes o después de la celda seleccionada. Se pueden crear rejillas con un máximo de 64 filas y 12 columnas.
	Eliminar la fila seleccionada/Eliminar la columna seleccionada Eliminan la fila o la columna seleccionada de la rejilla de maquetación. Como mínimo, la rejilla de maquetación está compuesta por una única celda (1 fila x 1 columna).
	Estilo de las Filas Abre la ventana Estilo de las Filas para definir el aspecto gráfico de la franja de Página ocupada por los Objetos introducidos en la fila en cuestión de la Rejilla de maquetación.
	Adaptable Abre la ventana Ajustes de Adaptabilidad para especificar el comportamiento de cada Objeto añadido en función de la resolución de la Página.

Para poder trabajar con las opciones de la ventana Ajustes de Adaptabilidad es necesario haber decidido crear un Sitio web Adaptable activando la opción homónima disponible en la ventana Resoluciones y Diseño Adaptable.

Al lado de la rejilla de maquetación se presenta la lista de objetos disponibles. Para añadir un Objeto a una página basta seleccionar en la lista el icono que lo representa, arrastrarlo y soltarlo en la rejilla de maquetación sobre la celda que se desea que ocupe.

Para facilitar la elección, los Objetos pueden filtrarse y gestionarse mediante los siguientes comandos:

Lista de categorías

Ofrece la lista de filtros disponibles para seleccionar, entre todos los Objetos disponibles, aquellos que sirven para un determinado objetivo. Es posible, por ejemplo, ver todos los Contenidos principales de Página o los Contenidos principales de la Plantilla.

Mostrar la Administración de Objetos

Abre la ventana Administración de Objetos mediante la que es posible gestionar la instalación, la desinstalación y la actualización de todos los Objetos que no vienen instalados por defecto con el programa.

Los Objetos comprendidos entre los Contenidos principales de Página y los Contenidos principales de la Plantilla son:

	Objeto Título		Objeto Menú
	Objeto de texto		Objeto Imagen
	Objeto Tabla		Objeto de galería
	Objeto Vídeo/Sonido		Objeto Formulario de Contacto
	Objeto Comentarios y Votos		Objeto Animación HTML5
	Objeto Catálogo de Productos		Objeto Contenido Dinámico
	Obejto Código HTML		Objeto Buscar

Una vez añadido un Objeto a la rejilla de maquetación basta seleccionarlo y pulsar el botón Contenido (o hacer doble clic sobre él) para abrir la ventana que permite su creación efectiva.

Best practice:

-	Cómo configurar una página a través de la rejilla de maquetación
-	Cómo crear y utilizar los Delimitadores
-	Cómo trabajar en el Estilo del Objeto
-	Cómo trabajar en el Estilo de las Filas

Profundización:

-	El Box Model en WebSite X5