Para definir el aspecto gráfico de un sitio web, WebSite X5 da la posibilidad de utilizar una Plantilla Predefinida, una Plantilla Personal o una Nueva Plantilla. Independientemente de la elección que se haga, es posible utilizar las opciones que pone a disposición la ventana Importación de Plantilla para personalizar completamente la Plantilla Predefinida/Personal elegida, o en el caso de una Nueva Plantilla, para proceder a crearla desde cero.
Para facilitar el trabajo, la ventana Importación de Plantilla ofrece una Vista previa en la que se muestra una representación esquemática de la página. Es posible elegir la sección a modificar de la lista, o se puede también hacer clic directamente en las distintas áreas de la estructura en la vista previa de la página para poderlas seleccionar, modificar su aspecto con los comandos disponibles y ver enseguida el resultado de las acciones realizadas.
En primer lugar, para proceder a la creación de una plantilla personalizada es necesario especificar el Tipo de menú, es decir dónde y cómo debe estar situado el menú de navegación dentro de todas las páginas del sitio web. Las distintas posibilidades son:
|
Horizontal – Menú sobre el encabezamiento
|
|
Horizontal – Menú debajo del encabezamiento
|
|
Horizontal – Menú debajo del encabezamiento
|
|
Vertical - Menú a la izquierda
|
|
Vertical - Menú a la derecha
|
|
Una vez elegido el tipo de Menú, 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ús de servicio con los enlaces, por ejemplo, para la visualización del mapa o para la elección del idioma de consulta.
|
|
Menú: es el área destinada a contener la navegación fija, esto es, los elementos del primer nivel del menú que deben estar presentes, inalterados, en cada página del sitio web. Obviamente, la posición de esta área cambia dependiendo del Tipo de menú elegido.
|
|
Contenido de la página: es el área destinada a alojar el verdadero contenido de las páginas y, en su caso, los 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.
|
|
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. En el caso del Encabezamiento o del Pie de página es posible predisponer también una animación Flash (.SWF). |
| ▪ | Repetir: 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.
Para las áreas Encabezamiento, Menú y Horizontal – Menú debajo del encabezamiento está disponible la opción:
| ▪ | Ancho: indica el valor expresado en píxeles de la anchura del área de la página seleccionada. Para el tipo de Menú vertical, el valor del Ancho está establecido por defecto en 960 píxeles para la sección Encabezamiento y en 120 píxeles para la sección Menú pero, en cualquier caso, se puede modificar libremente. Para los tipos de Menú horizontales situados sobre o bajo el encabezado, en cambio, el valor del Ancho definido para el Encabezamiento se toma automáticamente también para el Menú, el Contenido de la página y el Pie de página. |
|
El valor del Ancho predeterminado por defecto está calculado para obtener un sitio web optimizado para una visualización a 1024x768 píxeles.
|
Para todas las áreas, a excepción del Fondo de la página y del Contenido de la página, está disponible la opción:
| ▪ | Altura: indica el valor expresado en píxeles de la altura del área de la página seleccionada. |
Solo para el área Contenido de la página está disponible la opción:
| ▪ | Altura mínima: 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. |
Por último, en caso de que se haya elegido para el Tipo de menú la opción Horizontal – Menú debajo del encabezamiento, solo para la sección Menú están disponibles las opciones:
| ▪ | Distancia X: define cuántos píxeles se debe desplazar hacia la derecha o izquierda el Menú respecto al encabezado. |
| ▪ | Distancia Y: define cuántos píxeles se debe desplazar hacia arriba o abajo el Menú respecto al encabezado. |
|
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, Menú 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 las secciones Fondo de la página y Menú está disponible también la opción:
| ▪ | Alineación: para el Fondo de la página, especifica cómo debe ser alineada la página respecto a la ventana del explorador, para el Menú, en cambio, especifica cómo deben ser alineados los botones de los que consta respecto a la página. |
|
|
El ancho efectivo de las páginas del sitio web viene dado por el ancho de la sección Contenido de la página (dependiente del ancho del área Encabezamiento) menos el margen izquierdo y el margen derecho.
|
|
El encabezado de la plantilla realizada puede completarse con la inserción de textos, imágenes, animaciones Flash, presentaciones, campos de búsqueda y enlaces: las opciones necesarias se ofrecen en la ventana Personalización de la Plantilla a la que se accede pulsando el botón Siguiente.
|
Best practice:
