WebSite X5 permite proceder a la creación de cada página de un sitio web mediante una Rejilla de paginación que subdivide el espacio disponible en celdas. El número de celdas disponibles depende del número de filas y columnas insertadas y, para cada celda, es posible insertar un contenido distinto (mediante el simple Drag & Drop de los objetos disponibles).
La celda equivale por tanto a un espacio determinado de la página: tiene un contenido propio y puede tener un aspecto gráfico totalmente particular. Así pues, modificando los márgenes, bordes y fondo de la celda es posible crear recuadros dentro de la Página mediante los cuales organizar los contenidos y resaltar adecuadamente aquellos que se desea poner en primer plano.
Para definir el aspecto gráfico de una celda basta seleccionarla y pulsar sobre el botón 
para abrir la ventana Estilo de celdas, cuyas opciones están organizadas en las siguientes secciones: Estilo, Textos y Biblioteca.
Mediante los comandos de esta sección se definen los ajustes gráficos de la celda activa de la Rejilla de paginación.
Primeramente es necesario definir el tipo de Fondo del sitio que se quiere que tenga la celda, eligendo entre:
|
Fondo coloreado: el fondo de la celda es coloreado con un único color.
|
|
Fondo degradado: el fondo de la celda es llenado con una gradación de la que se pueden definir los colores inicial y final y la dirección del difuminado.
|
|
Fondo con imagen: el fondo de la celda es creado mediante la importación de una imagen.
|
|
Ajustar imagen a la Celda: el fondo de la Celda es creado mediante la importación de una imagen que es cortada en bloques y recompuesta para que se pueda adaptar perfectamente al tamaño de la celda misma. (ver "Cómo trabajar el aspecto de la celda")
|
Dependiendo del tipo de fondo, es posible modificar diferentes opciones del recuadro Ajustes.
|
Fondo coloreado
|
Fondo degradado
|
Fondo con imagen
|
Ajustar imagen a la Celda
|
| ▪ | Color: especifica el color para usar como relleno del fondo. |
|
P
|
-
|
P
|
P
|
| ▪ | Color inicial / Color final: definen los colores inicial y final que se utilizarán para hacer un degradado. |
|
-
|
P
|
-
|
-
|
| ▪ | Difusión: permite establecer si en el degradado debe predominar el color inicial o el color final , definiendo el espacio (en píxeles) en el que se debe producir la transición del primero al segundo. Por ejemplo, en un degradado vertical en que se pasa del gris al blanco con una difusión de 250, la gradación es efectuada en los primeros 250 px y después el fondo quedará uniformemente blanco. |
|
-
|
P
|
-
|
-
|
| ▪ | Dirección: establece el tipo de difuminado que se aplicará, eligiendo entre desde arriba, desde abajo, desde la izquierda y desde la derecha.. |
|
-
|
P
|
-
|
-
|
| ▪ | Archivo imagen: selecciona el archivo gráfico (.JPG, .GIF, .PNG.) de la imagen que se utilizará como fondo. |
|
-
|
-
|
P
|
P
|
| ▪ | Repetir: especifica si la imagen añadida como fondo debe repetirse o no. La imagen se puede repetir solo en sentido horizontal, solo en sentido vertical o en ambos sentidos, de modo que ocupe todo el espacio disponible. Además es posible hacer que la imagen se adapte, es decir, que se redimensione de modo que cubra todo el fondo. |
|
-
|
-
|
P
|
-
|
| ▪ | Alineación: permite especificar la alineación de la imagen utilizada como fondo en relación al área ocupada por la celda. |
|
-
|
-
|
P
|
-
|
| ▪ | Saturación del color: especifica el color hacia el que debe tender la imagen introducida como fondo de la celda. Básicamente se aplica un efecto "coloreado" a la imagen para cambiarlo por el color deseado. |
|
-
|
-
|
P
|
-
|
| ▪ | Bloquear ancho / Bloquear altura: permiten configurar el tamaño de los bloques en los que se corta la imagen de fondo para determinar qué partes de la imagen se deben mantener inalteradas y cuáles deben ser repetidas. (ver "Cómo trabajar el aspecto de la celda") |
|
-
|
-
|
-
|
P
|
| ▪ | Opacidad: configura el grado de opacidad del color/del difuminado/de la imagen de fondo aplicado. Para valores que tienden a 0, disminuye la opacidad y el fondo de la Celda se vuelve más transparente, dejando ver el fondo de la Página. |
|
P
|
P
|
P
|
P
|
Mediante las opciones del recuadro Borde es posible definir:
| ▪ | Grosor: especifica el grosor de los bordes, también individualmente. |
| ▪ | Color: especifica el color de los bordes, también individualmente. |
| ▪ | Esquinas redondeadas: define el factor de redondeo de las esquinas, también individualmente. |
| ▪ | Sombra: aplica una sombra, definiendo su color, la posición, la difusión y el tamaño. |
Por último, mediante las opciones del recuadro Alineación y márgenes es posible definir:
| ▪ | Alineación: alinea arriba/al centro/abajo y a la izquierda/al centro/a la derecha el objeto contenido respecto a la celda activa. |
| ▪ | Margen exterior / Margen interior: definen el valor en píxeles para los márgenes externos e internos de la celda activa (ver "El Box Model en WebSite X5"). |
|
Mediante los comandos de esta sección se introducen y se define el aspecto gráfico de los elementos de texto que completan el estilo de la celda activa de la Rejilla de paginación.
En primer lugar hay que definir el elemento, texto o imagen, que se desea insertar y sobre el que se desea trabajar. Es posible elegir entre los siguientes elementos:
|
Título: es el texto que se muestra como título de la celda activa.
|
|
Imagen del encabezado: es una imagen que puede ser insertada en la cabecera de la celda activa, eventualmente junto al Título.
|
|
Texto descriptivo: es el texto que se muestra como pie de la celda activa.
|
Una vez insertados, los distintos elementos pueden ser seleccionados mediante el menú desplegable al efecto o haciendo clic directamente en la imagen de vista previa.
Dependiendo del tipo de elemento seleccionado, es posible modificar diferentes opciones del recuadro Ajustes.
Para los elementos Título y para el Texto descriptivo, las opciones disponibles son:
| ▪ | Contenido: campo para escribir el título o el texto descriptivo de la celda. |
| ▪ | Color / Color Texto: definen el color del fondo del texto y del texto con el que se está trabajando. |
| ▪ | Fuente: define el tipo de carácter, el estilo y el tamaño del texto. |
| ▪ | Alineación: alinea el texto a la izquierda, al centro o a la derecha respecto de la celda. |
| ▪ | Margen exterior / Margen interior: permiten ajustar el valor en píxeles de los márgenes del texto, para poderlo situar con precisión decidiendo a qué distancia colocarlo de los bordes de la celda. |
Para el elemento Imagen del encabezado, en cambio, las opciones disponibles son:
| ▪ | Archivo imagen: selecciona el archivo gráfico (.JPG, .GIF, .PNG.) de la imagen que se utilizará como fondo. |
| ▪ | Alineación: alinea la imagen insertada a la izquierda, al centro o a la derecha respecto de la celda. |
| ▪ | Margen: permiten definir el valor en píxeles para los márgenes de la imagen insertada, para poderla colocar con precisión respecto a los bordes de la celda y, del mismo modo, respecto al Título que se muestre. |
|
En esta sección es posible elegir un set de ajustes, guardados como Estilo, y aplicarlos a la celda activa; o viceversa, se guardan los ajustes definidos para la Celda activa en un nuevo Estilo que se podrá retomar más tarde para aplicarlo a otras celdas.
La Librería presenta una lista de todos los estilos Valores preestablecidos y Personalizada ya creados. Además, están disponibles los siguientes comandos:
| ▪ | Aplicar: permite aplicar a la celda activa todos los ajustes configurados para el estilo seleccionado. |
| ▪ | Agregar: guarda todos los ajustes gráficos definidos en las secciones Estilo y Textos para la celda activa en un Estilo y lo añade a la lista de estilos Personalizada. |
| ▪ | Eliminar: borra el estilo seleccionado de los existentes en la lista de estilos Personalizada. No es posible quitar los estilos Valores preestablecidos. |
| ▪ | Importar...: importa un nuevo Estilo creado con WebSite X5 y exportado con la función al efecto. |
| ▪ | Exportar...: exporta el Estilo seleccionado a la carpeta especificada. El Estilo exportado podrá ser compartido e importado en otros equipos. |
|
En la composición de un Estilo se mantienen todos los ajustes gráficos definidos para la celda, pero no los contenidos, que podrían tener que ser cambiados de una celda a otra. De esta manera, por ejemplo en el estilo se guarda el Color Texto o la Fuente pero no el Contenido especificado para elementos como el Título y el Texto descriptivo asociado a una celda.
|
|
Best practice:
Profundización:
