Introducción a la disposición en DreamWeaver

dreamweaver
Validar nuestro código en DreamWeaver
25 diciembre, 2014
dreamweaver
Estilos y Comportamientos en DreamWeaver
25 diciembre, 2014

Introducción a la disposición en DreamWeaver

dreamweaver

La disposición de páginas es una parte fundamental del diseño Web. El término disposición de páginas hace referencia a la apariencia de las páginas en el navegador, es decir, a aspectos tales como la ubicación de los menús o las imágenes. Macromedia Dreamweaver ofrece distintos métodos para crear y controlar la disposición de las páginas Web.

Un método frecuente para diagramar una página consiste en utilizar tablas HTML. Sin embargo, las tablas pueden resultar difíciles de utilizar, pues su función original no era facilitar el diseño de las páginas Web, sino presentar datos en forma tabular.

Para simplificar el uso de tablas en la disposición de páginas, Dreamweaver ofrece la vista de Disposición. En ella puede diseñar una página utilizando tablas como estructura subyacente al tiempo que evita las dificultades tradicionales que plantea el uso de tablas. Por ejemplo, puede dibujar fácilmente celdas de tablas en una página y, a continuación, personalizarlas y colocarlas donde prefiera. La disposición puede tener un ancho fijo u ocupar toda la ventana del navegador.

También puede diagramar las páginas utilizando las tablas de la manera tradicional (consulte Introducción a las tablas) o utilizando capas y convirtiéndolas en tablas (consulte Usar tablas y capas para diseño). Sin embargo, la vista de Disposición de Dreamweaver es la forma más sencilla de preparar la disposición de una página.

Para utilizar la vista de Disposición, deberá salir de la vista Estándar de Dreamweaver.

Para cambiar a la vista de Disposición

Elija Ver > Vista de tabla> Vista de disposición o haga clic en el botón Vista de disposición del panel Objetos.

La opción Mostrar fichas de tabla de disposición está activada automáticamente en la vista de Disposición. Para desactivar las fichas de tabla cuando se encuentra en la vista de Disposición, elija Ver > Vista de tabla > Mostrar fichas de tabla de disposición.

Nota: Si crea una tabla en la vista Estándar de Dreamweaver y cambia a la vista de Disposición, la tabla contendrá celdas de disposición vacías que quizá deba borrar antes de crear nuevas celdas.

Celdas y tablas de disposición

Cuando cambia a la vista de Disposición, puede añadir celdas de disposición a la página. Estas celdas le ayudarán a bloquear la disposición de la página. Por ejemplo, puede dibujar una celda en la parte superior de la página para insertar un menú, en la parte derecha para insertar submenús o en un lado para presentar contenido. A la hora de diseñar la página, piense en términos de una cuadrícula de filas y columnas.
 
Cuando usted crea una celda de disposición en una página, Dreamweaver crea automáticamente una tabla de disposición como contenedor de dicha celda. Una celda de disposición no puede existir fuera de una tabla de disposición. Puede diseñar la página utilizando varias celdas de disposición de una tabla de disposición o utilizar múltiples tablas de disposición para conseguir una disposición más avanzada.

El uso de múltiples tablas de disposición aísla secciones de la disposición para evitar que se vean afectadas por otras. Resulta especialmente útil cuando el contenido de una celda de disposición puede cambiar y hacer que aumente de tamaño. A medida que la celda crece, afecta a las celdas próximas, ya que no se pueden superponer. Si ha creado una disposición con múltiples tablas, las filas y columnas de una tabla no afectarán a otras tablas.

También puede anidar tablas de disposición (insertando una tabla de disposición en otra ya existente). Las celdas de una tabla anidada no están restringidas por las filas y columnas de la tabla externa. Consulte Dibujar una tabla de disposición anidada.

Dibujar celdas y tablas de disposición

En la vista de Disposición puede dibujar celdas y tablas de disposición en la página. Si crea una celda de disposición, se insertará automáticamente una tabla de disposición que actuará como contenedor de dicha celda. Una celda de disposición siempre se encontrará en una tabla de disposición.

Nota: La tabla de disposición que crea automáticamente Dreamweaver tiene el ancho de la ventana de documento. Puede cambiar su tamaño o hacer que sea autoampliable si es necesario.

Para dibujar una celda de disposición

  • Sitúese en la vista de Disposición y, a continuación, haga clic en el botón Dibujar celda de disposición en la categoría Disposición del panel Objetos. El puntero del ratón se convertirá en un signo más (+).

  • Sitúe el puntero del ratón en la parte de la página donde desee que comience la celda y, a continuación, arrastre para crear la celda de disposición. Para crear varias celdas sin necesidad de hacer clic repetidamente en el botón de celda de disposición, mantenga presionada la tecla Control (Windows) o Comando (Macintosh).

  • La celda aparecerá en la página con un contorno azul. El azul es el color predeterminado del contorno de las celdas de disposición. El tamaño de cada celda se muestra en el área de encabezado de la columna, en la parte superior de la celda. Para obtener más información sobre el ancho, consulte Configurar el ancho de la disposición.

La disposición de la página utiliza una cuadrícula con columnas y filas, por lo que las celdas pueden extenderse a lo largo de varias filas o columnas, pero nunca superponerse. Dreamweaver ayuda a mantener esta estructura ajustando automáticamente las nuevas celdas a las celdas existentes si se dibujan próximas entre sí (a una distancia de ocho píxeles). Las celdas también se ajustarán automáticamente a un lado de la página si se dibujan cerca del borde (a una distancia de ocho píxeles). Para desactivar temporalmente el ajuste, mantenga presionada la tecla Alt (Windows) u Opción (Macintosh) mientras arrastra la celda por la página.

Esto no significa que todas las celdas deban tener el mismo tamaño o ancho. Puede haber celdas de distinto ancho en la misma columna o celdas de distinto alto en la misma fila.

Para dibujar una tabla de disposición:

1 Sitúese en la vista de Disposición y, a continuación, haga clic en el botón Dibujar tabla de disposición en la categoría Disposición del panel Objetos. El puntero del ratón se convertirá en un signo más (+).

2 Sitúe el puntero del ratón en la página y, a continuación, haga clic y arrastre el ratón para crear la tabla de disposición. Si es la primera tabla que dibuja en la página, se colocará automáticamente en la esquina superior izquierda de la página. Para crear varias tablas sin necesidad de hacer clic repetidamente en el botón de tabla de disposición, mantenga presionada la tecla Control (Windows) o Comando (Macintosh).
 
 

La tabla aparecerá en la página con un contorno verde. El verde es el color predeterminado del contorno de las celdas de disposición (consulte Configurar las preferencias de la vista de Disposición para cambiarlo). También aparecerá una ficha Tabla de disposición en la parte superior de cada tabla dibujada, que le ayudará a distinguir y seleccionar la tabla. El tamaño de cada tabla se muestra en el área de encabezado de la columna, en la parte superior de la tabla.

Tabla de disposición

Para obtener más información sobre el ancho, consulte Configurar el ancho de la disposición.

Las tablas no se pueden superponer. La disposición de la página utiliza una cuadrícula con columnas y filas, por lo que las tablas pueden extenderse a lo largo de varias filas o columnas, pero nunca pueden superponerse. Dreamweaver ayuda a mantener esta estructura ajustando automáticamente las nuevas tablas a las tablas o celdas existentes si se dibujan próximas entre sí (a una distancia de ocho píxeles). Las tablas también se ajustarán automáticamente a un lado de la página si se dibujan cerca del borde (a una distancia de ocho píxeles). Para desactivar el ajuste, mantenga presionada la tecla Alt (Windows) u Opción (Macintosh) mientras arrastra la tabla por la página.

Puede crear tablas de disposición en áreas vacías de la página, en una tabla de disposición existente (anidadas) o alrededor de celdas y tablas de disposición existentes. Cuando se crea una tabla de disposición en un documento en blanco, ésta se ajusta automáticamente a la esquina superior izquierda de la ventana de documento.

Nota: Si la página ya tiene contenido, sólo podrá dibujar la tabla de disposición debajo del contenido.

Para dibujar una tabla de disposición alrededor de tablas o celdas existentes:

1 Sitúese en la vista de Disposición y, a continuación, haga clic en el botón Dibujar tabla de disposición en la categoría Disposición del panel Objetos. El puntero del ratón se convertirá en un signo más (+).

2 Haga clic y arrastre el ratón alrededor de las celdas o tablas de disposición existentes. La tabla de disposición abarcará las celdas o tablas existentes.

Aplicar formato a una celda de disposición

Barra de propiedades

Puede establecer la alineación de contenido, el ancho y el alto y los colores de fondo en el inspector de propiedades.

Para aplicar formato a una celda de disposición en el inspector de propiedades:

1 Haga clic en el borde de la celda o mantenga presionada la tecla Control (Windows) o Comando (Macintosh) y haga clic en cualquier punto de la celda.

2 Elija Ventana > Propiedades para abrir el inspector de propiedades.

3 Dispone de las siguientes opciones de apariencia:

Para cambiar el ancho, elija Fijo y escriba un valor en píxeles en el cuadro, o elija Autoampliar.

Para cambiar el alto, especifique un valor en píxeles en el cuadro de texto.

Para establecer un color de fondo para la celda de disposición, elija un color en el selector de colores desplegable o escriba el código hexadecimal del color deseado en el cuadro de texto.

Para establecer la alineación horizontal, selecciónela en el menú emergente Horiz. Puede establecer la alineación del contenido de la celda de disposición como Izquierda, Centro, Derecho o Predeterminado.

Para establecer la alineación vertical, selecciónela en el menú emergente Vert. Puede establecer la alineación del contenido de la celda de disposición como Superior, Medio, Inferior, Línea de base o Predeterminado.

Seleccione No aj. para evitar que se ajuste el texto. Si selecciona esta opción, la celda de disposición se ampliará para dar cabida a todo el contenido sin pasar a una nueva línea. Aplicar formato a tablas de disposición

Puede definir el ancho, alto, relleno, espaciado, etc. en el inspector de propiedades.
 

Para aplicar formato a una tabla de disposición

1 Haga clic en la ficha o el borde de la tabla.

2 Elija Ventana > Propiedades para abrir el inspector de propiedades.

3 Dispone de las siguientes opciones de apariencia:

Para cambiar el ancho, elija Fijo y escriba un valor en píxeles en el cuadro o elija Autoampliar.

Para cambiar el alto, especifique un valor en píxeles en el campo de texto.

Para establecer el relleno de celdas, especifique el número de píxeles en el campo Rell. celda. El relleno de celdas es la cantidad de espacio que habrá entre el contenido de una celda de disposición y el límite de la misma. Si establece este valor por encima de 0, todas las celdas de la tabla de disposición que ha seleccionado tendrán este espaciado. Si aparecen dos números en el área de encabezado de la columna, utilice la opción Igualar ancho.

Para establecer el espaciado de celdas, especifique el número de píxeles en el campo Esp. celda. El espaciado de celdas es la cantidad de espacio que habrá entre cada celda de disposición. Si establece este valor por encima de 0, todas las celdas de disposición de la tabla que ha seleccionado tendrán este espaciado. Si aparecen dos números en el área de encabezado de la columna, utilice la opción Igualar ancho.

Para borrar los valores de alto de todas las celdas de la tabla de disposición que ha seleccionado, haga clic en el botón Borrar atributos de alto. Si no hay elementos en la tabla, ésta se contraerá completamente.

Si hay celdas de ancho fijo, haga clic en el botón Igualar ancho. De este modo se restablecerá automáticamente el ancho HTML de cada celda para que coincida con el contenido de la celda. Por ejemplo, si define el ancho en 200 píxeles y, a continuación, añade contenido que amplía el ancho a 250, aparecerán estos dos números en la barra superior de la tabla: 250 entre comillas y 200 entre paréntesis. Si hace clic en Igualar ancho, desaparecerá el valor de 200 píxeles y se mantendrá el de 250.

Para eliminar las imágenes de espaciador (imágenes transparentes que se utilizan para controlar el espaciado de la disposición) en la tabla de disposición, haga clic en el botón Quitar todos los espaciadores.

Si la tabla de disposición seleccionada está anidada dentro de otra tabla de disposición, haga clic en Desanidar para eliminar la tabla anidada sin perder su contenido. La tabla de disposición desaparecerá y las celdas de disposición y su contenido pasarán a formar parte de la tabla principal.

Añadir contenido a una celda

En la vista de Disposición puede añadir texto, imágenes y otros elementos a las celdas de disposición de la misma forma que en la presentación normal de Dreamweaver (vista Estándar). Haga clic en la celda donde desee insertar contenido y, a continuación, escriba el texto o inserte otros archivos.

Sólo se puede insertar contenido en celdas de disposición, por lo que deberá en primer lugar crearlas (consulte Dibujar celdas y tablas de disposición). Los espacios grises de la página indican las áreas que no están disponibles para añadir contenido a menos que inserte una celda de disposición en ellas.

La celda de disposición se amplía automáticamente cuando se añade material más grande que ella. A medida que se amplía la celda, aumenta de tamaño la columna en la que se encuentra la celda y, además, pueden verse afectadas las celdas adyacentes.

Para añadir texto a una celda

Haga clic en la celda de disposición donde desee añadir texto y lleve a cabo una de estas operaciones:

Escriba texto en la celda. La celda aumentará automáticamente de tamaño a medida que escribe.

Pegue el texto copiado de otro documento. Utilice el comando Pegar. Para obtener más información, consulte Insertar texto y objetos.
 
 

Para añadir una imagen a una celda

1 Haga clic en la celda de disposición donde desee añadir la imagen.

2 Haga clic en el botón Insertar imagen del panel Objetos, elija Insertar > Imagen o arrastre el botón Insertar imagen desde el panel Objetos hasta la página.

3 En el cuadro de diálogo Seleccionar imagen, seleccione un archivo de imagen.

Para obtener más información, consulte Configurar propiedades de imágenes.

Borrar el alto automático de las celdas

Después de insertar contenido en las celdas, puede borrar el alto de las celdas para eliminar su configuración. Dreamweaver crea automáticamente las celdas con un alto especificado, pero una vez añadido el contenido a la celda, dejará de necesitar el alto especificado.

Para borrar el alto, lleve a cabo una de estas operaciones:

Seleccione Borrar alto de celda en el menú Encabezado de columna. Se borrará el alto y es posible que se reduzca el tamaño de algunas filas.
 
Seleccione una tabla de disposición (haga clic en la ficha o el borde de la tabla) y, a continuación, haga clic en el botón Borrar alto de fila del inspector de propiedades.

Mover y cambiar el tamaño de celdas y tablas de disposición

Todas las celdas y tablas se pueden mover o cambiar de tamaño, lo que permite ajustar fácilmente la disposición de la página. Para utilizar la cuadrícula de Dreamweaver como guía para mover o cambiar el tamaño de celdas y tablas, consulte Utilizar la cuadrícula de Dreamweaver.

Para cambiar el tamaño de una celda

1 Haga clic en el borde de la celda o mantenga presionada la tecla Control (Windows) o Comando (Macintosh) y haga clic en cualquier punto de la celda. Aparecerán manejadores de selección alrededor de la celda.

2 Utilice los manejadores de selección para arrastrar la celda hasta obtener el tamaño deseado.

Celda de disposición

La celda se ajustará automáticamente a las celdas existentes (cuando se encuentre a una distancia de ocho píxeles de sus bordes).

Una celda de disposición no se puede superponer a otras celdas y no se puede ajustar su tamaño fuera de los límites de su tabla de disposición. Una celda de disposición siempre tendrá como mínimo el tamaño de su contenido.

Para mover una celda

1 Haga clic en el borde de la celda.

2 Arrastre o utilice las teclas de flecha para mover la celda hasta el lugar de la página que desee. La tecla de flecha la mueve de píxel en píxel; si mantiene presionada la tecla Mayús, se moverá de 10 en 10 píxeles.

Para cambiar el tamaño de una tabla

1 Haga clic en la ficha de tabla. Aparecerán manejadores de selección alrededor de la tabla de disposición.

2 Utilice los manejadores de selección para arrastrar la tabla hasta obtener el tamaño deseado.

La tabla se ajustará automáticamente a las celdas y tablas existentes (cuando se encuentre a una distancia de ocho píxeles de la celda existente). El tamaño de la tabla de disposición no puede quedar por debajo del límite de las celdas que contiene. La tabla tampoco puede superponerse a las tablas o celdas adyacentes.

Para mover una tabla

1 Haga clic en la ficha de tabla.

2 Arrastre o utilice las teclas de flecha para mover la tabla hasta el lugar de la página que desee. La tecla de flecha la mueve de píxel en píxel; si mantiene presionada la tecla Mayús, se moverá de 10 en 10 píxeles.

Configurar el ancho de la disposición

En la vista de Disposición puede utilizar dos tipos de anchos: fijo y autoampliable. El ancho aparece en el área de encabezado de la columna, en la parte superior de cada columna. El ancho fijo es un número específico, como 300 píxeles, y se muestra como un número. La opción Autoampliar configura el ancho para que cambie automáticamente según el tamaño de la ventana y se muestre como una línea ondulada. Con esta opción, la disposición siempre llena la ventana del navegador, independientemente del tamaño de ventana que haya establecido el usuario. Si bien el ancho fijo es la opción predeterminada, generalmente establecerá algunas celdas o tablas de disposición con ancho fijo y una con ancho autoampliable. La configuración elegida afectará a todas las celdas o tablas de esa columna. En una disposición sólo se puede definir una columna como autoampliable.

Por ejemplo, supongamos que la disposición tiene una barra de menú en la parte izquierda de la página, el título en la parte superior y el área de contenido principal en la parte derecha. Puede definir la columna izquierda con ancho fijo y el área de contenido principal

con ancho autoampliable.

Para definir un ancho autoampliable, lleve a cabo una de estas operaciones:

Acceda a la parte superior de la columna que desea definir como autoampliable y seleccione Hacer que la columna sea autoampliable en el menú Encabezado de columna. Sólo se puede definir una columna como autoampliable.

Seleccione la columna y, a continuación, haga clic en Autoampliar en el inspector de propiedades. 

Cuando usted define una columna como autoampliable, Dreamweaver inserta imágenes de espaciador en las columnas de ancho fijo para controlar la disposición. Una imagen de espaciador es una imagen transparente que no es visible en la ventana del navegador, pero que se utiliza para controlar el espaciado.

Para definir un ancho fijo, lleve a cabo una de estas operaciones:

Acceda a la parte superior de la columna que desea definir como fija y seleccione Hacer que la columna tenga ancho fijo en el menú Encabezado de columna.

Hacer que la columna tenga ancho fijo establece automáticamente el ancho de la columna para que coincida con el ancho del contenido de esa columna.

En el inspector de propiedades, haga clic en Fijo y escriba un valor numérico. Si introduce un valor numérico menor que el ancho del contenido, Dreamweaver establecerá automáticamente el ancho con el tamaño de píxeles correcto.

Algunas veces aparecen dos números en el menú Encabezado de columna: el ancho real de la columna y el ancho que aparece en el código HTML. Esto deberse a varias razones, por ejemplo, a que ha insertado contenido más amplio que el ancho dibujado o especificado. Conviene que el ancho sea igual para que sólo aparezca un número.

Para igualar el ancho (de modo que sólo se especifique el ancho real) seleccione Igualar ancho de celdas en el menú Encabezado de columna.

 

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *