Objeto Tabla

Paso 3 - Creación de la página >

Objeto Tabla

Previous pageReturn to chapter overviewNext page
Mostrar/ocultar el texto oculto

Las tablas son una excelente herramienta para organizar y presentar datos.

En muchos casos mediante una tabla es posible resumir y presentar de manera eficaz una cantidad de datos que, de otro modo, requerirían el desarrollo de un largo y prolijo texto descriptivo. Para simplificar, una tabla con las tarifas de un hotel, clasificadas por tipo de habitación y periodo del año, es mucho más simple de leer e interpretar que un texto que describe por extenso la misma información.

Además, las tablas ofrecen también la ventaja de ser un elemento gráfico capaz de embellecer la página y de romper la monotonía de un texto largo.

Naturalmente, para que estas consideraciones mantengan su validez es necesario que las tablas estén bien estructuradas, no resulten demasiado complejas y tengan un aspecto agradable.

WebSite X5 da la posibilidad de crear tablas a través de un editor muy similar al del Objeto de texto. Por defecto, el editor presenta una tabla predefinida compuesta por 2 filas y 3 columnas, con un ajuste de tamaño que hace que ocupe completamente la anchura de la celda de la Rejilla de maquetación que la contiene. Naturalmente, es posible añadir o eliminar filas y columnas, definir su tamaño y unir o dividir las celdas para crear tablas más o menos complejas.

Además, WebSite X5 da la posibilidad de configurar la visualización de varias tablas mediante pestañas (o tabs): un modo práctico y eficaz para organizar y presentar muchos datos incluso en el espacio relativamente reducido de una página web.

 

Los comandos necesarios para proceder a la creación de un Objeto Tabla están articulados en las siguientes secciones: Contenido y Estilo de las fichas.

Pulsar para expandir/reducirReferencia: Los comandos de la sección Contenido

Esta sección pone a disposición un editor mediante el que es posible proceder a la creación de una tabla. El editor de texto se compone de una Barra de Herramientas superior, un área de trabajo en el que diseñar la tabla e insertar los contenidos y, al fondo, una serie de lengüetas correspondientes a las fichas de texto que se quiere activar.

La Barra de Herramientas del editor ofrece los siguientes comandos:

Cortar [CTRL+X] - Copiar [CTRL+C] - Pegar [CTRL+V]

Cortan, copian y pegan el texto seleccionado. En este caso, antes de ser pegado, al texto se le quita todo el formato que tuviera asociado originalmente y asume el definido en el editor.

Insertar especial

Pega el texto que ha sido cortado o copiado con los comandos Cortar y Copiar. El texto pegado mantiene todo el formato original.

Cancelar [CTRL+Z] - Restablecer [ALT+MAIUSC+BACKSPACE]

Anulan y restablecen la última operación realizada/anulada.

Insertar enlace [CTRL+L]

Establece un enlace hipertextual en la/s palabra/s seleccionada/s. En la ventana que se abre se pueden definir los ajustes del Enlace.

Insertar imagen

Inserta una imagen (en formato .JPG, .GIF, .PNG, .BMP) dentro de la celda de la tabla. Pulsando sobre el triangulito que hay en el botón Insertar imagen se despliega un submenú con los siguientes elementos: Imagen desde archivo... y Imagen desde la Librería Online....

Mediante la ventana que se abre con el comando Imagen desde la Librería Online... se muestra una colección de más de 400.000 imágenes de libre distribución entre las que es fácil elegir las que se desea añadir al Proyecto.

El tamaño de las imágenes introducidas puede ser libremente cambiado utilizando las manillas de selección.

Pulsando con el botón derecho del ratón sobre la imagen añadida se abre un menú contextual que ofrece los comandos necesarios para efectuar las operaciones de cortar, copiar y pegar; además del botón para abrir la ventana Propiedades de Imagen.

Activar código HTML

Permite introducir directamente el código HTML dentro de la tabla. En modalidad HTML, los caracteres "<" y ">" no son interpretados como "menor" y "mayor"; lo que es introducido entre ellos es interpretado como un tag HTML.

Ajustes para el RollOver

Aplica el efecto RollOver al texto, pasándolo de estático a deslizable. En la ventana que se abre se pueden definir los ajustes del RollOver.

Fondo claro/oscuro

Define un color claro u oscuro para el fondo del Editor: de esta manera es más sencillo, por ejemplo, redactar los textos que deben ser de color blanco para tener un contraste adecuado respecto al fondo establecido en la plantilla aplicada.

Añadir fila / Eliminar fila / Añadir columna / Eliminar columna

Permiten añadir una fila o una columna después de aquella en la que está situado el cursor del ratón, o eliminar la fila o la columna en la que está situado el cursor.

Unir celdas - Dividir celdas

permiten unir varias celdas adyacentes seleccionadas de modo que formen una única celda, o dividir la celda en la que se está, creando dos celdas una junto a otra horizontalmente.

Elección de fuente - Tamaño de la fuente

Configuran el tipo de carácter que se empleará y el tamaño.

El menú desplegable propone todas las fuentes instaladas en el ordenador en que se está trabajando, más todas las Fuentes Web y las Fuentes Google integradas mediante la ventana Preferencias | Fuente Web. Los tipos de fuente se distinguen fácilmente gracias a los iconos asociados:

Google Fonts: fuentes integradas mediante la ventana Preferencias | Fuente Web de WebSite X5 y vinculadas con el servidor Google.

Fuentes Web: fuentes integradas mediante la ventana Preferencias | Fuente Web de WebSite X5 y publicadas en el servidor web del sitio.

Safe Fonts: fuentes presentes prácticamente en todos los dispositivos y para las que por consiguiente no es necesaria ninguna publicación.

Negrita [CTRL+B] - Cursiva [CTRL+I] - Subrayado [CTRL+U] - Tachado [CTRL+T]

Ponen en negrita, cursiva, subrayado y tachado el texto seleccionado.

Color del texto - Color de fondo de la celda

Especifican el color que se aplicará al texto seleccionado o al fondo de la celda del texto seleccionado.

Estilo del borde de la celda

Configura el estilo de los bordes de las celdas. Es posible definir tanto el color como el grosor de los bordes que delimitan las filas y/o las columnas de la tabla.

Quitar formato

Quita posibles ajustes de formato asociados al texto seleccionado para volverlo más conforme al estilo definido en Estilo de los textos.

Listado de viñetas - Lista numerada

Crean respectivamente una lista de viñetas y una lista numerada de elementos. Mediante la tecla TAB se pueden encastrar los elementos de la lista a fin de crear subniveles.

Alinear a la izquierda - Centrar - Alinear a la derecha - Justificar

Alínean a la izquierda, al centro, a la derecha o justifican el texto seleccionado.

Texto a la derecha - Disposición normal - Texto a la izquierda

Activos cuando se selecciona una imagen insertada en una celda con texto, definen la posición del texto respecto a la imagen, haciendo que discurra al lado derecho/izquierdo de la imagen o dejando que la imagen permanezca insertada en el fluir del texto como si fuese una palabra más.

Alinear arriba - Alinear en el centro - Alinear abajo

permiten alinear verticalmente el texto seleccionado arriba, en el centro o abajo.

 

Pulsando el botón derecho del ratón es posible también abrir un menú contextual que además de ofrecer los comandos Deshacer, Cortar, Copiar, Pegar, Insertar especial, Borrar, presenta también los siguientes comandos:

Altura filas

permite predisponer, mediante la ventana que se abre, el valor en píxeles para definir la altura de las filas seleccionadas. Predisponiendo como valor 0, las filas asumen automáticamente la altura mínima necesaria para visualizar el contenido introducido.

Anchura columnas

permite predisponer, mediante la ventana que se abre, el valor en píxeles para definir la anchura de las columnas seleccionadas.

Los tamaños de las filas, de las columnas o de cada una de las celdas pueden ser modificados también colocando el ratón sobre los bordes y arrastrándolos hasta la posición deseada manteniendo pulsada la tecla izquierda del ratón. Seleccionando una celda y desplazando su borde izquierdo y/o derecho se modifica sólo el tamaño de la celda en cuestión.

Si este menú contextual se abre pulsando sobre una imagen insertada en el texto, este presenta también el comando Propiedades de Imagen mediante el que es posible abrir la ventana homónima Propiedades de Imagen.

En el fondo del área de trabajo se encuentran las lengüetas o pestañas correspondientes a las diferentes fichas de texto creadas.

Por defecto existe una única lengüeta con el nombre "Ficha 1": si no se añaden más pestañas, no se activará la visualización por pestañas para el texto. Para añadir una nueva ficha y trabajar en ella basta pulsar el botón que está a la derecha de las lengüetas. Como alternativa también se puede hacer clic con el botón derecho del ratón sobre una de las lengüetas usar los comandos del menú contextual que se abre:

Añadir ficha: añade una nueva lengüeta (activando la correspondiente ficha de texto) y da la posibilidad de asignarle un nombre en la ventana que se abre al efecto.
Cambiar el nombre de la ficha activa...: abre la ventana para cambiar el nombre de la lengüeta activa.

Es importante nombrar adecuadamente las diferentes lengüetas, ya que los nombres asignados se toman automáticamente para conformar los botones de navegación entre fichas de texto en el caso de elegir Fichas - Horizontal o Fichas - Vertical como Modo de visualización.

Eliminar la ficha activa: eliminoa la lengüeta activa y la correspondiente ficha de texto.
Desplazar la ficha activa a la izquierda / Desplazar la ficha activa a la derecha: cambiando el orden de las lengüetas, desplazando la activa hacia izquierda o derecha. También es posible emplear el Drag&Drop, arrastrando con el ratón una lengüeta y dejándola en la posición deseada.
Pulsar para expandir/reducirReferencia: Los comandos de la sección Estilo de las fichas

A través de los comandos de esta sección, activa solo si se ha añadido al menos una segunda ficha de texto, es posible definir el estilo gráfico y el modo de visualización de las fichas de texto creadas.

En primer lugar es necesario configurar el Modo de visualización de las fichas escogiendo entre los que están disponibles:

Fichas - Horizontal: del mismo modo que en un fichero tradicional, los contenidos se presentan en fichas que se pueden hojear usando las lengüetas dispuestas horizontalmente, el la parte superior o inferior.

Fichas - Vertical: como en una agenda en papel, los contenidos se presentan en fichas que se pueden hojear usando las lengüetas dispuestas verticalmente, en el lado derecho o izquierdo.

Presentación: como en una presentación de imágenes, las fichas de texto se pueden hacer pasar usando las flechas laterales, pero no hay botones de navegación con el nombre de las fichas.

Según el Modo de visualización establecido, se ofrecen diferentes opciones para configurar.

Para los tipos Fichas - Horizontal y Fichas - Vertical se puede definir el aspecto gráfico de los Botones de navegación usando las siguientes opciones:

Posición: establece dónde deben situarse los botones para navegar entre las diferentes fichas de texto, si en la parte superior o inferior para el tipo Fichas - Horizontal, o a la derecha o izquierda para el tipo Fichas - Vertical.
Estilo: define la forma de los botones para navegar entre las diferentes fichas de texto.
Fuente: define el tipo de carácter, el estilo y el tamaño del texto.
Tamaño: configura el tamaño en pixels del ancho y del alto de los botones de los paneles. Dejando activa la opción Mantener relación, en el ajuste del tamaño se mantiene inalterada la proporción entre el ancho y el alto.

También para los tipos Fichas - Horizontal y Fichas - Vertical se pueden también configurar las opciones de la sección Color:

Texto/Fondo del sitio/Color Borde: definen los colores del texto, del fondo y del borde de los botones para la navegación entre las diferentes fichas de texto.
Texto activo/ Fondo activo: definen los colores del texto y del fondo que asumirán los botones de navegación entre fichas de texto al pasar el ratón por encima.

Para el tipo Presentación, en cambio, las opciones disponibles para definir el aspecto gráfico de los Botones de navegación son:

Visualización: establece si los botones para navegar entre las diferentes fichas de texto deben ser Siempre visibles, No visibles (y contemplar la activación automática) o Visibles mediante el paso del puntero del ratón.
Estilo: define el aspecto gráfico de los botones para navegar entre las diferentes fichas de texto, eligiendo entre las imágenes propuestas.

Por último, para todos los tipos de visualización es posible configurar las opciones de la sección General:

Altura fichas: cuando está activada, ajusta el tamaño en pixels de la altura de las fichas de texto.

El objeto toma automáticamente la altura del contenido más largo entre los que han sido introducidos en las diferentes fichas: fijando elAltura fichas con la opción al efecto se mostrará la barra de desplazamiento en todas las fichas con contenidos de longitud superior.

Reproducción automática [seg]: cuando está activada, configura el intervalo de tiempo en segundos que debe transcurrir para que se active automáticamente el paso a la siguiente ficha de texto.
Margen interior: establece el valor en pixels del margen, es decir del espacio entre el borde y el contenido de la fichas de texto.
Efecto: establece el efecto de transición con el que se muestran las fichas de texto.

 

 


Best practice:

-

Cómo utilizar las Fuentes Web


Profundización:

-

Fuentes estándar y Fuentes Web