Diseño de una página o una vista con el diseño de cuadrícula
Acerca de esta tarea
En el diseño de cuadrícula se dispone el contenido empleando cuadrículas, contenedores y celdas.
Una cuadrícula es un contenedor que tiene 12 unidades de ancho. El ancho real de cada unidad es variable y depende del tamaño de la pantalla. Dentro de una cuadrícula puede haber contenedores y celdas. Un contenedor agrupa celdas relacionadas. Una celda es un marcador de posición de contenido. Contenedores y celdas pueden tener un ancho de entre 1 y 12 unidades. Si el contenedor no tiene al menos una celda, Designer lo eliminará.
Si el ancho total de las celdas de una cuadrícula es de 12, la cuadrícula forma una fila completa. Cuando se edita una celda en una fila completa, Designer intenta preservar la fila completa cambiando de forma automática el tamaño de las demás celdas. Es decir, si se suprime una celda, otra celda se expande para ocupar el espacio. De forma similar, si se añade una celda a la izquierda o a la derecha de otra celda, una celda se encogerá para ajustarse a la nueva celda. No obstante, las celdas nuevas o las de tamaño reajustado tienen un tamaño mínimo de 3. En tal caso, Designer mueve la celda del final para formar una fila nueva. Cuando se edita una cuadrícula que tiene menos o más de 12 unidades, Designer no cambia el tamaño de las celdas de forma automática. El límite de 12 unidades se aplica independientemente del número de contenedores que haya en una celda.
Una cuadrícula no tiene un límite vertical. No obstante, si hay demasiadas celdas apiladas en vertical, la interfaz resultante obliga a los usuarios a realizar muchos desplazamientos de pantalla.
En , puede establecer las propiedades de diseño de cuadrícula que se describen en la tabla siguiente.
| Propiedad | Descripción |
|---|---|
| Amplitud horizontal | Especifica el número de unidades horizontales que una celda de cuadrícula o un contenedor seleccionado ocupa en una cuadrícula. Una cuadrícula tiene un máximo de 12 unidades horizontales de anchura. Puede especificar un número del 1 al 12. Si aumenta o reduce el alcance horizontal, la anchura de la celda de cuadrícula o contenedor seleccionado aumentará o disminuirá por el lado derecho de su posición actual. |
| Visibilidad | Especifica si se
visualiza o se oculta una celda de cuadrícula o contenedor en una cuadrícula. Esta propiedad tiene las opciones siguientes:
|
| Orientación | Especifica si los elementos de diseño de una celda de
cuadrícula seleccionada están dispuestos horizontal o
verticalmente. Esta propiedad tiene las opciones siguientes:
|
| Alineación horizontal | Controla la alineación horizontal de los elementos de diseño en
una celda de cuadrícula seleccionada. Esta propiedad tiene las opciones siguientes:
Nota: La alineación horizontal no está disponible para los elementos de diseño en una celda de cuadrícula seleccionada a menos que la orientación sea horizontal.
|
| Alineación vertical | Controla la alineación vertical del contenido de un contenedor seleccionado o de una celda de cuadrícula seleccionada,
como por ejemplo las celdas de cuadrícula de un contenedor o los elementos de diseño de una celda de cuadrícula. Esta propiedad tiene las opciones siguientes:
Nota: La alineación vertical no está disponible para los elementos de diseño en una celda de cuadrícula seleccionada a menos que la orientación sea horizontal.
|
| ID de control | Especifica un identificador alfanumérico que identifica de forma exclusiva un elemento de diseño seleccionado. Este ID puede utilizarse para localizar elementos en JavaScript y artefactos de previsualización avanzada. |
Para diseñar una página o una vista utilizando el diseño de cuadrícula, utilice las siguientes instrucciones.
Procedimiento
- Utilice los puntos de inserción del patrón de cuadrícula predeterminado para añadir más celdas o contenedores al lienzo.
- Añadir una cuadrícula por encima o por debajo de cuadrículas existentes.
- Añadir una celda a una cuadrícula o contenedor. Si hay más de 12 unidades de celdas en la cuadrícula, la nueva celda continúa en la línea siguiente.
- Eliminar una celda de una cuadrícula. Si la cuadrícula es una fila completa, la celda o el contenedor de la derecha se expandirá para ocupar el espacio de la celda eliminada. El contenido de la celda suprimida se elimina.
- Cambiar la alineación vertical de las celdas de cuadrícula de un contenedor seleccionado.
- Cambiar la orientación de una celda de cuadrícula.
- Si la orientación de una celda de la cuadrícula es
horizontal, cambiar la alineación de los elementos de diseño en una
celda de cuadrícula seleccionada :
- Alineación horizontal
- Alineación vertical
- Cambiar el tamaño de una celda o un contenedor arrastrando su borde derecho. La celda o el contenedor de la derecha se expandirá o contraerá según corresponda. No obstante, el mínimo al que se contrae de forma automática es de 3 unidades. Si la celda o el contenedor llega a este mínimo, pasará a la fila siguiente.
- Ocultar una celda o contenedor cambiando su propiedad de Visibilidad. El diseño ya no lo muestra, pero la ventana emergente Elementos invisibles
lo lista como un elemento invisible que puede seleccionar. - Suprimir una cuadrícula o un contenedor. Se elimina el contenido de la cuadrícula o del contenedor suprimido, incluidos las celdas y su contenido.