Cómo trabajar en el Estilo de las Filas

Best practice > Paso 4 - Páginas >

Cómo trabajar en el Estilo de las Filas

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

Trabajando en la Creación de la página, tras haber añadido al menos un Objeto en una Celda de la Rejilla de maquetación, es posible definir el aspecto gráfico de la Fila de la que esa Celda forma parte. Para ello basta seleccionar la Fila en cuestión y pulsar el botón para abrir la ventana Estilo de las Filas.

Pulsar para expandir/reducirHow To: Cómo unir varias Filas para darles el mismo aspecto

Una Fila puede entenderse como una franja horizontal dentro de la Página. Esta franja puede ser tan ancha como la Página (cuyo ancho está a su vez determinado por la Plantilla aplicada) o como la ventana del Navegador entera. La altura de esta franja, en cambio, está determinada por el Objeto más alto de aquellos incluidos en una de las Celdas de la Fila.

Es posible hacer que el aspecto de una Fila se aplique también automáticamente a una o más Filas sucesivas, uniendo entre sí esas Filas:

En la ventana Creación de la página añadir los Objetos a la Rejilla para obtener la maquetación deseada.
Pulsar el botón para acceder a la ventana Estilo de las Filas. En la Rejilla que se muestra aquí, todas las Filas tienen al lado una bolita que puede estar llena o vacía en función de si el aspecto de la Fila ya ha sido definido o no.
Estado anterior a la unión

Estado anterior a la unión

Mover el ratón hasta el centro de la línea imaginaria que une las bolitas de las dos Filas que se quiere unir: aparecerá el icono de un candado.
Ratón alineado con la línea

Ratón alineado con la línea

Pulsar sobre el candado: las dos Filas se unen y el icono del candado cambia.
Pulsación sobre el candado para unir las filas

Pulsación sobre el candado para unir las filas

Llegados aquí, las dos Filas están unidas y esto se representa visualmente por una línea que ahora une las bolitas que están a su lado. Todos los ajustes activados para definir el aspecto de la primera Fila se aplican idénticos también a la segunda.
Estado tras la unión de las filas

Estado tras la unión de las filas

Es posible repetir este procedimiento para unir entre sí todas las Filas necesarias.
Pulsar para expandir/reducirHow To: Cómo dividir varias Filas unidas

Así como es posible unir dos o más Filas para poder darles el mismo aspecto gráfico, es también posible separarlas para hacerlas autónomas:

Mover el ratón hasta la línea que une las bolitas correspondientes a las dos Filas en las que se quiere trabajar, sobre el icono del candado.
Pulsar sobre el candado: las dos Filas se separarán.

Si, por ejemplo, se habían unido las Filas 1 y 2 y para ambas se había definido un aspecto gráfico particular, tras la separación la Fila 2 vuelve a asumir su aspecto original.

Si se han unido entre sí más de dos Filas, la separación actúa exactamente en el punto correspondiente a donde está situado el icono del candado. Por ejemplo, si las Filas 1, 2, 3 y 4 han sido unidas entre sí y se pulsa sobre el candado situado entre las filas 2 y 3 se obtiene una situación en la que la Fila 1 está unida a la 2 y la Fila 3 está unida a la 4.

Pulsar para expandir/reducirHow To: Cuándo no es posible separar varias Filas unidas entre sí

En función de cómo se coloquen los Objetos en la Rejilla y de cómo se los ordene en las diferentes Vistas en caso de tratarse de un Sitio web Adaptable, es posible que se den situaciones en las que dos o más Filas se unen automáticamente y no es posible intervenir para separarlas.

Caso 1. Maquetación

Si se añade un Objeto en la Rejilla de modo que ocupe varias Celdas de diferentes Filas, todas las Filas afectadas se unen automáticamente entre sí. El candado que aparece en la línea que une las bolitas correspondientes a las Filas en cuestión estará de color gris (en vez de azul) para indicar que no se puede quitar. En este caso, el único modo de cambiar la situación es intervenir en la maquetación de los Objetos.

Ejemplo


El Objeto en la columna 1 ocupa las filas 4, 5 y 6: estas se unen automáticamente y no pueden ser serapadas

El Objeto en la columna 1 ocupa las filas 4, 5 y 6: estas se unen automáticamente y no pueden ser serapadas

Aunque por ejemplo se defina antes un aspecto diferente para la Fila 1 y la Fila 2, si después se coloca un Objeto de manera que afecte a ambas, las dos Filas se unirán automáticamente y la segunda asumirá el aspecto de la primera. También en este caso no será posible separar manualmente las Filas si antes no se modifica la maquetación de los Objetos.  

Caso 2. Sitio web Adaptable

Si se trabaja en la creación de un Sitio web Adaptable, ordenando los Objetos para definir cómo deben disponerse en las diferentes Vistas determinadas por los puntos de interrupción es posible que se den combinaciones que llevan a la unión automática de dos o más Filas. Normalmente este caso sucede cuando, como en el ejemplo siguiente, durante el ordenamiento se pone a continuación de un Objeto no el que está a su derecha (perteneciente a la misma Fila) sino el que está justo debajo (perteneciente a una Fila diferente): de este modo, en efecto, se crean grupos en los que los Objetos están dispuestos en varias Filas.

Paso 1


Definiendo la Vista correspondiente a un punto de interrupción, la ordenación lleva a formar grupos en los que los Objetos están dispuestos en varias filas

Definiendo la Vista correspondiente a un punto de interrupción, la ordenación lleva a formar grupos en los que los Objetos están dispuestos en varias filas

Paso 2


Situación final: por causa de la ordenación establecida, las Filas 1 y 2 se han unido y tendrán el mismo aspecto

Situación final: por causa de la ordenación establecida, las Filas 1 y 2 se han unido y tendrán el mismo aspecto

Pulsar para expandir/reducirHow To: Cómo definir el aspecto de una Fila

Definir el aspecto de una Fila es una operación muy sencilla. Es preciso prodecer como sigue:

Abrir la ventana Estilo de las Filas y seleccionar la Fila o el grupo de Filas con los que se quiere trabajar.
Usar las opciones disponibles para definir el aspecto deseado.

Cuando se trabaja en la definición del aspecto de una Fila, es preciso considerar lo siguiente:

en la rejilla ofrecida en la ventana Estilo de las Filas, las Filas para la que todavía no se ha definido el aspecto tienen fondo blanco y presentan a su lado una bolita vacía,
en la rejilla ofrecida en la ventana Estilo de las Filas, las Filas para la que ya se ha definido el aspecto tienen fondo azul y presentan a su lado una bolita llena,
pulsando con el botón derecho del ratón sobre una Fila se abre un menú contextual con las herramientas necesarias para copiar y pegar el Aspecto de la Fila.
Pulsar para expandir/reducirHow To: Cómo crear una franja coloreada tan ancha como la ventana del navegador

Para crear una franja coloreada que se extienda no solo por todo el ancho de la Página sino también por el de la ventana del Navegador es preciso proceder como sigue:

Abrir la ventana Estilo de las Filas y seleccionar la Fila o el grupo de Filas con los que se quiere trabajar.
Elegir De colores como tipo de Fondo del sitio y usar las opciones disponibles para ajustar el color y la opacidad.
Activar la opción Extender hasta el ancho de la ventana del Explorador y abrir la Vista Previa local para comprobar el aspecto gráfico de la franja creada.

Con un procedimiento análogo, simplemente eligiendo un tipo de Fondo del sitio diferente, es posible crear una franja con un degradado, una imagen o un vídeo en lugar de un único color plano.

 

Pulsar para expandir/reducirHow To: Cómo realizar un Sitio web con efecto parallax

El efecto parallax es muy utilizado para conferir profundidad a las Páginas y hacerlas más atractivas a los ojos de los Visitantes. El efecto se basa en el hecho de que durante el deslizamiento de la Página la imagen de fondo y las del primer plano se mueven a una velocidad diferente.

Para aplicar el efecto parallax a una Página se debe proceder del modo siguiente:

Abrir la ventana Estilo de las Filas y seleccionar la Fila o el grupo de Filas con los que se quiere trabajar.
Elegir Imagen como tipo de Fondo del sitio y emplear las opciones disponibles para importar el archivo gráfico que se quiere utilizar y definir parámetros como la disposición y el alineado.
Activar la opción Activar Efecto Parallax y abrir la Vista Previa local para comprobar el aspecto gráfico de la franja creada.
Para hcer aún más evidente el efecto parallax se aconseja activar también la opción Extender hasta el ancho de la ventana del Explorador para que la franja realizada se extienda por todo el ancho de la ventana del Navegador.

Si se desea activar el efecto parallax es posible utilizar como Fondo del sitio de la Fila un degradado, una imagen o un vídeo; pero no un color único.

 


Profundización:

-

El Box Model en WebSite X5