Paso 3 - Creación de la página

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.

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

Contenido Objeto

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 de celdas

Abre la ventana Estilo de celdas para definir el aspecto gráfico de la celda seleccionada de la rejilla de maquetación.

Asignar un delimitador al Objeto

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.

Añadir fila/Añadir columna

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 fila/Eliminar columna

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

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 activado antes la opción Habilitar Sitio Adaptable disponible en la ventana Ajustes generales | 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 están organizados en categorías y su visualización puede gestionarse mediante los siguientes comandos:

Lista de categorías

Presenta la lista de las categorías en las que están organizados los objetos. Es posible elegir ver solo los Objetos principales, aquellos de determinadas categorías temáticas o los Objetos de Todas la categorías.

Mostrar la Administración de Objetos

Abre la ventana Administración de Objetos mediante la que es posible gestionar los Objetos que se muestran dentro de las categorías temáticas.

Los Objetos Principales son aquellos habitualmente más utilizados en la conformación de una página web y vienen instalados con el programa. La lista de Objetos Principales incluye:

Los objetos disponibles son:

Objeto de texto	Objeto Imagen	Objeto Tabla	Objeto de galería
Objeto Vídeo/Sonido	Objeto Formulario de envío e-mail	Objeto Libro de Visitas	Objeto Mapa
Objeto de Animación Flash	Objeto Catálogo de Productos	Objeto Contenido Dinámico	Obejto Código HTML

Además de los Objetos Principales, está disponible también una serie de Objetos opcionales que pueden ser instalados y utilizados para añadir deterinados contenidos en las páginas. Los Objetos opcionales pueden gestionarse mediante la ventana Administración de Objetos.

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

Nota sobre la conversión: el Objeto Red Social

En las versiones 10 y 11 de WebSite X5 entre los Objetos Principales estaba también el Objeto Red Social, que ofrecía la posibilidad de servirse de los plug-ins puestos a disposición por algunos de las redes sociales más famosas (Facebook, Google+, Twitter, Pinterest) para poder compartir contenidos publicados en los sitios web.

En la versión actual, 12, este Objeto ya no está disponible en la lista de Objetos Principales y ha sido sustituido por una serie de Objetos Opcionales específicos. Con estos nuevos Objetos Opcionales se tienen mayores posibilidades de personalización, y en consecuencia, la posibilidad de obtener mejores resultados.

Si se abre con la versión 12 un Proyecto realizado con las versiones 10 o 11 en los que se había empleado el Objeto Red Social, este será convertido automáticamente en un Obejto Código HTML que contiene el código necesario para implementar la función original del Objeto sustituido.

Best practice:

-	Cómo configurar una página a través de la rejilla de maquetación
-	Cómo crear y utilizar los Delimitadores