Los colores HTML se suelen definir en notación hexadecimal con la combinación de valores RGB (Rojo, verde y azul). Los valores más cercanos a 00 serán más oscuros, mientras que los más cercanos a FF los más claros.

Tabla de colores HTML

A continuación se muestran los 216 colores básicos que podrá visualizar cualquier pc con al menos capacidad para visualizar una paleta de 256 colores. Actualmente todos los nuevos PCs soportan millones de colores, por lo que en principio, cualquier combinación RGB sería visible para el usuario.

Colores Estándares

Según los estándares de W3C hay listados hasta 16 nombres de colores válidos en HTML.

Los nombres deben escribirse en inglés y son los siguientes: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, y yellow.

Ejemplo de uso:

Para crear un documento HTML vacío en una nueva ventana de documento, realice una de estas operaciones:

• En Windows, elija Archivo > Nuevo desde una ventana de documento existente o elija Archivo > Nueva ventana desde la ventana Sitio.

Si abre la vista de Código (en la ventana de documento) o el inspector de código, podrá ver que el nuevo documento no está totalmente vacío, pues contiene etiquetas html, head y body para que pueda comenzar a trabajar. Mientras escriba en la vista de Diseño de la ventana de documento o inserte objetos tales como tablas e imágenes, podrá dejar abierto un editor de código y observar cómo se crea el código HTML.

Para abrir un archivo HTML existente, lleve a cabo una de estas operaciones:

Seleccione Archivo > Abrir.

Si el archivo se ha creado con Microsoft Word, elija Archivo > Importar > Importar HTML de Word.

Si elige Importar HTML de Word, Dreamweaver abre el archivo y le permite especificar opciones para eliminar código ajeno a HTML generado por Word. (Microsoft Word 97 y las versiones posteriores cuentan con el comando Guardar como HTML, que añade código HTML innecesario al convertir un documento a este formato.)

Nota: No se puede importar directamente un archivo de Microsoft Word (.doc) a Dreamweaver. Si desea importar el contenido de un archivo de Word, inicie Word y guarde el archivo como HTML antes de importar el archivo HTML resultante a Dreamweaver.

3.3 Para crear un nuevo documento basado en una plantilla

1 Elija Archivo > Nuevo de plantilla. Aparecerá un cuadro de diálogo con las plantillas disponibles para el sitio actual. Deberá crear plantillas antes de crear documentos basados en ellas (consulte Crear plantillas). Cuando crea un documento basado en una plantilla, algunas partes del documento quedan bloqueadas para que no puedan editarse. (El archivo de plantilla determina qué partes son editables y cuáles no.) Esto garantiza la coherencia en el uso de la plantilla en múltiples documentos de un mismo sitio.

2 Seleccione una plantilla y haga clic en Seleccionar. Se creará un nuevo documento basado en la plantilla. De forma predeterminada, las partes editables del nuevo documento quedan rodeadas por un borde azul. Todo el documento queda rodeado por un borde amarillo (de forma predeterminada) para recordarle que está basado en una plantilla y que, por tanto, algunas de sus partes están bloqueadas. (Para personalizar los colores de los bordes, consulte Definir preferencias de la plantilla.) Para modificar una parte editable de la plantilla, seleccione el contenido del marcador de posición en la región editable y sobrescríbalo. En algunos casos, no hay ningún contenido de marcador de posición en la región editable; en este caso, haga clic dentro de la región editable.

Para guardar un documento:

1 Seleccione Archivo > Guardar.

2 Proporcione un nombre para el archivo y vaya hasta el lugar en el que desea guardar el archivo.

Nota: Dreamweaver añade automáticamente .htm (Windows) o .html (Macintosh) al nombre del archivo cuando aparece el cuadro de diálogo. (Puede controlar la extensión de archivo que debe añadirse utilizan?do una opción de las preferencias generales.) Para guardar un archivo como texto normal en Windows, asígnele la extensión de nombre de archivo .txt. Para guardar un archivo como texto normal en Macintosh, sencillamente borre .html del nombre del archivo Macintosh. (Para que Dreamweaver vea el archivo como HTML de nuevo, guárdelo otra vez con la extensión .html o .htm.) Después de guardar un archivo como texto, Dreamweaver no interpreta ningún código HTML del archivo. Cuando guarde los documentos, evite utilizar espacios y caracteres especiales en los nombres de archivos y carpetas siempre que sea posible. En concreto, no utilice caracteres especiales (como é, ç o ¥) ni signos de puntuación (como dos puntos, barras inclinadas o puntos) en los nombres de archivos que desee colocar en un servidor remoto; muchos servidores cambian estos caracteres durante la carga, lo que provoca que se rompan los vínculos existentes con los archivos. Asimismo, no comience los nombres de los archivos con números.

3 Haga clic en el botón Guardar para guardar el archivo.

3.4 Cambiar el título de una página

El título de una página HTML ayuda a los visitantes del sitio a realizar un seguimiento de lo que ven mientras navegan, al tiempo que identifica la página en listas de historial y de marcadores. Si no asigna ningún título a una página, ésta aparecerá en la ventana del navegador y en las listas de marcadores y de historial como Untitled Document. Asignar un nombre de archivo al documento (al guardarlo) no equivale a asignar un título a la página. Para localizar todos los documentos sin título del sitio, utilice el comando Sitio > Informes; consulte Crear informes.

Para cambiar el título de una página:

1 Lleve a cabo una de estas operaciones:

Elija Modificar > Propiedades de la página. Haga clic en un espacio vacío de la página para asegurarse de que no hay nada seleccionado. Luego elija Propiedades de la página en el menú contextual haciendo clic con el botón izquierdo del ratón (Windows) o presionando Control mientras hace clic (Macintosh) en la ventana de documento.

Elija Ver > Contenido de Head y haga clic en el botón Título cuando aparezca éste; luego abra el inspector de propiedades.

Elija Ver > Barra de herramientas.

2 Introduzca el título de la página en el cuadro de texto Título.

3 Si está editando el título en el cuadro de diálogo Propiedades de la página, haga clic en Aceptar.El ?título aparecerá en la barra de título de la ventana de documento (y en la barra de herramientas si ésta se encuentra visible).El nombre de archivo de la página y la carpeta en la que está guardado el archivo aparecen entre paréntesis junto al título en la barra de título. Un asterisco indica que el documento contiene cambios que no se han guardado aún.

3.5 Definir una imagen de fondo o un color de página

Para definir una imagen o un color para el fondo de la página, utilice el cuadro de diálogo Propiedades de la página. Si utiliza tanto una imagen como un color de fondo, el color aparecerá mientras se descarga la imagen y luego la imagen cubrirá el color. Si la imagen de fondo contiene píxeles transparentes, el color de fondo se verá a través de ellos.

3.6 Para definir una imagen o un color de fondo

1 Elija Modificar > Propiedades de la página o seleccione Propiedades de la página en el menú contextual de la vista Diseño de la ventana de documento.

2 Para definir una imagen de fondo, haga clic en el botón Examinar, vaya hasta la imagen y selecciónela. Como alternativa,introduzca la ruta de acceso a la imagen de fondo en el cuadro Imagen de fondo. Dreamweaver forma un mosaico con la imagen de fondo (la repite) si ésta no ocupa toda la ventana del navegador. (Para evitar que se forme un mosaico con la imagen de fondo, utilice CSS -hojas de estilos en cascada- para desactivar la formación de mosaicos con la imagen. Consulte Utilizar hojas de estilos CSS.)

3 Para definir un color de fondo, haga clic en el cuadro Color de fondo y seleccione un color del selector de color. (Consulte Trabajar con color?es.)

3.7 Propiedades de la página

Utilice el cuadro de diálogo Propiedades de la página para especificar diversas opciones de la página. Para abrir el cuadro de diálogo Propiedades de la página, elija Modificar > Propiedades de la página.

Título especifica el título de la página que aparece en la barra de título de la ventana de documento y la ventana de la mayoría de los navegadores. Consulte Cambiar el título de una página.

Imagen de fondo y Fondo especifican una imagen y un color de fondo para la página. Consulte Definir una imagen de fondo o un color de página.

Texto y Vínculos definen los colores predeterminados de texto, vínculos, vínculos visitados y vínculos activos. Consulte Definir colores predeterminados ?de texto. También puede controlar estos colores utilizando hojas de estilos CSS; consulte Aplicar un estilo CSS personalizado (clase).

Margen izquierdo y Margen superior especifican los tamaños de los márgenes de la página en la etiqueta body para Microsoft Internet Explorer solamente. Netscape Navigator prescinde estos valores y utiliza los de Ancho del margen y Alto del margen. Para obtener un resultado óptimo en los dos navegadores, proporcione valores de márgenes para ambos navegadores en lugar de para uno solo; complete los cuatro valores de márgenes en lugar de sólo dos. Para asegurarse de que no aparecen márgenes en ningún navegador, configure los cuatro valores con el valor 0. Dreamweaver no muestra márgenes de página en la ventana de documento. Utilice Vista previa en el navegador para ver los márgenes.

Ancho del margen y Alto del margen especifican los tamaños de los márgenes de la página en la etiqueta body para Netscape Navigator solamente. Internet Explorer ignora estos valores y utiliza los de Margen izquierdo y Margen superior. Para obtener un resultado óptimo en los dos navegadores, proporcione valores de márgenes para ambos navegadores en lugar de para uno solo; complete los cuatro valores de márgenes en lugar de sólo dos. Para asegurarse de que no aparecen márgenes en ninguno de los dos navegadores, configure los cuatro valores con el valor 0. Dreamweaver no muestra márgenes de página en la ventana de documento. Utilice Vista previa en el navegador para ver los márgenes.

Codificación del doc. especifica la codificación empleada para los caracteres del documento. Para inglés y otros idiomas de Europa Occidental, elija Occidental. Otras opciones posibles son: centroeuropeo, cirílico, griego, islandés, japonés, chino tradicional, chino simplificado y coreano. Si no aparece ninguna opción para la codificación que desea utilizar, elija Otro para crear un documento con la codificación que use su sistema operativo. Todos los idiomas asiáticos utilizan codificación de doble byte.

Para cambiar las fuentes que emplea Dreamweaver para mostrar cada codificación, elija Edición > Preferencias y seleccione Fuentes/codificación. Las fuentes que seleccione en este panel de preferencias Fuentes/codificación no afectarán al modo en que los visitantes ven las páginas, ya que éstos especifican sus propias fuentes (para una determinada codificación) en los navegadores Web.

Imagen de rastreo especifica una imagen que se va a emplear como guía para copiar un diseño. Esta imagen sólo sirve como referencia, ya que no aparece cuando el documento se muestra en un navegador.

Imagen deter?mina la opacidad de la imagen de rastreo, desde completamente transparente hasta completamente opaca.

Carpeta de docs. muestra la carpeta en la que se guarda el documento actual, si ha sido guardado.

Carpeta del sitio muestra la ruta de la carpeta raíz local del sitio en la que se ha guardado el documento actual, en el caso de que se haya guardado.

3.8 Automatizar tareas

Al crear documentos, es posible que desee realizar la misma tarea muchas veces. En esta sección se explica cómo utilizar el panel Historial para automatizar tareas repetitivas.

Para repetir una serie de pasos una o dos veces, reprodúzcalos directamente desde el panel Historial, que graba los pasos conforme trabaja en un documento. (Para obtener información básica sobre el panel Historial, consulte Panel Historial.) Para automatizar una tarea que realiza a menudo, puede crear un nuevo comando que lleve a cabo esa tarea de manera automática.

Algunos movimientos del ratón, como hacer clic o arrastrar para seleccionar algún elemento de la ventana de documento, no se pueden reproducir ni guardar como parte de comandos guardados. Al realizar un movimiento de ese tipo, aparece una línea negra en el panel Historial (si bien esa línea no es visible hasta que realice otra acción). Para evitar movimientos que no pueden reproducirse, utilice las teclas de flecha en lugar del ratón para mover el punto de inserción dentro de la ventana de documento. Para realizar o ampliar una selección, mantenga presionada la tecla Mayús mientras presiona una tecla de flecha.

Nota: Si aparece una línea negra que indica un movimiento del ratón mientras está realiz?ando una tarea y desea repetirla más tarde, puede deshacer este paso e intentarlo de otra forma, quizá mediante la utilización de las teclas de flecha.

Hay otros pasos que tampoco pueden repetirse, como arrastrar un elemento a otro lugar de la página. Al dar un paso de ese tipo, aparece un icono de comando de menú con una pequeña X roja en el panel Historial.

Los pasos se reproducen exactamente tal y como se han realizado originalmente; no puede modificar los pasos mientras los reproduce. Por ejemplo, si anteriormente ha cambiado a rojo el color de la celda de una tabla y aplica ese paso a otra celda de la tabla, también cambiará el color de dicha celda. Sin embargo, no puede especificar un color distinto al aplicar el paso a una nueva celda.

3.9 Repetir pasos

Para repetir el último paso realizado, utilice el comando Edición > Repetir, o utilice el método abreviado de teclado Control+Y (Windows) o Comando+Y (Macintosh). El nombre de este comando cambia en el menú Edición para reflejar el último paso que ha dado. Por ejemplo, si ha escrito texto, el nombre del comando será Repetir Escritura. (No se puede utilizar el comando Repetir inmediatamente después de una operación de deshacer o de rehacer.)

Para repetir pasos que no sean el más reciente o para repetir varios pasos al mismo tiempo, utilice el panel Historial.

Observe que al reproducir pasos, los que se reproducen son los que están seleccionados (resaltados), no necesariamente el que está señalado actualmente por el dispositivo deslizante.

a) Para repetir un paso

En el panel Historial, seleccione el paso y haga clic en el botón Reproducir. El paso se reproducirá y aparecerá una copia suya en el panel Historial.

Para repetir una serie de pasos adyacentes:

1 Seleccione los pasos en el panel Historial mediante una de estas operaciones:

Arrastre desde un paso hasta otro. (No arrastre el dispositivo deslizante, sino tan sólo desde la etiqueta de texto de un paso hasta la etiqueta de texto de otro paso.)

Seleccione el primer paso y luego haga clic en el último paso mientras mantiene presionada la tecla Mayús, o bien seleccione el último paso y luego haga clic en el primer paso mientras mantiene presionada la tecla Mayús.

Nota: Aunque puede seleccionar una serie de pasos que incluyan una línea negra que indica el movimiento del ratón, dicho movimiento del ratón se omitirá cuando se reproduzcan los pasos.

2 Haga clic en Reproducir. Los pasos se reproducirán en orden y aparecerá un nuevo paso en el panel Historial con la etiqueta Reproducir pasos.

b) Para repetir pasos no adyacentes

1 Seleccione un paso y, a continuación, haga clic en otros pasos mientras presiona la tecla Control (Windows) o la tecla Comando1(Macintosh). También puede hacer clic mientras mantiene presionada la tecla Control o Comando para anular la selección de un paso seleccionado.

2 Haga clic en Reproducir.

Los pasos seleccionados se reproducirán en orden y aparecerá un nuevo paso en el panel Historial con la etiqueta Reproducir pasos.

c) Aplicar pasos a otro objeto

Puede aplicar una serie de pasos del panel Historial a cualquier objeto de la ventana de documento.

Para aplicar los pasos del panel Historial a un objeto nuevo:

1 Seleccione el objeto.

2 Seleccione el paso o los pasos relevantes en el panel Historial y, a continuación, haga clic en Reproducir.

d) Aplicar pasos a múltiples objetos

Si selecciona múltiples objetos en un documento y, a continuación, les aplica pasos desde el panel Historial, los objetos se considerarán como una única selección a la que Dreamweaver intentará aplicar los pasos. Por ejemplo, no puede seleccionar cinco imágenes y aplicar el mismo cambio de tamaño a cada una de ellas a la vez; el cambio de tamaño es una operación que debe aplicarse a cada imagen individual y no a una combinación colectiva de imágenes.

Para aplicar una serie de pasos a cada objeto de un conjunto de objetos, compruebe que el último paso de la serie selecciona el siguiente objeto del conjunto. El siguiente procedimiento demuestra este principio en un escenario concreto: establecer el espaciado vertical y horizontal de una serie de imágenes:

3.10 Para establecer el espaciado vertical y horizontal de una serie de imágenes

1 Comience con un documento en el que cada línea contenga una pequeña imagen (por ejemplo, una viñeta gráfica o un icono) seguida de texto. El objetivo es separar las imágenes del texto y de otras imágenes situadas por encima y por debajo de ellas.

2 Seleccione la primera imagen.

3 En el inspector de propiedades, haga clic en el botón de ampliación (la flecha de la esquina inferior derecha) si es necesario para ver todas las propiedades de la imagen.

4 Introduzca números en los cuadros de texto Espacio V y Espacio H para definir el espaciado de la imagen.

5 Haga clic en la barra de título de la ventana de documento (en lugar de hacerlo dentro de la ventana de documento) para que se encuentre activa la ventana de documento sin mover el punto de inserción.

6 Presione la tecla Flecha izquierda para mover el punto de inserción a la izquierda de la imagen. A continuación, presione la tecla Flecha abajo para mover el punto de inserción una línea hacia abajo, dejándolo justo a la izquierda de la segunda imagen de la serie. Seguidamente, presione Mayús+Flecha derecha para seleccionar esa segunda imagen.

Nota: No seleccione la imagen haciendo clic en ella. De lo contrario, no podrá reproducir todos los pasos.

7 Seleccione en el panel Historial los pasos correspondientes al cambio de espaciado de la imagen y la selección de la imagen siguiente. Haga clic en el botón Reproducir para reproducir esos pasos.

El espaciado de la imagen actual cambiará y se seleccionará la imagen siguiente.

8 Siga haciendo clic en Reproducir hasta que haya establecido correctamente el espaciado de todas las imágenes.

3.11 Copiar y pegar pasos entre documentos

Todos los documentos abiertos tienen su propio historial de pasos. Puede copiar los pasos de un documento y pegarlos en otro.

Nota: Copiar pasos (un botón del panel Historial) es diferente a Copiar (en el menú Edición). No se puede utilizar Edición > Copiar para copiar pasos, aunque sí se utiliza Edición > Pegar para pegarlos.

Al cerrar un documento se borra su historial. Si sabe que va a querer utilizar los pasos de un documento después de cerrarlo, cópielos con Copiar pasos ?(o guárdelos como un comando; consulte Crear comandos nuevos a partir del historial) antes de cerrar el documento.

Hay que tener cuidado al copiar pasos que incluyan los comandos Copiar o Pegar.

• No utilice Copiar pasos si uno de los pasos es un comando Copiar, ya que es posible que no pueda pegar dichos pasos de la manera deseada.

• Si entre los pasos figura un comando Pegar, no podrá pegar dichos pasos a no ser que los pasos también incluyan un comando Copiar antes del comando Pegar.

Si pega pasos en un editor de texto o en la vista de Código o el inspector de código, aparecerán como código JavaScript. Esta opción puede resultar útil para aprender a escribir secuencias de comandos.

3.12 Para reutilizar los pasos de un documento en otro

1 Comience desde el documento que contiene los pasos que desea reutilizar.

2 Seleccione los pasos del panel Historial.

3 Haga clic en el botón Copiar pasos del panel Historial para copiar dichos pasos.

4 Abra el otro documento.

5 Coloque el punto de inserción donde desee o seleccione un objeto para aplicarle los pasos.

6 Elija Edición > Pegar para pegar los pasos. Los pasos se reproducirán a medida que se peguen en el panel Historial del documento. El panel Historial los muestra como un solo paso, denominado Pegar pasos.

Volver arriba

IV. INTRODUCCIÓN A LA DISPOSICIÓN

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.

4.1 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.

4.2 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.

4.2.1 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.

4.2.2 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 ce?lda. 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 apa?recerá 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.

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.

4.2.3 Aplicar formato a una celda de disposición

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.

4.2.4 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 borr?ar 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.

4.2.5 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.

4.2.6 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.

4.2.7 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.

4.2.8 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.

4.2.9 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.

4.2.10 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.

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.

4.2.11 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.

4?.2.12 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.

4.2.13 Para mover una tabla

1 Haga clic en la ficha de tabla.

2 Arrastre o utilice la?s 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.

4.2.14 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 colu?mna 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.

Volver arriba