PDF de programación - Uso de Dreamweaver CS5

Última modificación 27/4/2010

USO DE DREAMWEAVER CS5
Maquetación de páginas con HTML

184

Las celdas, filas o columnas que no estén todavía seleccionadas se añadirán a la selección. Las que ya lo estén, se
eliminarán de la selección.

Cambio del color de resaltado para elementos de la tabla
1 Seleccione Edición > Preferencias (Windows) o Dreamweaver > Preferencias (Macintosh).
2 Seleccione Resaltando en la lista Categoría de la izquierda, realice uno de los siguientes cambios y haga clic en

Aceptar.

Para cambiar el color de resaltado de los elementos de tabla, haga clic en el cuadro Color al pasar el ratón por encima
y seleccione un color de resaltado con el selector de color (o bien escriba el valor hexadecimal del color de resaltado
en el cuadro de texto).

Para activar o desactivar el resaltado de los elementos de la tabla, active o desactive la selección de la opción Mostrar

correspondiente a Ratón por encima.

Nota: Estas opciones afectan a todos los objetos, como elementos con posición absoluta (elementos PA), que
Dreamweaver resalta cuando se pasa el puntero del ratón sobre ellos.

Establecimiento de las propiedades de una tabla
Puede utilizar el inspector de propiedades para editar tablas.
1 Seleccione una tabla.
2 En el inspector de propiedades (Ventana > Propiedades), cambie las propiedades que sean necesarias.
Id de tabla Especifica un ID para la tabla.
Filas y Cols Número de filas y columnas que tendrá la tabla.
An El ancho de la tabla en píxeles o como porcentaje del ancho de la ventana del navegador.
Nota: Normalmente no es preciso especificar el alto de una tabla.
Rell. celda Determina el número de píxeles entre el contenido de una celda y los límites de la misma.
Esp. celda Número de píxeles entre celdas de tabla contiguas.
Alinear Determina dónde aparecerá la tabla en relación con otros elementos del mismo párrafo, como por ejemplo
texto o imágenes.
Izquierda alinea la tabla a la izquierda de los demás elementos (por lo que el texto del mismo párrafo se ajusta alrededor
de la tabla a la derecha); Derecha alinea la tabla a la derecha de los demás elementos (con el texto ajustado alrededor a
la izquierda); y Centro centra la tabla (con el texto encima y/o debajo de la tabla). Predeterminado indica que el
navegador debe utilizar su alineación predeterminada.

Si la alineación está establecida como Predeterminado, no se muestra otro contenido junto a la tabla. Para mostrar
una tabla junto a otro contenido, utilice la alineación Izquierda o Derecha.

Borde Especifica el ancho en píxeles de los bordes de la tabla.

Si no se especifican los valores de borde o espaciado y relleno de celda, la mayoría de los navegadores mostrará la tabla
con los bordes y el relleno de celda configurado en 1 y el espaciado de celda configurado en 2. Para garantizar que los
navegadores muestren la tabla sin relleno ni espaciado, establezca Borde con el valor 0 y Relleno celda y Espacio celdas
con el valor 0. Para ver los límites de las celdas y la tabla cuando el borde es 0, seleccione Ver > Ayudas visuales > Bordes
de tabla.
Clase Establece una clase CSS en la tabla.

Última modificación 27/4/2010

USO DE DREAMWEAVER CS5
Maquetación de páginas con HTML

185

Nota: Es posible que tenga que expandir el inspector de propiedades de tabla para ver las siguientes opciones. Para
expandir el inspector de propiedades de tabla, haga clic en la flecha de expansión situada en la esquina inferior derecha.
Borrar ancho de columna y Borrar alto de fila eliminan todos los valores especificados para el ancho de columna y alto
de fila de la tabla.
Convertir ancho de tabla a píxeles y Convertir altos de tabla a píxeles establecen el ancho o el alto de todas las
columnas de la tabla en su ancho actual en píxeles (también establecen el ancho de toda la tabla en su ancho actual en
píxeles).
Convertir ancho de tabla a porcentaje y Convertir altos de tabla a porcentaje establecen el ancho o el alto de todas las
columnas de la tabla en su ancho actual expresado como porcentaje del ancho de la ventana de documento (también
establecen el ancho de toda la tabla en su ancho actual como porcentaje del ancho de la ventana de documento).
Si ha introducido un valor en un cuadro de texto, presione el tabulador o la tecla Intro (Windows) o Retorno
(Macintosh) para aplicar el valor.

Configuración de las propiedades de celdas, filas o columnas
Puede utilizar el inspector de etiquetas para editar celdas y filas de una tabla.
1 Seleccione la columna o fila.
2 En el inspector de propiedades (Ventana > Propiedades), establezca las siguientes opciones:
Horiz Especifica la alineación horizontal del contenido de una celda, fila o columna. Puede alinear el contenido a la
izquierda, a la derecha o al centro de la celda, o bien especificar que se utilice la alineación predeterminada del
navegador (generalmente a la izquierda para celdas normales y al centro para celdas de encabezado).
Vert Especifica la alineación vertical del contenido de una celda, fila o columna. Puede alinear el contenido con la
parte superior, media, inferior o con la línea de base de la celda, o especificar que se utilice la alineación
predeterminada del navegador (generalmente al medio).
An (Ancho) y Al (Alto) Ancho y alto de las celdas seleccionadas en píxeles o como porcentaje del ancho o alto total de
la tabla. Para especificar un porcentaje, introduzca el símbolo de porcentaje (%) tras el valor. Para que el navegador
determine el ancho o alto apropiado en función del contenido de la celda, y el ancho y alto del resto de las columnas y
filas, deje el campo en blanco (el valor predeterminado).
De forma predeterminada, un navegador selecciona el alto de fila y el ancho de columna de manera que pueda contener
la imagen más ancha o la línea más larga en una columna. Por esta razón, algunas veces el ancho de una columna
resulta mucho más grande que el de otras columnas de la tabla cuando se le añade contenido.
Nota: Puede especificar el alto como porcentaje del alto total de la tabla, aunque quizás la fila no se muestre en los
navegadores con el porcentaje de alto especificado.
Fnd El color de fondo de una celda, columna o fila elegido mediante el selector de color.
Combinar celdas Combina las celdas, filas o columnas seleccionadas para crear una sola celda. Sólo pueden
combinarse celdas que constituyan una bloque rectangular o lineal.
Dividir celda Divide una celda para crear dos o más celdas. Sólo puede dividirse una celda cada vez, por lo que este
botón estará desactivado al seleccionar más de una celda.
No aj. Impide el ajuste de línea, manteniéndose todo el texto de una celda en una sola línea. Cuando la opción No aj.
está activada, las celdas se adaptarán para incluir todos los datos a medida que se introducen o pegan en una celda.
(Habitualmente, las celdas se expanden horizontalmente para incluir la palabra más larga o la imagen más grande en
la celda y, a continuación, se expanden verticalmente cuando es necesario adaptarse a otros contenidos.)

Última modificación 27/4/2010

USO DE DREAMWEAVER CS5
Maquetación de páginas con HTML

186

Encabezado Aplica a la celda seleccionada el formato de celdas de encabezado de tabla. De forma predeterminada, el
contenido de las celdas de encabezado de la tabla aparecerá en negrita y centrado.

El alto y el ancho pueden especificarse en píxeles o porcentajes y pueden convertirse de una unidad a otra.

Nota: Al establecer las propiedades de una columna, Dreamweaver modifica los atributos de la etiqueta td
correspondientes a cada celda de la columna. Sin embargo, al establecer algunas de las propiedades de una fila,
Dreamweaver modifica los atributos de la etiqueta tr en lugar de los atributos de cada etiqueta td de la fila. Al aplicar
el mismo formato a todas las celdas de una fila mediante la etiqueta tr se obtiene un código HTML más claro y conciso.
3 Presione el tabulador o la tecla Intro (Windows) o Retorno (Macintosh) para aplicar el valor.

Utilización del modo de tablas expandidas para facilitar la edición de tablas
El modo de tablas expandidas añade temporalmente relleno y espaciado de celda a las tablas de un documento y
aumenta los bordes de las tablas para facilitar la edición. Este modo permite seleccionar elementos de las tablas o
colocar el punto de inserción de forma precisa.
Por ejemplo, puede ampliar una tabla para colocar el punto de inserción en la parte izquierda o derecha de una imagen,
sin seleccionar por error la imagen o la celda de tabla.

A. Tabla en modo estándar B. Tabla en modo de tablas expandidas

A

B

Nota: Una vez que haya realizado su selección o haya colocado el punto de inserción, vuelva al modo Estándar de la vista
Diseño para llevar a cabo sus modificaciones. Algunas operaciones visuales como el cambio de tamaño no darán los
resultados esperados en el modo de tablas expandidas.

Cambio al modo de tablas expandidas
1 Si está trabajando en la vista Código, seleccione Ver > Diseño o Ver > Código y diseño (no puede pasar al modo de

tablas expandidas desde la vista Código).

2 Siga uno de estos procedimientos:
Seleccione Ver > Modo de tabla > Modo de tablas expandidas.
En la categoría Diseño del panel Insertar, haga clic en Modo de tablas expandidas.
En la parte superior de la ventana de documento aparece una barra etiquetada como Modo de tablas expandidas.
Dreamweaver añade relleno y espaciado de celdas a todas las tablas de la página y aumenta sus bordes.

Salida del modo de tablas expandidas
❖ Siga uno de estos procedimientos:
Haga clic en Salir en la barra etiquetada Modo de tablas expandidas de la parte superior de la ventana Documento.
Seleccione Ver > Modo de tabla > Modo estándar.
En la categoría Diseño del panel Insertar, haga clic en Modo estándar.

Última modificación 27/4/2010

USO DE DREAMWEAVER CS5
Maquetación de páginas con HTML