Para definir el aspecto gráfico de un sitio web, WebSite X5 da la posibilidad de utilizar una Plantilla Predefinida o una Nueva Plantilla. Independientemente de la elección que se haga, es posible utilizar las opciones que pone a disposición la ventana Estructura de la Plantilla para personalizar completamente la Plantilla Predefinida/Personal elegida, o en el caso de una Nueva Plantilla, para proceder a crearla desde cero. No solo es posible definir la estructura de la Plantilla gráfica para la vista de Escritorio, sino que, en caso de estar realizando un Sitio web adaptable, es posible definir también cómo la Plantilla debe presentarse en las vistas correspondientes a los diferentes puntos de interrupción definidos.
|
El Encabezado y el Pie de página de la plantilla realizada pueden completarse con la inserción de contenidos como: textos, imágenes, animaciones, galerías, campos de búsqueda y enlaces: las opciones necesarias se ofrecen en la ventana Contenido de la Plantilla a la que se accede pulsando el botón Siguiente.
|
Para facilitar el trabajo, la ventana Estructura de la Plantilla ofrece una Vista previa en la que se muestra una representación esquemática de la página.
Además de esto, en el caso de estar trabajando en la creación de un Sitio web adaptable, la ventana presenta también una Barra de Adaptabilidad que reproduce la ya ofrecida en la ventana Resoluciones y Diseño Adaptable.
La Barra de Adaptabilidad reproduce todos los puntos de interrupción definidos y, en función de estos, identifica Intervalos: basta con pulsar sobre un Intervalo para seleccionarlo y proceder a la definición de la Plantilla para la Vista correspondiente.
Una vez seleccionada la Vista en la que se quiere trabajar, también es posible elegir la parte de la página que se quiere modificar, utilizando la lista al efecto o pulsando directamente sobre las diferentes áreas de la estructura en la Vista Previa de la Página.
Se aconseja pues proceder ordenadamente, definiendo primero la Plantilla para la Vista Escritorio y después, en descenso, cómo la Plantilla debe cambiar en todos los demás casos, hasta llegar a la vista Dispositivo Móvil.
En primer lugar, para proceder a la creación de una plantilla personalizada es necesario especificar el Tipo de Estructura, es decir si es necesario contar solo con un Encabezado y un Pie de Página o también una Barra lateral. Las distintas posibilidades son:
|
Encabezado y Pie de Página
|
|
Encabezado, Pie de Página y Barra lateral a la izquierda
|
|
Encabezado, Pie de Página y Barra lateral a la derecha
|
|
Una vez elegido el tipo de Estructura, es preciso seleccionar la Sección de página sobre la que se quiere trabajar. Las secciones en que está dividida la página son:
|
Fondo de la página: es el área externa a la página que se muestra cuando la ventana del explorador es abierta con un tamaño superior al de la resolución del sitio web.
|
|
Fondo del encabezado: es la parte del Fondo de la página que está detrás del Encabezamiento.
|
|
Encabezamiento: también llamado "header", consiste en una sección, principalmente gráfica, ideal para contener elementos como el título y subtítulo del sitio web, el logotipo de la empresa, campos de búsqueda, Menú de navegación principal y menús de servicio con los enlaces, por ejemplo, para la visualización del mapa o para la elección del idioma de consulta.
|
|
Contenido de la página: es el área destinada a alojar el verdadero contenido de las páginas y, en su caso, los Menús y submenús de navegación.
|
|
Pie de página: también llamado "footer", es otra sección principalmente gráfica que tiene la finalidad de cerrar visualmente la página. Por lo general, en esta área están colocados elementos como notas, disclaimer, copyright, número de identificación fiscal o direcciones de correo electrónico.
|
|
Fondo del pie de página: es la parte del Fondo de la página que está detrás del Pie de página.
|
|
Barra lateral: disponible solo si se ha seleccionado un tipo de estructura que la contempla, es una columna, situada a la derecha o a la izquierda de los contenidos de la Página, que puede usarse para crear un Menú de navegación vertical.
|
|
Si se ajusta el Fondo del encabezado o el Fondo del pie de página como Transparente, estos son tratados como parte integrante del Fondo de la página y asumen su mismo aspecto. En caso contrario, se dispondrá de bandas para el Encabezamiento y/o el Pie de página que ocupan todo el ancho de la ventana del explorador.
|
|
Para todas las secciones de la página es posible configurar las siguientes Propiedades gráficas:
| ▪ | Color: especifica el color para usar como relleno del fondo. |
| ▪ | Archivo imagen: selecciona el archivo gráfico (.JPG, .GIF, .PNG.) de la imagen que se utilizará como fondo. La imagen puede buscarse en la Librería online a la que se accede mediante el botón  o en las carpetas locales por medio del botón  Seleccionar archivo. |
| ▪ | Disposición: especifica si la imagen añadida como fondo debe repetirse o no. La imagen puede repetirse solo en sentido horizontal, solo en el vertical o en ambos sentidos, hasta llegar a llenar el espacio disponible. Además, solo para la sección Fondo de la página, es posible hacer que la imagen se adapte o cambie su tamaño para cubrir todo el fondo. En este caso, podrían no respetarse las proporciones originales. |
| ▪ | Alineación: permite especificar cómo se debe alinear la imagen insertada respecto al área de la página seleccionada. |
Solo para el área Fondo de la página está disponible la opción:
| ▪ | Imagen de fondo fija: activando esta opción, la imagen insertada como fondo de la página se mantiene fija también cuando el contenido de la página se desplaza mediante la barra de scroll. |
|
Para algunas áreas de la página es posible especificar también el Tamaño.
En función de la sección de Página seleccionada, pueden ofrecerse las siguientes opciones:
| ▪ | Ancho: permite definir o indica el valor expresado en píxeles de la anchura del área de la página seleccionada. En el caso concreto del Contenido de la página no es posible definir manualmente este valor: se retoma automáticamente el definido en la ventana Resoluciones y Diseño Adaptable mediante la opción Resolución del Sitio web, en el caso de un Sitio web Escritorio, o como Vista Escritorio en el caso de un Sitio web adaptable. |
| ▪ | Altura: permite definir o indica el valor expresado en píxeles de la altura del área de la página seleccionada. |
| ▪ | Altura mínima: disponible solo para el área Contenido de la página, especifica indica el valor en píxeles de la altura mínima que debe tener el área de la página destinada a los contenidos, con independencia de la altura de los contenidos efectivamente introducidos. |
| ▪ | Extender hasta el ancho de la ventana del Explorador: disponible solo para las secciones Encabezamiento y Pie de página, hace que el aspecto definido no se aplique solo al ancho del contenido de la Página, sino que este se extienda a todo el ancho de la ventana del Navegador. |
|
Gracias a las opciones disponibles, prácticamente no hay ninguna obligación a la hora de definir el tamaño y la posición del Menú Horizontal insertado en el Encabezado, siendo así posible obtener resultados inéditos.
|
|
Por último, también solamente para algunas áreas de la página es posible configurar las Propiedades de los contenidos.
Para las secciones Fondo de la página y Contenido de la página está disponible la opción:
| ▪ | Márgenes: especifica el valor en píxeles que se quiere establecer para los márgenes. El margen es el espacio vacío existente entre el borde de la sección y su contenido. |
Solo para la sección Fondo de la página está disponible también la opción:
| ▪ | Alineación: especifica cómo debe ser alineada la página respecto a la ventana del explorador. |
Solo para la sección Barra lateral, por contra, está disponible la opción:
| ▪ | Tras el desplazamiento de la página, mantener los objetos siempre visibles: hace que durante el desplazamiento de la página todos los contenidos añadidos a la Barra lateral (mediante la ventana Contenido de la Plantilla) se desplacen de forma que permanezcan siempre en primer plano. |
|
Best practice:
