Diseño de páginas web

Transcripción

1 Diseño de páginas web Modo en vista disposición Ricardo Esteban Alonso

2 Vista de disposición Ayuda a simplificar el uso de tablas en la disposición de páginas, y además las celdas se pueden dibujar, personalizar y colocarlas en donde queramos. La disposición puede tener un ancho fijo u ocupar toda la ventana del navegador. Para utilizar la vista de disposición hay que salir de la vista estándar de dw. Para cambiar a vista de disposición: Ver > Vista de tabla > Vista de disposición. Vista de disposición del panel Objetos > Común. Cuando se crea una tabla en la vista estándar de dw y se cambia a la vista de disposición, la tabla contiene celdas de disposición vacías que se deben borrar. Vista disposición 9.-1

3 Celdas y tablas de disposición (1) Cuando se inserta una celda se crea de forma automática una tabla, y para conseguir mejores resultados de la página es mejor utilizar múltiples tablas de disposición. Cuando se pulsa el botón de Dibujar celda de disposición, el puntero del ratón se convierte en un signo más (+). Para incluir la celda se sitúa el puntero en la parte de la página donde queramos que comience la celda, y después se arrastra para crear la celda. Para crear varias celdas o tablas sin necesidad de hacer clic, se mantiene pulsada la tecla Control. La celda aparece con un contorno azul, y su tamaño se muestra en el encabezado de la columna. La tabla de un contorno azul. Los espacios grises de la página indican las áreas donde no se puede añadir contenido. Las celdas y tablas no pueden superponerse, y se ajustan automáticamente a un lado de la página si se dibujan cerca del borde (a una distancia de 8 px). Para desactivar de forma temporal el ajuste se mantiene pulsada la tecla Alt. Cuando la página ya tiene un contenido cualquiera, sólo se puede dibujar una tabla de disposición debajo del contenido. Vista disposición 9.-2

4 Celdas y tablas de disposición (2) Todas las celdas y tablas se pueden mover o cambiar de tamaño, con los manejadores de selección. Después de insertar contenido en las celdas se puede borrar el alto que sobra, seleccionando para ello, 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. Igual se puede hacer para la tabla con el botón Borrar alto de fila del inspector de propiedades. Vista disposición 9.-3

5 Formato de celdas y tablas de disposición Se dispone de las siguientes opciones: Ancho Fijo o Autoampliar, se puede cambiar el Alto, establecer un color de fondo para la celda, seleccionar la alineación horizontal (Izquierda, Centro, Derecho o Predeterminado), la alineación del contenido vertical como Superior, Medio, Inferior; Línea de base o Predeterminado. Se puede seleccionar No aj. para evitar que se ajuste el texto, y así la celda se amplía para que quepa todo el contenido sin pasar a una nueva línea. Para las tablas de disposición se dispone del Relleno de celda, especificado en píxeles, para ver la cantidad de espacio que habrá entre el contenido de una celda y el límite de la misma. Si aparecen dos números en el área de encabezado de la columna, se utiliza la opción igualar ancho; la opción Espaciado de celda nos sirve para establecer la cantidad de espacio que habrá entre cada celda. Se pueden borrar los valores de alto de todas las celdas de la tabla. Las imágenes de espaciador se tratan en la diapositiva siguiente Vista disposición 9.-4

6 Configurar el ancho de disposición La opción Autoampliar configura el ancho para que cambie automáticamente según el tamaño de la ventana y se muestra como una línea ondulada, y así siempre se llena ka ventana del navegador. Sólo una columna se puede definir como autoampliable. Cuando se define una columna como autoampliable, dw 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, y que se puede dejar que dw las añada automáticamente. Las columnas que contienen imágenes de espaciador presentan una doble barra en la parte superior. Al definir una columna como autoampliable se elige Agregar imagen de espaciador en el menú Encabezado de columna y para configurar la imagen de espaciador en el cuadro de diálogo se dispone de: Indicar a dw dónde crear el archivo de imagen de espaciador, que será mejor almacenarla en la carpeta donde estén las imágenes. Acceder a archivo de imagen de espaciador existente, que deberá ser un GIF transparente de 1 x 1 píxel Vista disposición 9.-5