. De manera predeterminada, los navegadores se suministran con hojas de estilos que definen la fuente y el tamaño del texto del párrafo (es decir, el texto situado entre etiquetas
en el código HTML). En Internet Explorer, por ejemplo, todo el texto del cuerpo, incluido el texto de los párrafos, se muestra de manera predeterminada con la fuente Times New Roman, Mediana. Sin embargo, como autor de una página, puede crear una hoja de estilos que anule el estilo predeterminado del navegador para la fuente de párrafo y el tamaño de fuente. Por ejemplo, puede crear la siguiente regla en su hoja de estilos: p { font-family: Arial; font-size: small; }
Cuando un usuario carga la página, la configuración de fuente de párrafo y de tamaño de fuente establecida por usted como autor de la página anula la configuración de texto de párrafo del navegador. Los usuarios pueden elegir opciones para personalizar de forma óptima la visualización en el navegador para su propio uso. En Internet Explorer, por ejemplo, el usuario puede seleccionar Ver > Tamaño de texto > Más grande para ampliar la fuente de página a un tamaño más legible si considera que la fuente es demasiado pequeña. En último término (al menos en este caso), la opción seleccionada por el usuario anula los estilos predeterminados por el navegador para tamaño de fuente y los estilos de párrafo creados por el autor de la página Web. La herencia es otro aspecto importante de los estilos en cascada. Las propiedades de la mayoría de los elementos de una página Web son heredadas: por ejemplo, las etiquetas de párrafo heredan determinadas propiedades de las etiquetas de cuerpo, las etiquetas de lista de viñetas heredan determinadas propiedades de las etiquetas de párrafo, etc. Por consiguiente, si crea la siguiente regla en su hoja de estilos:
USO DE DREAMWEAVER CS4 140 Creación de páginas con CSS
body { font-family: Arial; font-style: italic; }
Todo el texto de los párrafos de la página Web (así como el texto que hereda propiedades de la etiqueta de párrafo) será Arial cursiva porque la etiqueta de párrafo hereda estas propiedades de la etiqueta de cuerpo. No obstante, puede hacer que sus reglas sean más específicas creando estilos que anulen la formula estándar de herencia. Por ejemplo, si crea las siguientes reglas en su hoja de estilos: body { font-family: Arial; font-style: italic; } p { font-family: Courier; font-style: normal; }
Todo el texto de cuerpo será Arial cursiva excepto el texto de los párrafos (y su texto heredado), que se mostrará como Courier normal (sin cursiva). Técnicamente, la etiqueta de párrafo hereda primero las propiedades que se establecen para la etiqueta de cuerpo, pero luego omite estas propiedades porque tiene definidas sus propias propiedades. Dicho de otro modo, aunque los elementos de página generalmente heredan las propiedades de arriba, la aplicación directa de una propiedad a una etiqueta siempre provoca la anulación de la fórmula estándar de herencia. La combinación de todos los factores descritos anteriormente, a los que se suman otros como la especificidad de CSS (un sistema que pondera de diferente forma cada tipo de regla CSS) y el orden de las reglas CSS, crean en último término una cascada compleja en la que los elementos con mayor prioridad anulan las propiedades de los que tienen menor prioridad. Para más información sobre las reglas que determinan la cascada, la herencia y la especificidad, visite www.w3.org/TR/CSS2/cascade.html.
Aplicación de formato a texto y CSS De forma predeterminada, Dreamweaver utiliza hojas de estilos en cascada (CSS) para aplicar formato al texto. Los estilos que se aplican al texto mediante el inspector de propiedades o los comandos de menú crean reglas CSS que se incrustan en la sección head del documento actual. También puede utilizarse el panel Estilos CSS para crear y editar reglas y propiedades CSS. El panel Estilos CSS es un editor más eficaz que el inspector de propiedades y muestra todas las reglas CSS definidas para el documento actual, con independencia de si están incrustadas en la sección head del documento o si están en una hoja de estilos externa. Adobe recomienda utilizar el panel Estilos CSS (en lugar del inspector de propiedades) como herramienta principal para la creación y edición de hojas de estilos en cascada. Como resultado, el código será más limpio y más fácil de mantener. Además de los estilos y de las hojas de estilos que cree, puede usar hojas de estilos suministradas con Dreamweaver para aplicarlas a los documentos. Para ver un tutorial sobre la aplicación de formato al texto con CSS, consulte www.adobe.com/go/vid0153_es.
Véase también “Adición y aplicación de formato al texto” en la página 233 “Acerca del panel Estilos CSS” en la página 142
USO DE DREAMWEAVER CS4 141 Creación de páginas con CSS
“Creación de una nueva regla CSS” en la página 146 Aplicación de formato al texto con el tutorial de CSS
Propiedades de la notación CSS abreviada La especificación CSS permite crear estilos mediante una sintaxis abreviada conocida como notación CSS abreviada. La notación CSS abreviada permite especificar los valores de diversas propiedades con una sola declaración. Por ejemplo, la propiedad font permite definir las propiedades font-style, font-variant, font-weight, font-size, line-height y font-family en una única línea. Un aspecto esencial que debe tenerse en cuenta cuando se utiliza CSS en forma abreviada es que a los valores omitidos en una propiedad CSS en forma abreviada se les asignan sus valores predeterminados. Esto puede hacer que las páginas se muestren de forma incorrecta cuando hay dos o más reglas CSS asignadas a la misma etiqueta. Por ejemplo, la regla h1 que se muestra a continuación utiliza la sintaxis CSS sin abreviar. Observe que a las propiedades font-variant, font-stretch, font-size-adjust y font-style se les han asignado sus valores predeterminados. h1 { font-weight: bold; font-size: 16pt; line-height: 18pt; font-family: Arial; font-variant: normal; font-style: normal; font-stretch: normal; font-size-adjust: none }
La misma etiqueta podría tener el aspecto siguiente si se especificara como única propiedad en forma abreviada: h1 { font: bold 16pt/18pt Arial }
Con la notación abreviada, se asignan los parámetros predeterminados a los valores omitidos. Así, en el ejemplo de notación abreviada anterior se omiten las etiquetas font-variant, font-style, font-stretch y font-sizeadjust. Si tiene estilos definidos en más de una ubicación (por ejemplo, incluidos en una página HTML e importados de una hoja de estilos externa) y se ha utilizado tanto el formato abreviado como el formato no abreviado en la sintaxis CSS, tenga en cuenta que las propiedades omitidas en una regla de notación abreviada pueden tener prioridad (cascada) sobre las propiedades que están definidas explícitamente en otra regla. Por este motivo, Dreamweaver utiliza la notación CSS no abreviada de forma predeterminada. Con ello se evitan posibles problemas causados por una regla de notación abreviada que tenga prioridad sobre una regla con formato no abreviado. Si abre una página Web codificada con notación CSS abreviada en Dreamweaver, tenga en cuenta que Dreamweaver creará las nuevas reglas CSS en formato no abreviado. Puede especificar el modo en que Dreamweaver crea y edita las reglas CSS mediante la modificación de las preferencias de edición de CSS en la categoría Estilos CSS del cuadro de diálogo Preferencias (Edición > Preferencias en Windows; Dreamweaver > Preferencias en Macintosh). Nota: El panel Estilos CSS crea reglas empleando la notación no abreviada. Si crea una página o una hoja de estilos CSS mediante el panel Estilos CSS, tenga en cuenta que la codificación manual de reglas CSS mediante notación abreviada puede provocar que las propiedades en formato abreviado tengan prioridad sobre las creadas con la notación no abreviada. Por este motivo, utilice la notación CSS no abreviada para crear sus estilos.
USO DE DREAMWEAVER CS4 142 Creación de páginas con CSS
Creación y administración de CSS Acerca del panel Estilos CSS El panel Estilos CSS permite supervisar las reglas y propiedades CSS que afectan al elemento de página seleccionado (modo Actual) o todas las reglas y propiedades que afectan al documento (modo Todo). Un botón situado en la parte superior del panel permite cambiar entre estos dos modos. El panel Estilos CSS también le permite modificar propiedades CSS tanto en modo Todo como en modo Actual. Consulte las dos secciones siguientes para obtener información sobre el panel Estilos CSS en los modos Todo y Actual.
El panel Estilos CSS en modo Actual En modo Actual, el panel Estilos CSS muestra tres secciones: un panel denominado Resumen de la selección que muestra las propiedades de CSS de la selección actual del documento, un panel denominado Reglas que muestra la ubicación de las propiedades seleccionadas (o una cascada de reglas para la etiqueta seleccionada, en función de la selección) y un panel denominado Propiedades que permite editar las propiedades CSS de la regla aplicada a la selección.
Puede cambiar el tamaño de los paneles arrastrando los bordes que los separan, y el tamaño de las columnas arrastrando las líneas de división. El panel Resumen de la selección muestra un resumen de propiedades CSS y sus valores para el elemento seleccionado en el documento activo. El resumen muestra las propiedades de todas las reglas que afectan directamente a la selección. Sólo se muestran las propiedades establecidas. Por ejemplo, las siguientes reglas crean un estilo de clase y un estilo de etiqueta (en este caso de párrafo):
USO DE DREAMWEAVER CS4 143 Creación de páginas con CSS
.foo{ color: green; font-family: 'Arial'; } p{ font-family: 'serif'; font-size: 12px; }
Al seleccionar texto de un párrafo con el estilo de clase .foo en la ventana de documento, el panel Resumen de la selección muestra las propiedades correspondientes para ambas reglas, dado que ambas afectan a la selección. En este caso, el panel Resumen de la selección mostraría las propiedades siguientes: font-size: 12px font-family: 'Arial' color: green
El panel Resumen de la selección organiza las propiedades por orden creciente de especificidad. En el ejemplo anterior, el estilo de etiqueta define el tamaño de fuente y el estilo de clase define la familia de fuentes y el color. (La familia de fuentes definida por el estilo de clase tiene prioridad sobre la familia de fuentes definida por el estilo de etiqueta porque los selectores de clase son más específicos que los selectores de etiquetas. Para más información sobre la especificidad de CSS, consulte www.w3.org/TR/CSS2/cascade.html.) El panel Reglas muestra dos vistas distintas (vista Acerca de o vista Reglas) en función de la selección realizada. En la vista Acerca de (la vista predeterminada), el panel muestra el nombre de la regla que define la propiedad CSS seleccionada y la ubicación del archivo que contiene la regla. En la vista Reglas, el panel muestra una cascada o jerarquía de reglas que afectan, directa o indirectamente, a la selección actual. (La etiqueta a la que se aplica la regla directamente aparece en la columna de la derecha.) Puede cambiarse entre las dos vistas haciendo clic en los botones Mostrar información y Mostrar reglas en cascada en la esquina superior derecha del panel Reglas. Al seleccionar una propiedad del panel Resumen de la selección, todas las propiedades de la regla de definición aparecen en el panel Propiedades. (La regla de definición también se selecciona en el panel Reglas si la vista Reglas está activada.) Por ejemplo, si tiene una regla denominada .maintext que define una familia de fuentes, un tamaño de fuente y un color, la selección de cualquiera de las propiedades del panel Resumen de la selección mostrará todas las propiedades definidas por la regla .maintext en el panel Propiedades, así como la regla .maintext seleccionada en el panel Reglas. (Además, la selección de cualquier regla del panel Reglas muestra las propiedades de dicha regla en el panel Propiedades.) Posteriormente podrá utilizar el panel Propiedades para modificar rápidamente la CSS tanto si está incrustada en el documento actual como si está vinculada a través de una hoja de estilos adjunta. De manera predeterminada, el panel Propiedades sólo muestra las propiedades que ya se han establecido y las ordena por orden alfabético. Puede optar por mostrar el panel Propiedades en otras dos vistas. La vista de categoría muestra las propiedades agrupadas en categorías, como Fuente, Fondo, Bloque, Borde, etc., con las propiedades situadas en la parte superior de cada categoría y mostradas en texto azul. La vista de lista muestra una lista alfabética de todas las propiedades y también sitúa las propiedades establecidas en la parte superior con texto azul. Para cambiar entre estas vistas, haga clic en los botones Mostrar vista de categoría, Mostrar vista de lista o Mostrar sólo las propiedades establecidas, situados en la parte inferior izquierda del panel Propiedades. En todas las vistas, las propiedades establecidas aparecen en color azul; las propiedades que no son pertinentes para la selección aparecen tachadas con una línea de color rojo. Al pasar el cursor por encima de una regla que no es importante aparecerá un mensaje donde se indicará el motivo por el cual dicha regla no tiene importancia. Normalmente las propiedades son irrelevantes porque se anulan o porque no son propiedades que se han heredado. Todos los cambios que realice en el panel Propiedades se aplican de forma inmediata; de este modo, podrá previsualizar el trabajo a medida que lo vaya llevando a cabo.
USO DE DREAMWEAVER CS4 144 Creación de páginas con CSS
Véase también “Apertura del panel Estilos CSS” en la página 145
El panel Estilos CSS en modo Todo En modo Todo, el panel Estilos CSS muestra tres secciones: un panel denominado Todas las reglas arriba y un panel denominado Propiedades abajo. El panel Todas las reglas muestra una lista de reglas definidas en el documento actual, así como las reglas definidas en las hojas de estilo adjuntas al documento actual. El panel Propiedades le permite editar propiedades CSS para cualquier regla seleccionada en el panel Todas las reglas.
Puede cambiar el tamaño de cada panel arrastrando el borde que los separa y el tamaño de las columnas de propiedades arrastrando sus líneas de división. Al seleccionar una regla del panel Todas las reglas, aparecen todas las propiedades que se definen en dicha regla en el panel Propiedades. Posteriormente podrá utilizar el panel Propiedades para modificar rápidamente la CSS tanto si está incrustada en el documento actual como si está vinculada a través de una hoja de estilos adjunta. De manera predeterminada, el panel Propiedades sólo muestra las propiedades que se han establecido anteriormente y las ordena por orden alfabético. Puede optar por mostrar las propiedades en otras dos vistas. La vista de categoría muestra las propiedades agrupadas en categorías, como Fuente, Fondo, Bloque, Borde, etc., con las propiedades situadas en la parte superior de cada categoría. La vista de lista muestra una lista alfabética de todas las propiedades y también sitúa las propiedades establecidas en la parte superior. Para cambiar entre estas vistas, haga clic en los botones Mostrar vista de categoría, Mostrar vista de lista o Mostrar sólo las propiedades establecidas, situados en la parte inferior izquierda del panel Propiedades. En todas las vistas, las propiedades establecidas se muestran en color azul. Todos los cambios que realice en el panel Propiedades se aplican de forma inmediata; de este modo, podrá previsualizar el trabajo a medida que lo vaya llevando a cabo.
Véase también “Apertura del panel Estilos CSS” en la página 145
USO DE DREAMWEAVER CS4 145 Creación de páginas con CSS
Botones y vistas del panel Estilos CSS En ambos modos, Todo y Actual, el panel Estilos CSS contiene tres botones que permiten modificar la vista del panel Propiedades (el panel inferior):
A
B
C
A. Vista de categoría B. Vista de lista C. Vista de las propiedades establecidas
Vista de categoría Divide las propiedades CSS compatibles con Dreamweaver en ocho categorías: fuente, fondo, bloque, borde, cuadro, lista, posición y extensiones. Las propiedades de cada categoría se encuentran en una lista que se puede expandir o contraer haciendo clic en el botón con el signo más (+) que aparece al lado del nombre de la categoría. Las propiedades aparecen (en color azul) en la parte superior de la lista. Vista de lista Muestra todas las propiedades CSS compatibles con Dreamweaver por orden alfabético. Las propiedades aparecen (en color azul) en la parte superior de la lista. Vista de las propiedades establecidas Sólo muestra las propiedades que se han establecido. La vista de propiedades establecidas es la vista predeterminada.
En ambos modos, Todo y Actual, el panel Estilos CSS también contiene los siguientes botones:
A
B
C
D
A. Adjuntar hoja de estilos B. Nueva regla CSS C. Editar estilo D. Eliminar regla CSS
Adjuntar hoja de estilos Abre el cuadro de diálogo Vincular hoja de estilos externa. Seleccione una hoja de estilos externa para adjuntar o para importar al documento actual. Nueva regla CSS Abre un cuadro de diálogo en el que es posible seleccionar el tipo de estilo que va a crear (por ejemplo, para crear un estilo de clase, redefinir una etiqueta HTML o definir un selector CSS). Editar estilo Abre un cuadro de diálogo en el que es posible editar los estilos del documento actual o de una hoja de
estilos externa. Eliminar regla CSS Elimina el estilo o la propiedad seleccionada del panel Estilos CSS, así como el formato de cualquier
elemento al que se haya aplicado. (Sin embargo, no elimina las propiedades de clase o ID a las que hace referencia dicho estilo.) El botón Eliminar regla CSS también permite anular la asociación (o “desvincular”) una hoja de estilos CSS adjunta. Haga clic con el botón derecho (Windows) o mantenga presionada la tecla Control y haga clic (Macintosh) en el panel Estilos CSS para abrir un menú contextual de opciones de trabajo con comandos de la hoja de estilos CSS.
Apertura del panel Estilos CSS El panel Estilos CSS le permite ver, crear, editar y quitar estilos CSS, además de adjuntar hojas de estilos externas a los documentos. ❖ Siga uno de estos procedimientos:
• Seleccione Ventana > Estilos CSS. • Presione Mayús+F11. • Haga clic en el botón CSS del inspector de propiedades.
USO DE DREAMWEAVER CS4 146 Creación de páginas con CSS
Configuración de las preferencias de Estilos CSS Las preferencias de estilos CSS controlan la forma en que Dreamweaver escribe el código que define los estilos CSS. Los estilos CSS se pueden escribir utilizando una notación abreviada que resulta más fácil para algunos usuarios. Sin embargo, algunas versiones antiguas de los navegadores no interpretan correctamente la forma abreviada. 1 Seleccione Edición > Preferencias (Windows) o Dreamweaver > Preferencias (Macintosh) y seleccione Estilos CSS
en la lista Categoría. 2 Configure las opciones de estilos CSS que desea aplicar: Al crear reglas CSS Usar forma abreviada Permite seleccionar qué propiedades de estilos CSS escribe Dreamweaver
con notación abreviada. Al editar reglas CSS Usar forma abreviada Controla si Dreamweaver debe volver a escribir los estilos existentes con
notación abreviada. Seleccione Si la utiliza el original para dejar todos los estilos tal como están. Seleccione Según configuración anterior para reescribir los estilos con notación abreviada para las propiedades especificadas en Usar forma abreviada. Al hacer doble clic en el panel CSS Permite seleccionar una herramienta para editar las reglas CSS.
3 Haga clic en Aceptar.
Creación de una nueva regla CSS Puede crear una regla CSS para automatizar la aplicación de formato a etiquetas HTML o rangos de texto identificados mediante un atributo class o ID. 1 Sitúe el punto de inserción en el documento y siga uno de estos procedimientos para abrir el cuadro de diálogo
Nueva regla CSS.
• Seleccione Formato > Estilos CSS > Nuevo estilo CSS. • En el panel Estilos CSS (Ventana > Estilos CSS), haga clic en el botón Nueva regla CSS (+) situado en la parte inferior derecha del panel.
• Seleccione texto en la ventana de documento, seleccione Nueva regla CSS del menú emergente Regla de destino en el inspector de propiedades de CSS (Ventana > Propiedades) y seleccione una opción del inspector de propiedades (por ejemplo, haga clic en el botón Negrita) para iniciar una nueva regla. 2 En el cuadro de diálogo Nueva regla CSS, especifique el tipo de selector para la regla CSS que desea crear:
• Para crear un estilo personalizado que pueda aplicarse como atributo class a cualquier elemento HTML, seleccione la opción Clase del menú emergente Tipo de selector e introduzca un nombre para el estilo en el cuadro de texto Nombre del selector. Nota: Los nombres de clase deben comenzar por un punto y pueden contener cualquier combinación alfanumérica (por ejemplo .myhead1). Si no introduce el punto inicial, Dreamweaver lo hará de forma automática.
• Para definir el formato de una etiqueta que contenga un atributo ID concreto, seleccione la opción ID del menú emergente Tipo de selector e introduzca el ID (por ejemplo, containerDIV) en el cuadro de texto Nombre del selector. Nota: Los ID deben comenzar por un signo de almohadilla (#) y pueden contener cualquier combinación alfanumérica (por ejemplo #myID1). Si no introduce la almohadilla inicial, Dreamweaver la introducirá de forma automática.
USO DE DREAMWEAVER CS4 147 Creación de páginas con CSS
• Para redefinir el formato predeterminado de una etiqueta HTML específica, seleccione la opción Etiqueta del menú emergente Tipo de selector y, seguidamente, introduzca una etiqueta HTML en el cuadro de texto Nombre del selector o elija una en el menú emergente.
• Para definir una regla compuesta que afecte a dos o más etiquetas, clases o ID simultáneamente, seleccione la opción Compuesto e introduzca los selectores para la regla compuesta. Por ejemplo, si introduce div p, la regla afectará a todos los elementos p situados dentro de etiquetas div. Un área de texto descriptivo explica exactamente a qué elementos afecta la regla conforme se añaden o eliminan selectores. 3 Seleccione la ubicación en la que desea definir la regla y luego haga clic en Aceptar:
• Para colocar la regla en una hoja de estilos que ya se ha adjuntado al documento, seleccione la hoja de estilos. • Para crear una hoja de estilos externa, elija Nuevo archivo de hoja de estilos. • Para incrustar el estilo en el documento actual, seleccione Sólo este documento. 4 En el cuadro de diálogo de definición de reglas CSS, seleccione las opciones de estilo que desea establecer para la
nueva regla CSS. Para más información, consulte la siguiente sección. 5 Cuando haya terminado de establecer las propiedades de estilo, haga clic en Aceptar.
Nota: Al hacer clic en Aceptar sin establecer opciones de estilo, se crea una nueva regla vacía.
Definición de las propiedades CSS Puede definir propiedades de reglas CSS, como la fuente del texto, la imagen y el color de fondo, las propiedades de espaciado y diseño y el aspecto de los elementos de las listas. En primer lugar, cree una nueva regla y, a continuación, establezca cualquiera de las propiedades siguientes.
Definición de propiedades de tipo CSS Utilice la categoría Tipo del cuadro de diálogo de definición de reglas CSS para definir la configuración básica de la fuente y del tipo de un estilo CSS. 1 Abra el panel Estilos CSS (Mayús + F11) si aún no está abierto. 2 Haga doble clic en una regla o propiedad existente en el panel superior del panel Estilos CSS. 3 En el cuadro de diálogo de definición de reglas CSS, seleccione Tipo y, a continuación, configure las propiedades
de estilo. Deje en blanco cualquiera de las propiedades siguientes si no son importantes para el estilo: Font-family Establece la familia de fuentes (o serie de familias) del estilo. Los navegadores muestran el texto utilizando
la primera fuente de la serie que esté instalada en el sistema del usuario. Para obtener compatibilidad con Internet Explorer 3.0, indique en primer lugar una fuente de Windows. Ambos navegadores reconocen el atributo font. Font-size Define el tamaño del texto. Puede elegir un tamaño específico seleccionando el número y la unidad de medida, o bien un tamaño relativo. El uso de píxeles evita que los navegadores distorsionen el texto. Ambos navegadores reconocen el atributo size. Font-style Especifica normal, italic u oblique como estilo de la fuente. El valor predeterminado es normal. Ambos
navegadores reconocen el atributo style. Line-height Establece el alto de la línea en la que se coloca el texto. Este valor se conoce tradicionalmente como
interlineado. Seleccione normal para hacer que el alto de línea del tamaño de la fuente se calcule de manera automática, o bien introduzca un valor exacto y seleccione una unidad de medida. Ambos navegadores reconocen el atributo Lineheight.
USO DE DREAMWEAVER CS4 148 Creación de páginas con CSS
Text-decoration Añade subrayado, sobreimpresión o tachado al texto o hace que el texto parpadee. El valor predeterminado para texto normal es ninguna. El valor predeterminado para vínculos es underline (subrayado). Si asigna a los vínculos el valor none, puede eliminar el subrayado definiendo una clase especial. Ambos navegadores reconocen el atributo decoration. Font-weight Aplica una cantidad específica o relativa de negrita a la fuente. Normal es equivalente a 400; bold
(negrita), a 700. Ambos navegadores reconocen el atributo weight. Font-variant Establece la variante de versales en el texto. Dreamweaver no muestra este atributo en la ventana de
documento. El atributo variant es compatible con Internet Explorer, pero no con Navigator. Text-transform Convierte en mayúscula la primera letra de cada palabra de la selección o convierte todo en mayúsculas o minúsculas. Ambos navegadores reconocen el atributo de mayúsculas/minúsculas. Color Establece el color del texto. Ambos navegadores reconocen el atributo color.
4 Cuando haya terminado de establecer las opciones, seleccione otra de las categorías CSS que aparecen en la parte
izquierda del panel para configurar propiedades adicionales de estilo o haga clic en Aceptar.
Definición de propiedades de fondo de estilos CSS Utilice la categoría Fondo del cuadro de diálogo de definición de regla CSS para definir la configuración del fondo de un estilo CSS. Puede aplicar propiedades de fondo a cualquier elemento de una página Web. Por ejemplo, crear un estilo que añada color de fondo o una imagen de fondo a cualquier elemento de la página, detrás del texto, de una tabla, de la página, etc. También puede especificar la posición de una imagen de fondo. 1 Abra el panel Estilos CSS (Mayús + F11) si aún no está abierto. 2 Haga doble clic en una regla o propiedad existente en el panel superior del panel Estilos CSS. 3 En el cuadro de diálogo de definición de regla CSS, seleccione Fondo y, a continuación, configure las propiedades
de estilo. Deje en blanco cualquiera de las propiedades siguientes si no son importantes para el estilo: Background-color Establece el color de fondo del elemento. Ambos navegadores reconocen el atributo Background-
color. Background-image Establece la imagen de fondo para el elemento. Ambos navegadores reconocen el atributo
Background-image. Background-repeat Determina si la imagen de fondo se repite y de qué forma lo hace. Ambos navegadores reconocen
el atributo repeat.
• No-repeat muestra la imagen una vez al principio del elemento. • Repeat forma un mosaico con la imagen en sentido horizontal y vertical detrás del elemento. • Repeat-x y repeat-y muestran, respectivamente, una banda horizontal y vertical de imágenes. Las imágenes se recortan para que quepan dentro de los límites del elemento. Nota: Utilice esta propiedad para redefinir la etiqueta body y establecer una imagen de fondo que no forma un mosaico ni se repite. Background-attachment Determina si la imagen de fondo está fija en su posición original o se desplaza con el
contenido. Tenga en cuenta que algunos navegadores pueden considerar la opción fixed como scroll. Internet Explorer reconoce este atributo, a diferencia de Netscape Navigator. Background-position (X) y Background-position (Y) Especifican la posición inicial de la imagen de fondo en relación con el elemento. Pueden emplearse para alinear una imagen de fondo en el centro de la página, tanto vertical (Y) como
USO DE DREAMWEAVER CS4 149 Creación de páginas con CSS
horizontalmente (X). Si la propiedad de attachment es fixed, la posición será relativa a la ventana de documento, no al elemento. 4 Cuando haya terminado de establecer las opciones, seleccione otra de las categorías CSS que aparecen en la parte
izquierda del panel para configurar propiedades adicionales de estilo o haga clic en Aceptar.
Definición de propiedades de bloque de estilos CSS Utilice la categoría Bloque del cuadro de diálogo de definición de regla CSS para definir la configuración del espaciado y de la alineación de las etiquetas y propiedades. 1 Abra el panel Estilos CSS (Mayús + F11) si aún no está abierto. 2 Haga doble clic en una regla o propiedad existente en el panel superior del panel Estilos CSS. 3 En el cuadro de diálogo de definición de regla CSS, seleccione Bloque y, a continuación, configure cualquiera de las
siguientes propiedades de estilo. (Deje en blanco la propiedad si no es importante para el estilo.) Word-spacing Establece el espacio adicional entre las palabras. Para establecer un valor específico, seleccione valor en
el menú emergente y, a continuación, introduzca un valor numérico. En el segundo menú emergente, seleccione una unidad de medida (por ejemplo, píxeles, puntos, etc.). Nota: Puede especificar valores negativos, pero su visualización dependerá del navegador. Dreamweaver no muestra este atributo en la ventana de documento. Letter-spacing Aumenta o disminuye el espacio entre letras o caracteres. Para disminuir el espacio entre caracteres,
establezca un valor negativo, por ejemplo (-4). La configuración del espacio entre letras anula la justificación del texto. Internet Explorer 4 y posterior y Netscape Navigator 6 reconocen el atributo Letter-spacing. Vertical-align Especifica la alineación vertical del elemento al que se aplica. Dreamweaver sólo muestra este atributo en la ventana de documento cuando se aplica a la etiqueta ![]()
. Text-align Establece cómo se alineará el texto dentro del elemento. Ambos navegadores reconocen el atributo Text-
align. Text-indent Especifica la cantidad de sangría que se aplica a la primera línea de texto. Se puede emplear un valor negativo para crear una sangría negativa, pero su visualización dependerá del navegador. Dreamweaver sólo muestra este atributo en la ventana de documento cuando la etiqueta se aplica a elementos de nivel de bloque. Ambos navegadores reconocen el atributo Text-indent. White-space Determina de qué forma se gestiona el espacio en blanco dentro del elemento. Seleccione una de las tres opciones: normal contrae el espacio en blanco; pre lo gestiona como si el texto se encontrara entre etiquetas pre (es decir, se respeta todo el espacio en blanco, incluidos los espacios, tabulaciones y retornos); no-wrap especifica que el texto sólo se ajusta cuando se encuentra una etiqueta br. Dreamweaver no muestra este atributo en la ventana de documento. Netscape Navigator e Internet Explorer 5.5 reconocen el atributo White-space. Display Especifica si un elemento se muestra y, si es así, cómo lo hace. None desactiva el elemento al que se ha asignado.
4 Cuando haya terminado de establecer las opciones, seleccione otra de las categorías CSS que aparecen en la parte
izquierda del panel para configurar propiedades adicionales de estilo o haga clic en Aceptar.
Definición de las propiedades del cuadro de estilos CSS Utilice la categoría Cuadro del cuadro de diálogo de definición de regla CSS para definir la configuración de las etiquetas y propiedades que controlan la ubicación de los elementos en la página.
USO DE DREAMWEAVER CS4 150 Creación de páginas con CSS
Puede aplicar la configuración en los distintos lados de un elemento al establecer el relleno y los márgenes o utilizar Igual para todo para aplicar la misma configuración a todos los lados del elemento. 1 Abra el panel Estilos CSS (Mayús + F11) si aún no está abierto. 2 Haga doble clic en una regla o propiedad existente en el panel superior del panel Estilos CSS. 3 En el cuadro de diálogo de definición de regla CSS, seleccione Cuadro y configure cualquiera de las siguientes
propiedades de estilo. (Deje en blanco la propiedad si no es importante para el estilo.) Width y Height Establecen el ancho y alto del elemento. Float Determina qué lado de otros elementos, como texto, Div PA, tablas, etc., flotará alrededor de un elemento. Otros
elementos se ajustan alrededor del elemento flotante de la forma habitual. Ambos navegadores reconocen el atributo Float. Clear Define los lados que no permiten elementos PA. Si aparece un elemento PA en el lado libre, el elemento con
esta configuración pasará a situarse debajo de él. Ambos navegadores reconocen el atributo Clear. Padding Especifica la cantidad de espacio entre el contenido de un elemento y su borde (o el margen si no hay ningún
borde). Desactive la opción Igual para todo para establecer el relleno de los distintos lados del elemento. Igual para todo Establece las mismas propiedades de relleno para Top, Right, Bottom y Left, es decir, para las partes superior, derecha, inferior e izquierda respectivamente del elemento al que se aplica. Margin Especifica la cantidad de espacio entre el borde de un elemento (o el relleno si no hay borde) y otro elemento. Dreamweaver sólo muestra este atributo en la ventana de documento cuando se aplica a elementos de nivel de bloque (párrafos, encabezados, listas, etc.). Desactive la opción Igual para todo para establecer el margen de los distintos lados del elemento. Igual para todo Establece las mismas propiedades de margen para Top, Right, Bottom y Left, es decir, para las partes
superior, derecha, inferior e izquierda respectivamente del elemento al que se aplica. 4 Cuando haya terminado de establecer las opciones, seleccione otra de las categorías CSS que aparecen en la parte
izquierda del panel para configurar propiedades adicionales de estilo o haga clic en Aceptar.
Definición de propiedades de borde de estilos CSS Utilice la categoría Borde del cuadro de diálogo de definición de regla CSS para definir la configuración de los bordes que rodean a los elementos (Width, Color o Style). 1 Abra el panel Estilos CSS (Mayús + F11) si aún no está abierto. 2 Haga doble clic en una regla o propiedad existente en el panel superior del panel Estilos CSS. 3 En el cuadro de diálogo de definición de regla CSS, seleccione Borde y configure cualquiera de las siguientes
propiedades de estilo. (Deje en blanco la propiedad si no es importante para el estilo.) Style Establece el aspecto del estilo del borde. El aspecto del estilo puede variar en función del navegador. Desactive la opción Igual para todo para establecer el estilo del borde de los distintos lados del elemento. Igual para todo Establece las mismas propiedades de estilo de borde para Top, Right, Bottom y Left, es decir, para las partes superior, derecha, inferior e izquierda respectivamente del elemento al que se aplica. Width Especifica el grosor del borde del elemento. Ambos navegadores reconocen el atributo Width. Desactive la
opción Igual para todo para establecer el ancho del borde de los distintos lados del elemento. Igual para todo Establece el mismo borde para Top, Right, Bottom y Left, es decir, para las partes superior, derecha, inferior e izquierda respectivamente del elemento al que se aplica.
USO DE DREAMWEAVER CS4 151 Creación de páginas con CSS
Color Establece el color del borde. Puede especificar colores distintos para cada lado, pero su visualización dependerá del navegador. Desactive la opción Igual para todo para establecer el color del borde de los distintos lados del elemento. Igual para todo Establece el mismo color de borde para Top, Right, Bottom y Left, es decir, para las partes superior, derecha, inferior e izquierda respectivamente del elemento al que se aplica.
4 Cuando haya terminado de establecer las opciones, seleccione otra de las categorías CSS que aparecen en la parte
izquierda del panel para configurar propiedades adicionales de estilo o haga clic en Aceptar.
Definición de las propiedades de lista de estilos CSS Utilice la categoría Lista del cuadro de diálogo de definición de regla CSS para definir la configuración de la lista para las etiquetas de lista (por ejemplo el tamaño y el tipo de viñetas). 1 Abra el panel Estilos CSS (Mayús + F11) si aún no está abierto. 2 Haga doble clic en una regla o propiedad existente en el panel superior del panel Estilos CSS. 3 En el cuadro de diálogo de definición de regla CSS, seleccione Lista y establezca cualquiera de las siguientes
propiedades de estilo. (Deje en blanco la propiedad si no es importante para el estilo.) List-style-type Establece el aspecto de viñetas o números. Ambos navegadores reconocen el atributo type. List-style-image Permite especificar una imagen personalizada para viñetas. Haga clic en Browse (Windows) o Seleccionar (Macintosh) para buscar una imagen o escriba la ruta de la imagen. List-style-Position Determina si el elemento de texto de la lista se ajusta a una sangría (outside) o si el texto se ajusta al margen izquierdo (inside).
4 Cuando haya terminado de establecer las opciones, seleccione otra de las categorías CSS que aparecen en la parte
izquierda del panel para configurar propiedades adicionales de estilo o haga clic en Aceptar.
Definición de las propiedades de posición de estilos CSS Las propiedades de estilo Posición determinan cómo debe colocarse el contenido relacionado con el estilo CSS en la página. 1 Abra el panel Estilos CSS (Mayús + F11) si aún no está abierto. 2 Haga doble clic en una regla o propiedad existente en el panel superior del panel Estilos CSS. 3 En el cuadro de diálogo de definición de regla CSS, seleccione Posición y, a continuación, configure las propiedades
de estilo que desee. Deje en blanco cualquiera de las propiedades siguientes si no son importantes para el estilo: Position Determina cómo deberá colocar el navegador el elemento seleccionado. Ofrece las opciones siguientes:
• Absolute coloca el contenido utilizando las coordenadas introducidas en los cuadros Placement en relación con el ascendente más próximo con posición absoluta o relativa o, si no hay ningún ascendente con posición absoluta o relativa, con la esquina superior izquierda de la página.
• Relative coloca el bloque de contenido utilizando las coordenadas introducidas en los cuadros Placement en relación con la posición del bloque en el flujo de texto del documento. Por ejemplo, al asignar a un elemento una posición relativa (relative) y coordenadas superior (top) e izquierda (left) de 20 píxeles cada una, el elemento se desplazará 20 píxeles hacia la derecha y 20 píxeles hacia abajo de su posición normal en el flujo. Los elementos también pueden tener una posición relativa, con o sin coordenadas superior (top), izquierda (left), derecha (right) o inferior (bottom), para establecer un contexto para elementos dependientes con posición absoluta.
USO DE DREAMWEAVER CS4 152 Creación de páginas con CSS
• Fixed coloca el contenido utilizando las coordenadas introducidas en los cuadros Placement en relación con la esquina superior izquierda del navegador. El contenido permanecerá fijo en esta posición cuando el usuario se desplace por la página.
• Static coloca el contenido en su ubicación en el flujo de texto. Esta es la posición predeterminada de todos los elementos HTML que pueden colocarse. Visibility Determina el estado inicial de visualización del contenido. Si no se especifica una propiedad de visibilidad,
el contenido heredará el valor de la etiqueta del padre de forma predeterminada. La visibilidad predeterminada de la etiqueta body es visible. Seleccione una de las siguientes opciones de visibilidad:
• Inherit hereda la propiedad de visibilidad del padre del contenido. • Visible muestra el contenido, independientemente del valor del contenido padre. • Hidden no muestra el contenido, independientemente del valor del contenido padre. Z-Index Determina el orden de apilamiento del contenido. Los elementos con un índice z superior aparecen por
encima de los elementos con un índice z inferior (o sin índice z). Los valores pueden ser positivos o negativos. (Si el contenido tiene posición absoluta, es más fácil cambiar el orden de apilamiento utilizando el panel Elementos PA.) Overflow Determina lo que debe ocurrir si el contenido de un contenedor (por ejemplo, una DIV o una P) supera el
tamaño de éste. Estas propiedades controlan la ampliación de la siguiente manera:
• Visible aumenta el tamaño del contenedor para que todo su contenido sea visible. El contenedor se expande hacia abajo y hacia la derecha.
• Hidden mantiene el tamaño del contenedor y recorta cualquier contenido que no quepa. No hay barras de desplazamiento.
• Scroll añade barras de desplazamiento al contenedor independientemente de que el contenido exceda o no el tamaño del contenedor. La inclusión de barras de desplazamiento evita la confusión que provoca la aparición y desaparición de las barras de desplazamiento en un entorno dinámico. Esta opción no se muestra en la ventana de documento.
• Auto presenta las barras de desplazamiento solamente cuando el contenido del contenedor excede de sus límites. Esta opción no se muestra en la ventana de documento. Placement Especifica la ubicación y el tamaño del bloque de contenido. La forma en que el navegador interpreta la
ubicación dependerá de la configuración de Tipo. Si el contenido del bloque de contenido excede el tamaño especificado, los valores de tamaño se anularán. El píxel es la unidad predeterminada de ubicación y tamaño. También se pueden emplear las siguientes unidades: pc (picas), pt (puntos), in (pulgadas), mm (milímetros), cm (centímetros), (ems), (exs) o % (porcentaje del valor padre). Las abreviaturas deben seguir al valor sin espacio de separación: por ejemplo, 3mm. Clip Define la parte del contenido que será visible. Si especifica una región de recorte, podrá acceder a ella con un
lenguaje de scripts como JavaScript y manipular las propiedades para crear efectos especiales como barridos. Estos barridos se pueden configurar utilizando el comportamiento Cambiar propiedad. 4 Cuando haya terminado de establecer las opciones, seleccione otra de las categorías CSS que aparecen en la parte
izquierda del panel para configurar propiedades adicionales de estilo o haga clic en Aceptar.
Definición de las propiedades de extensiones de estilos CSS Las propiedades de extensiones de estilo incluyen opciones de filtros (filter), salto de página y puntero (cursor).
USO DE DREAMWEAVER CS4 153 Creación de páginas con CSS
Nota: Dreamweaver incluye otras propiedades de extensiones, pero para acceder a ellas, debe hacerlo a través del panel Estilos CSS. Puede ver fácilmente una lista con las propiedades de extensiones disponibles si abre el panel Estilos CSS (Ventana > Estilos CSS), hace clic en el botón Mostrar vista de categoría y amplía la categoría Extensiones. 1 Abra el panel Estilos CSS (Mayús + F11) si aún no está abierto. 2 Haga doble clic en una regla o propiedad existente en el panel superior del panel Estilos CSS. 3 En el cuadro de diálogo de definición de regla CSS, seleccione Extensiones y configure cualquiera de las siguientes
propiedades de estilo. (Deje en blanco la propiedad si no es importante para el estilo.) Page-break-before Efectúa un salto de página al imprimir antes o después del objeto al que se aplica el estilo. Seleccione la opción que desea establecer en el menú emergente. Esta opción es incompatible con todos los navegadores 4.0, pero es posible que la reconozcan las versiones futuras de estos programas. Cursor Cambia la imagen del puntero cuando éste se encuentra sobre el objeto al que se aplica el estilo. Seleccione la opción que desea establecer en el menú emergente. Internet Explorer 4.0 y versiones posteriores y Netscape Navigator 6 reconocen este atributo. Filter Aplica efectos especiales al objeto controlado por el estilo, incluidos desenfoque e inversión. Seleccione un
efecto en el menú emergente. 4 Cuando haya terminado de establecer las opciones, seleccione otra de las categorías CSS que aparecen en la parte
izquierda del panel para configurar propiedades adicionales de estilo o haga clic en Aceptar.
Edición de una regla CSS Puede editar fácilmente tanto reglas internas como externas que haya aplicado al documento. Al editar una hoja de estilos CSS que controla el texto del documento, cambiará inmediatamente el formato de todo el texto al que se aplique dicha hoja de estilos. La edición de una hoja de estilos externa afecta a todos los documentos vinculados a ella. Puede configurar un editor externo para la edición de las hojas de estilos.
Edición de una regla en el panel Estilos CSS (modo Actual) 1 Abra el panel Estilos CSS seleccionando Ventana > Estilos CSS. 2 Haga clic en el botón Actual situado en la parte superior del panel Estilos CSS. 3 Seleccione un elemento del texto de la página actual para visualizar las propiedades del mismo. 4 Siga uno de estos procedimientos:
• Haga doble clic en una propiedad del panel Resumen de la selección para mostrar el cuadro de diálogo de definición de regla CSS y realice los cambios deseados.
• Seleccione una propiedad en el panel Resumen de la selección y edite la propiedad en el panel Propiedades situado debajo.
• Seleccione una regla del panel Reglas y, a continuación, edite las propiedades de la regla en el panel Propiedades situado debajo. Nota: Puede cambiar el comportamiento del doble clic para la edición de CSS, además de otros comportamientos, cambiando las preferencias de Dreamweaver.
Edición de una regla en el panel Estilos CSS (modo Todo) 1 Abra el panel Estilos CSS seleccionando Ventana > Estilos CSS.
USO DE DREAMWEAVER CS4 154 Creación de páginas con CSS
2 Haga clic en el botón Todo situado en la parte superior del panel Estilos CSS. 3 Siga uno de estos procedimientos:
• Haga doble clic en una regla del panel Todas las reglas para mostrar el cuadro de diálogo de definición de regla CSS y realice los cambios deseados.
• Seleccione una regla del panel Todas las reglas y, a continuación, edite las propiedades de la regla en el panel Propiedades situado debajo.
• Seleccione una regla del panel Todas las reglas y luego haga clic en el botón Editar estilo, situado en la esquina inferior derecha del panel Estilos CSS. Nota: Puede cambiar el comportamiento del doble clic para la edición de CSS, además de otros comportamientos, cambiando las preferencias de Dreamweaver.
Cambio del nombre de un selector CSS 1 En el panel Estilos CSS (modo Todo), elija el selector que desea modificar. 2 Haga clic de nuevo en el selector para poder editar el nombre. 3 Realice los cambios y presione Intro (Windows) o Retorno (Macintosh).
Véase también “Configuración de las propiedades de texto en el inspector de propiedades” en la página 243
Adición de una propiedad a una regla Puede utilizar el panel Estilos CSS para añadir propiedades a reglas. 1 En el panel Estilos CSS (Ventana > Estilos CSS), seleccione una regla del panel Todas las reglas (modo Todo) o
seleccione una propiedad del panel Resumen de la selección (modo Actual). 2 Siga uno de estos procedimientos:
• Si está seleccionada la vista Mostrar sólo las propiedades establecidas en el panel Propiedades, haga clic en el vínculo Añadir propiedad y añada una propiedad.
• Si está seleccionada la vista de categoría o la vista de lista en el panel Propiedades, introduzca un valor para la propiedad seleccionada que desea añadir.
Aplicación, eliminación o cambio del nombre de los estilos de clase Los estilos de clase son los únicos tipos de estilos CSS que se pueden aplicar a cualquier texto del documento, independientemente de las etiquetas que controlen dicho texto. Todos los estilos de clase asociados al documento actual se muestran en el panel Estilos CSS (con un punto [.] delante de su nombre) y en el menú emergente Estilo del inspector de propiedades. La mayoría de los estilos se actualizan inmediatamente; sin embargo, es recomendable que obtenga una vista previa de la página en un navegador para comprobar que el estilo se ha aplicado correctamente. Cuando se aplican dos o más estilos al mismo texto, éstos pueden entrar en conflicto y producir resultados imprevistos. Al obtener una vista previa de los estilos definidos en una hoja de estilos CSS externa, no olvide guardar la hoja de estilos para asegurarse de que los cambios se verán reflejados en la vista previa de la página en un navegador.
USO DE DREAMWEAVER CS4 155 Creación de páginas con CSS
Véase también “Hojas de estilos en cascada” en la página 137 “Estilos en cascada” en la página 139 “Acerca del panel Estilos CSS” en la página 142
Aplicación de un estilo de clase CSS 1 En el documento, seleccione el texto al que desea aplicar un estilo CSS.
Sitúe el punto de inserción en un párrafo para aplicar el estilo a todo el párrafo. Si selecciona un rango de texto dentro de un párrafo, el estilo CSS sólo afectará al rango seleccionado. Para especificar la etiqueta exacta a la que se deberá aplicar el estilo CSS, selecciónela con el selector de etiquetas situado en la parte inferior izquierda de la ventana de documento. 2 Para aplicar un estilo de clase, siga uno de estos procedimientos:
• En el panel Estilos CSS (Ventana > Estilos CSS), seleccione el modo Todo, haga clic con el botón derecho del ratón en el nombre del estilo que desea aplicar y seleccione Aplicar en el menú contextual.
• En el inspector de propiedades de HTML, seleccione el estilo de clase que desea aplicar en el menú emergente Clase. • En la ventana de documento, haga clic con el botón derecho del ratón (Windows) o mantenga presionada la tecla Control y haga clic (Macintosh) en el texto seleccionado y, en el menú contextual que aparece, seleccione Estilos CSS. A continuación, seleccione el estilo que desea aplicar.
• Seleccione Formato > Estilos CSS y, en el submenú, seleccione el estilo que desea aplicar.
Eliminación de un estilo de clase de una selección 1 Seleccione el objeto o texto cuyo estilo desea eliminar. 2 En el inspector de propiedades de HTML (Ventana > Propiedades), seleccione Ninguno en el menú emergente
Estilo.
Cambio del nombre de un estilo de clase 1 En el panel Estilos CSS, haga clic con el botón derecho del ratón en el estilo de clase CSS que desea cambiar de
nombre y seleccione Cambiar nombre de clase. También puede cambiar el nombre de una clase seleccionando Cambiar nombre de clase en el menú de opciones del panel Estilos CSS. 2 En el cuadro de diálogo Cambiar nombre de clase, asegúrese de que la clase que desea cambiar de nombre está
seleccionada en el menú emergente Cambiar nombre de clase. 3 En el cuadro de texto Nuevo nombre, introduzca el nuevo nombre de la clase y haga clic en Aceptar.
Si la clase que va a cambiar de nombre es interna en el encabezado del documento actual, Dreamweaver cambia el nombre de la clase y todas las instancias del nombre de la clase que haya en el documento actual. Si la clase que va a cambiar de nombre es un archivo CSS externo, Dreamweaver abre el archivo y cambia el nombre de la clase. Dreamweaver abre además el cuadro de diálogo Buscar y reemplazar para que pueda buscar todas las instancias del antiguo nombre de la clase en todo el sitio.
USO DE DREAMWEAVER CS4 156 Creación de páginas con CSS
Desplazamiento de reglas CSS Las funciones de administración CSS de Dreamweaver facilitan el desplazamiento de reglas CSS a distintas ubicaciones. Puede mover reglas entre documentos, del encabezado de un documento a una hoja de estilos externa, entre archivos CSS externos y mucho más. Nota: Si la regla que va a mover entra en conflicto con una regla de la hoja de estilos de destino, Dreamweaver muestra el cuadro de diálogo Ya hay una regla con el mismo nombre. Si elige mover la regla en conflicto, Dreamweaver sitúa la regla desplazada junto a la regla en conflicto en la hoja de estilos de destino.
Véase también “Inserción de código con la barra de herramientas Codificación” en la página 326
Desplazamiento de reglas CSS a una nueva hoja de estilos 1 Siga uno de estos procedimientos:
• En el panel Estilos CSS, seleccione la regla o reglas que desea mover. A continuación, haga clic con el botón derecho del ratón en la selección y elija Mover reglas CSS en el menú contextual. Para seleccionar varias reglas, presione la tecla Control (Windows) o Comando (Macintosh) mientras hace clic en las reglas que desea seleccionar.
• En el la vista Código, seleccione la regla o reglas que desea mover. A continuación, haga clic con el botón derecho del ratón en la selección y elija Estilos CSS > Mover reglas CSS en el menú contextual. Nota: La selección parcial de una regla provocará el desplazamiento de toda la regla. 2 En el cuadro de diálogo Mover a hoja de estilos externa, seleccione la opción Una nueva hoja de estilos y haga clic
en Aceptar. 3 En al cuadro de diálogo Guardar archivo de hoja de estilos como, introduzca un nombre para la nueva hoja de
estilos y haga clic en Guardar. Al hacer clic en Guardar, Dreamweaver guarda una nueva hoja de estilos con las reglas seleccionadas y la adjunta al documento actual. También puede mover reglas a través de la barra de herramientas Codificación. La barra de herramientas Codificación sólo está disponible en la vista Código.
Desplazamiento de reglas CSS a una hoja de estilos existente 1 Siga uno de estos procedimientos:
• En el panel Estilos CSS, seleccione la regla o reglas que desea mover. A continuación, haga clic con el botón derecho del ratón en la selección y elija Mover reglas CSS en el menú contextual. Para seleccionar varias reglas, presione la tecla Control (Windows) o Comando (Macintosh) mientras hace clic en las reglas que desea seleccionar.
• En el la vista Código, seleccione la regla o reglas que desea mover. A continuación, haga clic con el botón derecho del ratón en la selección y elija Estilos CSS > Mover reglas CSS en el menú contextual. Nota: La selección parcial de una regla provocará el desplazamiento de toda la regla. 2 En el cuadro de diálogo Mover a hoja de estilos externa, seleccione una hoja de estilos existente en el menú
emergente o haga clic en el botón Examinar para localizar una hoja de estilos existente y, a continuación, haga clic en Aceptar. Nota: El menú emergente muestra todas las hojas de estilo vinculadas al documento actual. También puede mover reglas a través de la barra de herramientas Codificación. La barra de herramientas Codificación sólo está disponible en la vista Código.
USO DE DREAMWEAVER CS4 157 Creación de páginas con CSS
Reorganización o desplazamiento de reglas arrastrándolas ❖ En el panel Estilos CSS (modo Todo), seleccione una regla y arrástrela hasta la ubicación deseada. Puede
seleccionar y arrastrar las reglas para cambiarlas de orden dentro de una hoja de estilos, o mover una regla a otra hoja de estilos o al encabezado del documento. Para mover más de una regla a la vez, presione la tecla Control (Windows) o Comando (Macintosh) y haga clic en varias reglas para seleccionarlas.
Selección de varias reglas antes de desplazarlas ❖ En el panel Archivos, presione Control (Windows) o Comando (Macintosh) mientras hace clic en las reglas que
desea seleccionar.
Conversión de CSS en línea en una regla CSS No se recomienda el uso de estilos en línea. Para mantener más limpio y organizado su CSS, puede convertir los estilos en línea en reglas CSS que residan en el encabezado del documento o en una hoja de estilos externa. 1 En la vista Código (Ver > Código), seleccione toda la etiqueta <style> que contiene el código CSS en línea que
desea convertir. 2 Haga clic con el botón derecho del ratón y seleccione Estilos CSS > Convertir CSS en línea en regla. 3 En el cuadro de diálogo Convertir CSS en línea, introduzca un nombre de clase para la nueva regla y siga uno de
estos procedimientos:
• Especifique una hoja de estilos en la que desea que aparezca la nueva regla y haga clic en Aceptar. • Seleccione el encabezado del documento como ubicación en la que desea que aparezca la nueva regla y haga clic en Aceptar. También puede convertir reglas a través de la barra de herramientas Codificación. La barra de herramientas Codificación sólo está disponible en la vista Código.
Véase también “Inserción de código con la barra de herramientas Codificación” en la página 326
Vinculación a una hoja de estilos CSS externa Si edita una hoja de estilos CSS externa, todos los documentos vinculados a esa hoja se actualizarán para reflejar los cambios. Puede exportar los estilos CSS de un documento para crear una nueva hoja de estilos CSS, así como adjuntar o vincular dichos estilos a una hoja de estilos externa para aplicarlos. Puede adjuntar a las páginas las hojas de estilo que cree o copie en el sitio. Además, Dreamweaver se entrega con hojas de estilos prediseñadas que pueden trasladarse automáticamente al sitio y adjuntarse a las páginas. 1 Abra el panel Estilos CSS siguiendo uno de estos procedimientos:
• Seleccione Ventana > Estilos CSS. • Presione Mayús + F11. 2 En el panel Estilos CSS, haga clic en el botón Adjuntar hoja de estilos. (Se encuentra en la esquina inferior derecha
del panel.) 3 Siga uno de estos procedimientos:
• Haga clic en Examinar para localizar una hoja de estilos CSS externa.
USO DE DREAMWEAVER CS4 158 Creación de páginas con CSS
• Escriba la ruta de la hoja de estilos en el cuadro Archivo/URL. 4 En Añadir como, seleccione una de las siguientes opciones:
• Para crear un vínculo entre el documento actual y la hoja de estilos externa, seleccione Vincular. De esta forma se crea una etiqueta de vínculo href en el código HTML que hace referencia al URL donde se encuentra la hoja de estilos publicada. Este método es compatible con Microsoft Internet Explorer y Netscape Navigator.
• No puede utilizar una etiqueta de vínculo para añadir una referencia de una hoja de estilos externa a otra. Si desea anidar hojas de estilos, utilice una directiva de importación. La mayoría de los navegadores también reconocen la directiva de importación en una página (en lugar de en hojas de estilos solamente). Existen diferencias sutiles en el modo en que se solucionan las propiedades en conflicto cuando se solapan reglas en hojas de estilos externas que están vinculadas y en el modo en que se solucionan cuando están importadas a una página. Si desea importar una hoja de estilos externa, en lugar de crear un vínculo a la misma, seleccione Importar. 5 En el menú emergente Media, especifique el medio de destino de la hoja de estilos.
Para obtener más información acerca de hojas de estilos dependientes de los medios, consulte el sitio Web de World Wide Web Consortium en www.w3.org/TR/CSS21/media.html. 6 Haga clic en el botón Vista previa para verificar que la hoja de estilos aplica los estilos que desea en la página actual.
Si los estilos aplicados no tienen el efecto que esperaba, haga clic en Cancelar para eliminar la hoja de estilos. La página recuperará su aspecto anterior. 7 Haga clic en Aceptar.
Véase también “Creación de una página basada en un archivo de muestra de Dreamweaver” en la página 73
Edición de una hoja de estilos CSS Una hoja de estilos CSS suele incluir una o varias reglas. Puede editar una regla por separado en una hoja de estilos CSS mediante el panel Estilos CSS o bien trabajar directamente en la hoja de estilos CSS. 1 En el panel Estilos CSS (Ventana > Estilos CSS), seleccione el modo Todo. 2 En el panel Todas las reglas, haga doble clic en el nombre de la hoja de estilos que desea editar. 3 En la ventana de documento, modifique la hoja de estilo y guárdela.
Aplicación de formato a código CSS Puede definir las preferencias que controlan el formato del código CSS cuando crea o edita una regla CSS a través de la interfaz de Dreamweaver. Por ejemplo, puede definir las preferencias que situarán todas las propiedades CSS en líneas independientes, colocar una línea en blanco entre las reglas CSS, etc. Cuando define las preferencias de formato del código CSS, las preferencias que elija se aplican de manera automática a todas las nuevas reglas CSS que cree. No obstante, también puede aplicar estas preferencias de forma manual a documentos individuales. Esto podría resultar útil si tiene un documento HTML o CSS antiguo al que necesita aplicar formato. Nota: Las preferencias de formato del código CSS se aplican solamente a las reglas CSS de hojas de estilos externas o incrustadas (no a los estilos en línea).
Véase también “Cambio del formato del código” en la página 319
USO DE DREAMWEAVER CS4 159 Creación de páginas con CSS
Configuración de preferencias de formato de código CSS 1 Seleccione Edición > Preferencias. 2 En el cuadro de diálogo Preferencias, seleccione la categoría Formato de código. 3 Junto a Formato avanzado, haga clic en el botón CSS. 4 En el cuadro de diálogo Opciones de formato de origen de CSS, seleccione la opción que desea aplicar a su código
fuente CSS. En la ventana Vista previa, puede ver una vista previa del código CSS tal y como aparecerá en función de las opciones seleccionadas. Aplicar propiedades de sangría con Establece el valor de sangría para las propiedades de una regla. Puede especificar
tabuladores o espacios. Cada propiedad en una línea Sitúa cada propiedad de la regla en una línea independiente. Llave de apertura en línea aparte Sitúa la llave de apertura de una regla en una línea independiente del selector. Sólo si hay más de una propiedad Sitúa las reglas con una sola propiedad en la misma línea que el selector. Todos los selectores de una regla en la misma línea Sitúa todos los selectores de la regla en la misma línea. Línea en blanco entre reglas Inserta una línea en blanco entre cada una de las reglas.
5 Haga clic en Aceptar.
Nota: El formato del código CSS hereda también la preferencia Tipo de salto de línea definida en la categoría Formato de código del cuadro de diálogo Preferencias.
Aplicación manual de formato al código CSS de una hoja de estilos CSS 1 Abra una hoja de estilos CSS. 2 Elija Comandos > Aplicar formato de origen.
Las opciones de formato que defina en las preferencias de formato del código CSS se aplican al todo el documento. No puede aplicar formato a selecciones individuales.
Aplicación manual de formato a código CSS incrustado 1 Abra una página HTML que contenga CSS incrustado en el encabezado del documento. 2 Seleccione cualquier parte del código CSS. 3 Elija Comandos > Aplicar formato de origen a la selección.
Las opciones de formato que defina en las preferencias de formato del código CSS se aplican a todas las reglas, en el encabezado del documento solamente. Nota: Puede seleccionar Comandos > Aplicar formato de origen para aplicar formato a todo el documento en función de las preferencias de formato de código especificadas.
USO DE DREAMWEAVER CS4 160 Creación de páginas con CSS
Comprobación de problemas de representación de CSS con distintos navegadores La función Comprobar compatibilidad con navegadores (BCC) le ayuda a ubicar combinaciones de código HTML y CSS que presentan problemas en determinados navegadores. Cuando ejecuta esta función en un archivo abierto, Dreamweaver analiza el archivo e informa de los posibles problemas de representación de CSS en el panel Resultados. Un valor de seguridad, que se representa mediante un círculo lleno al 25%, 50%, 75% o 100%, indica la probabilidad de incidencia del error (un círculo lleno al 25% indica una posible incidencia y un círculo completo muestra que la incidencia es muy probable). Para cada error potencial que encuentra, Dreamweaver también proporciona un vínculo directo a la documentación sobre el error en Adobe CSS Advisor, un sitio Web que contiene información detallada sobre errores conocidos de representación en navegadores, y ofrece soluciones para resolverlos. De forma predeterminada la función BCC comprueba los siguientes navegadores: Firefox 1.5; Internet Explorer (Windows) 6.0 y 7.0; Internet Explorer (Macintosh) 5.2; Netscape Navigator 8.0; Opera 8.0 y 9.0; Safari 2.0. Esta función sustituye a la anterior Comprobar navegador de destino anterior, pero mantiene la funcionalidad CSS de la misma. Es decir, la nueva función BCC sigue comprobando el código de sus documentos para ver si las propiedades o valores CSS son incompatibles con los navegadores de destino. Pueden surgir tres niveles de problemas potenciales de compatibilidad con navegadores:
• Un error indica código CSS que puede causar un problema de visibilidad grave en un navegador concreto, como hacer desaparecer partes de una página. (Error es la designación predeterminada para problemas de compatibilidad con navegadores, por lo que en algunos casos, el código con un efecto desconocido también se indica como error.)
• Una advertencia señala una parte de código CSS que es incompatible con un navegador concreto, pero que no causará ningún problema de visualización grave.
• Un mensaje informativo indica que el código es incompatible con un navegador concreto, pero que no tiene efecto en la visibilidad. Las comprobaciones de compatibilidad con navegadores no modifican el documento de forma alguna.
Véase también “Validación de etiquetas” en la página 343 Asesor de CSS
Ejecución de una comprobación de compatibilidad con navegadores ❖ Seleccione Archivo > Comprobar página > Compatibilidad con navegadores.
Selección de elementos a los que afecta un problema ❖ En el panel Resultados, haga doble clic en el problema.
USO DE DREAMWEAVER CS4 161 Creación de páginas con CSS
Cómo saltar al error siguiente o anterior encontrado en el código ❖ Seleccione Siguiente problema o Problema anterior del menú Comprobar compatibilidad con navegadores de la
barra de herramientas Documento.
Selección de los navegadores con los que Dreamweaver debe realizar la comprobación 1 En el panel Resultados (Ventana > Resultados), seleccione la ficha Comprobación de compatibilidad con
navegadores. 2 Haga clic en la flecha verde de la esquina superior derecha del panel Resultados y seleccione Configuración. 3 Seleccione la casilla de verificación de los navegadores que desee comprobar. 4 Para cada navegador, a partir de qué versión se realizará la comprobación en el correspondiente menú emergente.
Por ejemplo, si los problemas de representación CSS podrían aparecer en Internet Explorer 5.0 y en versiones posteriores, y en Netscape Navigator 7.0 y en versiones posteriores, seleccione las casillas de verificación junto a los nombres de esos navegadores y, a continuación, elija 5.0 en el menú emergente de Internet Explorer y 7.0 en el menú emergente de Netscape.
Exclusión de un error de la comprobación de compatibilidad con navegadores 1 Ejecute una comprobación de compatibilidad con navegadores. 2 En el panel Resultados, haga clic con el botón derecho del ratón (Windows) o mantenga la tecla pulsada y haga clic
(Macintosh) en el problema que desea excluir de una comprobación futura. 3 Seleccione Ignorar problema en el menú contextual.
Edición de la lista de problemas ignorados 1 En el panel Resultados (Ventana > Resultados), seleccione la ficha Comprobación de compatibilidad con
navegadores. 2 Haga clic en la flecha verde de la esquina superior derecha del panel Resultados y seleccione Editar lista de
problemas ignorados. 3 En el archivo Exceptions.xml, busque el problema que desea eliminar de la lista de problemas ignorados y elimínelo. 4 Guarde y cierre el archivo Exceptions.xml.
Almacenamiento de un informe de comprobación de compatibilidad con navegadores 1 Ejecute una comprobación de compatibilidad con navegadores. 2 Haga clic en el botón Guardar informe situado en el lado izquierdo del panel Resultados.
USO DE DREAMWEAVER CS4 162 Creación de páginas con CSS
Para ver información de herramientas, pase el puntero del ratón por encima de los botones del panel Resultados. Nota: Los informes no se guardan automáticamente; si desea conservar una copia de un informe, debe seguir el procedimiento descrito anteriormente para guardarlo.
Visualización de un informe de comprobación de compatibilidad con navegadores en un navegador 1 Ejecute una comprobación de compatibilidad con navegadores. 2 Haga clic en el botón Examinar informe situado en el lado izquierdo del panel Resultados.
Para ver información de herramientas, pase el puntero del ratón por encima de los botones del panel Resultados.
Consulta del sitio Web de Adobe CSS Advisor 1 En el panel Resultados (Ventana > Resultados), seleccione la ficha Comprobación de compatibilidad con
navegadores. 2 Haga clic en el texto del vínculo de la parte inferior derecha del panel.
Utilización de hojas de estilo de tiempo de diseño Las hojas de estilos de tiempo de diseño le permiten mostrar u ocultar el diseño aplicado por una hoja de estilos CSS mientras trabaja con un documento de Dreamweaver. Por ejemplo, puede utilizar esta opción para aprovechar o evitar el efecto de las hojas de estilos exclusivas de Macintosh o Windows mientras diseña una página. Las hojas de estilos de tiempo de diseño sólo se aplican mientras se trabaja en el diseño de un documento; cuando la página se muestra en la ventana de un navegador, aparecen sólo los estilos que realmente están adjuntos o incrustados en el documento que aparece en un navegador. Nota: También puede activar o desactivar estilos en toda una página empleando la barra de herramientas Representación de estilos. Para mostrar la barra de herramientas, seleccione Ver > Barras de herramientas > Representación de estilos. El botón Alternar visualización de estilos CSS (situado más a la derecha) funciona de forma independiente a los demás botones de medios de la barra de herramientas. Para utilizar una hoja de estilos de tiempo de diseño, siga estos pasos. 1 Abra el cuadro de diálogo Hojas de estilo de tiempo de diseño siguiendo uno de estos procedimientos:
• Haga clic con el botón derecho en el panel Estilos CSS y, en el menú contextual, seleccione Tiempo de diseño. • Seleccione Formato > Estilos CSS > Tiempo de diseño. 2 En el cuadro de diálogo, defina las opciones para que se muestre o se oculte la hoja de estilos seleccionada:
• Para mostrar una hoja de estilos en tiempo de diseño, haga clic en el botón más (+) situado sobre Mostrar sólo en tiempo de diseño. En el cuadro de diálogo Seleccionar archivo, vaya a la hoja de estilos CSS que desea mostrar.
• Para ocultar una hoja de estilos CSS, haga clic en el botón más (+) situado sobre Ocultar en tiempo de diseño. En el cuadro de diálogo Seleccionar archivo, vaya a la hoja de estilos CSS que desea ocultar.
• Para eliminar una hoja de estilos de cualquier lista, haga clic en la hoja de estilos que desea eliminar y haga clic en el botón menos (–) correspondiente. 3 Haga clic en Aceptar para cerrar el cuadro de diálogo.
El panel Estilos CSS se actualiza con el nombre de la hoja de estilos seleccionada y con un indicador, “oculto” o “diseño”, que refleja el estado de la hoja de estilos.
USO DE DREAMWEAVER CS4 163 Creación de páginas con CSS
Véase también “Introducción a la barra de herramientas Representación de estilos” en la página 14
Utilización de hojas de estilos de muestra de Dreamweaver Dreamweaver dispone de hojas de estilos de muestra que pueden aplicarse a las páginas o que se pueden utilizar como puntos de partida para desarrollar estilos propios. 1 Abra el panel Estilos CSS siguiendo uno de estos procedimientos:
• Seleccione Ventana > Estilos CSS. • Presione Mayús+F11. 2 En el panel Estilos CSS, haga clic en el botón Adjuntar hoja de estilos externa. (Se encuentra en la esquina inferior
derecha del panel.) 3 En el cuadro de diálogo Adjuntar hoja de estilos externa, haga clic en Hojas de estilos de muestra. 4 En el cuadro de diálogo Hojas de estilos de muestra, seleccione una hoja de estilos en el cuadro de lista.
Al seleccionar las hojas de estilos del cuadro de lista, el panel Vista previa mostrará el formato de texto y de color de la hoja de estilos seleccionada. 5 Haga clic en el botón Vista previa para aplicar la hoja de estilos y verificar que se aplican los estilos que desea en la
página actual. Si los estilos aplicados no tienen el efecto que esperaba, seleccione otra hoja de estilos de la lista y haga clic en el botón Vista previa para aplicar dichos estilos. 6 De forma predeterminada, Dreamweaver guarda la hoja de estilos en una carpeta denominada CSS justo debajo de
la raíz del sitio definido para la página. Si esa carpeta no existe, Dreamweaver la creará. Para guardar el archivo en otra ubicación, haga clic en Examinar y busque otra carpeta. 7 Cuando encuentre una hoja de estilos cuyas reglas de formato coincidan con sus criterios de diseño, haga clic en
Aceptar.
Actualización de hojas de estilos CSS en un sitio de Contribute Los usuarios de Adobe Contribute no pueden realizar cambios en hojas de estilos CSS. Para cambiar una hoja de estilos para un sitio de Contribute, utilice Dreamweaver. 1 Edite la hoja de estilos utilizando las herramientas de edición de hojas de estilos de Dreamweaver. 2 Solicite a todos los usuarios de Contribute que estén trabajando en el sitio que publiquen las páginas que emplean
dicha hoja de estilos y que, a continuación, vuelvan a editar las páginas para ver la nueva hoja de estilos. A continuación se enumeran factores importantes que debe tener en cuenta a la hora de actualizar hojas de estilos para un sitio de Contribute:
• Si realiza cambios en una hoja de estilos mientras un usuario de Contribute está editando una página que emplea dicha hoja de estilos, el usuario no verá los cambios realizados en la hoja de estilos hasta que publique la página.
• Si elimina un estilo de una hoja de estilos, el nombre del estilo no se eliminará de las páginas que utilicen dicha hoja de estilos, pero, dado que ya no existe, no se mostrará tal como espera el usuario de Contribute. Por consiguiente, si un usuario le informa de que no ocurre nada cuando aplica un estilo concreto, es posible que el problema se deba a que el estilo se ha eliminado de la hoja de estilos.
USO DE DREAMWEAVER CS4 164 Creación de páginas con CSS
Diseño de páginas con CSS Acerca del diseño de páginas con CSS Un diseño de página CSS utiliza el formato de hojas de estilos en cascada, en lugar de las tablas o marcos HTML tradicionales, para organizar el contenido de un sitio Web. El elemento básico del diseño CSS es la etiqueta div, una etiqueta HTML que, en la mayoría de los casos, actúa como contenedor de texto, imágenes y otros elementos de página. Cuando crea un diseño CSS, coloca etiquetas div en la página, añade contenido a las mismas y las sitúa en distintos lugares. A diferencia de las celdas de tabla, que sólo pueden situarse en algún lugar dentro de las filas y columnas de la tabla, las etiquetas div aparecen en cualquier lugar de una página Web. Puede situar etiquetas div de forma absoluta (especificando las coordenadas x e y) o de forma relativa (especificando su distancia con respecto a otros elementos de la página). La creación de diseños CSS desde cero puede ser una tarea difícil debido a la gran cantidad de formas de hacerlo que existen. Puede crear un diseño CSS sencillo de dos columnas estableciendo elementos flotantes, márgenes, rellenos y otras propiedades CSS mediante un número casi infinito de combinaciones. Además, el problema de la reproducción en distintos navegadores hace que determinados diseños CSS se muestren correctamente en algunos navegadores y no en otros. Dreamweaver facilita la creación de páginas con diseños CSS con más de 30 diseños predefinidos que funcionan en distintos navegadores. La utilización de los diseños CSS predefinidos que vienen con Dreamweaver es la forma más fácil de crear una página con un diseño CSS, pero también puede crear diseños CSS mediante los elementos con posición absoluta (elementos PA) de Dreamweaver. En Dreamweaver, un elemento PA es un elemento de página HTML (en concreto, una etiqueta div o cualquier otra etiqueta) que tiene una posición absoluta asignada. Sin embargo, la limitación de los elementos PA de Dreamweaver radica precisamente en que tienen una posición absoluta, lo que hace que sus posiciones nunca se ajusten a la página en función del tamaño del navegador. Si se considera un usuario avanzado, también puede insertar etiquetas div de forma manual y aplicarles estilos de posición CSS para crear los diseños de las páginas. Para un tutorial sobre la creación de diseños de páginas con CSS, consulte www.adobe.com/go/vid0155_es.
Véase también “Utilización de etiquetas div” en la página 182 Tutorial sobre el diseño CSS
Acerca de la estructura del diseño de páginas con CSS Antes de continuar con esta sección, debería estar familiarizado con los conceptos básicos de CSS. El elemento básico del diseño CSS es la etiqueta div, una etiqueta HTML que, en la mayoría de los casos, actúa como contenedor de texto, imágenes y otros elementos de página. En los siguientes ejemplos se muestra una página HTML que contiene tres etiquetas div independientes: una etiqueta de “contenedor” grande y otras dos etiquetas (una de barra lateral y una de contenido principal) dentro de la etiqueta de contenedor.
USO DE DREAMWEAVER CS4 165 Creación de páginas con CSS
B
A C
A. Div de contenedor B. Div de barra lateral C. Div de contenido principal
A continuación se incluye el código de las tres etiquetas div en el HTML:
en el selector de etiquetas situado en la esquina inferior izquierda de la ventana de documento.
• Haga clic en una celda de la tabla y, a continuación, seleccione Modificar > Tabla > Seleccionar tabla. • Haga clic en una celda de la tabla, después en el menú del encabezado de tabla y, a continuación, seleccione Seleccionar tabla. Aparecerán manejadores de selección en los bordes inferior y derecho de la tabla.
Selección de una o varias filas y columnas 1 Sitúe el puntero en el borde izquierdo de una fila o en el borde superior de una columna.
USO DE DREAMWEAVER CS4 195 Maquetación de páginas con HTML
2 Cuando el puntero se convierta en una flecha de selección, haga clic para seleccionar una fila o columna, o arrastre
para seleccionar varias filas o columnas.
Selección de una sola columna 1 Haga clic en la columna. 2 Haga clic en el menú de encabezado de columna y seleccione Seleccionar columna.
Selección de una sola celda ❖ Siga uno de estos procedimientos:
• Haga clic en la celda y, a continuación, seleccione la etiqueta en el selector de etiquetas situado en la esquina inferior izquierda de la ventana de documento.
• Presione la tecla Control (Windows) o Comando (Macintosh) y haga clic en la celda. • Haga clic en la celda y seleccione Edición > Seleccionar todo. Para seleccionar toda una tabla, vuelva a seleccionar Edición > Seleccionar todo cuando una celda esté seleccionada.
Selección de una línea o un bloque rectangular de celdas ❖ Siga uno de estos procedimientos:
• Arrastre de una celda a otra. • Haga clic en una celda, presione Control y haga clic (Windows) o presione Comando y haga clic (Macintosh) en la misma celda para seleccionarla y, a continuación, presione Mayús y haga clic en otra celda. Todas las celdas de la región lineal o rectangular definida por las dos celdas quedarán seleccionadas.
Selección de celdas no adyacentes ❖ Presione Control (Windows) o Comando (Macintosh) mientras hace clic en las celdas, filas o columnas que desea
seleccionar.
USO DE DREAMWEAVER CS4 196 Maquetación de páginas con HTML
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), haga clic en la flecha de ampliación situada en la esquina
inferior derecha y cambie las propiedades como estime oportuno. 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 muestran 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.
USO DE DREAMWEAVER CS4 197 Maquetación de páginas con HTML
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 (campo de texto superior) Nombre de archivo de la imagen de fondo de una celda, columna o fila. Haga clic en el icono de carpeta para seleccionar una imagen, o utilice el icono de señalización de archivo para seleccionar un archivo de imagen. Fnd (muestra de color y campo de texto inferiores) Color de fondo de una celda, columna o fila seleccionado con el selector de color. Borde Color del borde de las celdas. 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.
USO DE DREAMWEAVER CS4 198 Maquetación de páginas con HTML
(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.) 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
B
A. Tabla en modo estándar B. Tabla en modo de tablas expandidas
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.
USO DE DREAMWEAVER CS4 199 Maquetación de páginas con HTML
• En la categoría Diseño del panel Insertar, haga clic en Modo estándar.
Aplicación de formato a tablas y celdas Puede cambiar el aspecto de una tabla configurando las propiedades de la misma y de sus celdas o aplicándole un diseño predefinido. Antes de definir las propiedades de la tabla y de las celdas, tenga en cuenta el orden de prioridad para la aplicación de formato es éste: celdas, filas y tablas. Para aplicar formato al texto de una celda de tabla, utilice los mismos procedimientos que utilizaría para aplicar formato al texto fuera de una tabla.
Véase también “Adición y aplicación de formato al texto” en la página 233
Cambio del formato de una tabla, fila, celda o columna 1 Seleccione una tabla, celda, fila o columna. 2 En el inspector de propiedades (Ventana > Propiedades), haga clic en la flecha de ampliación situada en la esquina
inferior derecha y cambie las propiedades como estime oportuno. 3 Cambie las propiedades según convenga.
Para más información sobre las opciones, haga clic en el icono Ayuda del inspector de propiedades. 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.
Adición o edición de valores de accesibilidad para una tabla en la vista Código ❖ Edite los atributos adecuados en el código.
Para localizar rápidamente las etiquetas en el código, haga clic en la etiqueta en el selector de etiquetas que se encuentra en la parte inferior de la ventana de documento.
Adición o edición de valores de accesibilidad para una tabla en la vista Diseño • Para editar el texto de la tabla, resáltelo y escriba uno nuevo. • Para editar la alineación del texto, coloque el punto de inserción en el texto de la tabla, haga clic con el botón derecho (Windows) o mantenga presionada la tecla Control y haga clic (Macintosh) y seleccione Editar código de etiqueta.
• Para editar el resumen de la tabla, selecciónela, haga clic con el botón derecho (Windows) o mantenga presionada la tecla Control y haga clic (Macintosh) y seleccione Editar código de etiqueta.
Acerca del cambio del tamaño de tablas, columnas y filas Cambio del tamaño de tablas Puede cambiar el tamaño de una tabla completa o de filas y columnas individuales. Al cambiar el tamaño de toda la tabla, el tamaño de todas sus celdas cambiará proporcionalmente. Si el alto y el ancho de las celdas de una tabla están explícitamente especificados, al cambiar el tamaño de la tabla también lo hará el tamaño visual de las celdas en la ventana de documento, aunque no el alto y el ancho especificado para las celdas.
USO DE DREAMWEAVER CS4 200 Maquetación de páginas con HTML
Puede cambiar el tamaño de una tabla arrastrando uno de sus manejadores de selección. Dreamweaver muestra el ancho de la tabla junto con un menú de encabezado de tabla en la parte superior o inferior de la tabla cuando ésta se selecciona o el punto de inserción está en ella. En ocasiones, los anchos de columna de tabla establecidos en código HTML no coinciden con los anchos que aparecen en la pantalla. Cuando esto sucede, puede hacer que los anchos coincidan. Los anchos y los menús de encabezado de las tablas y columnas se muestran en Dreamweaver para ayudarle a diseñar las tablas, y puede activarlos y desactivarlos según sea necesario. Cambio del tamaño de columnas y filas Puede cambiar el ancho de una columna o el alto de una fila en el inspector de propiedades o arrastrando los bordes de la columna o fila. Si encuentra problemas para cambiar el tamaño, borre el ancho de la columna y el alto de la fila y empiece de nuevo. Nota: También puede cambiar directamente el ancho y el alto de la celda en los códigos HTML utilizando la vista Código. Dreamweaver muestra el ancho de las columnas junto con menús de encabezado en su parte superior o inferior cuando se selecciona la tabla o el punto de inserción está en ella; puede activar o desactivar los menús de encabezado de columna según sea necesario.
Véase también “Utilización del código de las páginas” en la página 311
Cambio del tamaño de tablas, columnas y filas Cambio del tamaño de una tabla ❖ Seleccione la tabla.
• Para cambiar el tamaño horizontal de la tabla, arrastre el manejador de selección de la derecha. • Para cambiar el tamaño vertical de la tabla, arrastre el manejador de selección de la parte inferior. • Para cambiar ambos, arrastre el manejador de selección de la esquina inferior derecha.
Cambio del ancho de una columna y mantenimiento del ancho general de la tabla ❖ Arrastre el borde derecho de la columna que desee cambiar.
El ancho de la columna contigua también varía; en consecuencia, cambia el tamaño de las dos columnas. Se mostrará cómo se ajustan las columnas, pero el ancho general de la tabla no variará.
Nota: En las tablas con ancho basados en porcentajes (no píxeles), si arrastra el borde derecho de la columna que se encuentra más a la derecha, variará todo el ancho de la tabla y las columnas se harán más anchas o estrechas proporcionalmente.
Cambio del ancho de una columna y mantenimiento del tamaño de las demás ❖ Mantenga pulsada la tecla Mayús mientras arrastra el borde de la columna.
USO DE DREAMWEAVER CS4 201 Maquetación de páginas con HTML
Cambiará el ancho de una columna. Las ayudas visuales le mostrarán cómo se ajustan las columnas. El ancho total de la tabla cambia para dar cabida a la columna que ha cambiado de tamaño.
Cambio del alto de una fila visualmente ❖ Arrastre el borde inferior de la fila.
Igualación de los anchos de columna del código con los anchos de columna visuales 1 Haga clic en una celda. 2 Haga clic en el menú del encabezado de tabla y, a continuación, seleccione Igualar todos los anchos.
Dreamweaver restablece el ancho especificado en el código para que coincida con el ancho visual.
Eliminación de los anchos y altos especificados de una tabla 1 Seleccione la tabla. 2 Siga uno de estos procedimientos:
• Seleccione Modificar > Tabla > Borrar ancho de celda o Modificar > Tabla > Borrar alto de celda. • En el inspector de propiedades (Ventana > Propiedades), haga clic en el botón Borrar alto de fila Borrar ancho de columna
o en el botón
.
• Haga clic en el menú del encabezado de tabla y, a continuación, seleccione Borrar todos los altos o Borrar todos los anchos.
USO DE DREAMWEAVER CS4 202 Maquetación de páginas con HTML
Eliminación del ancho establecido de una columna ❖ Haga clic en la columna, haga clic en el menú del encabezado de columna y seleccione Borrar ancho de columna.
Activación o desactivación de los anchos y los menús de tablas y columnas 1 Seleccione Ver > Ayudas visuales > Anchos de tabla. 2 Haga clic con el botón derecho del ratón (Windows) o mantenga presionada la tecla Control y haga clic
(Macintosh) en la tabla, y seleccione Tabla > Anchos de tabla.
Adición y eliminación de filas y columnas Para añadir o eliminar filas y columnas, utilice Modificar > Tabla o el menú de encabezado de columna. Si presiona la tecla Tab en la última celda de una tabla se añadirá automáticamente otra fila a la tabla.
Adición de una sola fila o columna ❖ Haga clic en una celda y siga uno de estos procedimientos:
• Seleccione Modificar > Tabla > Insertar fila o bien Modificar > Tabla > Insertar columna. Aparecerá una fila encima del punto de inserción o una columna a la izquierda del punto de inserción.
• Haga clic en el menú del encabezado de columna y, a continuación, seleccione Insertar columna izquierda o Insertar columna derecha.
Adición de varias filas o columnas 1 Haga clic en una celda. 2 Seleccione Modificar > Tabla > Insertar filas o columnas, complete el cuadro de diálogo y haga clic en Aceptar. Insertar Indica si deben insertarse filas o columnas. Número de filas o Número de columnas El número de filas o columnas que deben insertarse. Dónde Especifica si las nuevas filas o columnas deben aparecer antes o después de la fila o columna de la celda
seleccionada.
Eliminación de una fila o columna ❖ Siga uno de estos procedimientos:
• Haga clic en una celda dentro de la fila o de la columna que desea eliminar y, a continuación, seleccione Modificar > Tabla > Eliminar fila o Modificar > Tabla > Eliminar columna.
• Seleccione una fila o columna completa y, a continuación, seleccione Edición > Borrar o presione Supr.
USO DE DREAMWEAVER CS4 203 Maquetación de páginas con HTML
Adición o eliminación de filas o columnas utilizando el inspector de propiedades 1 Seleccione la tabla. 2 En el inspector de propiedades (Ventana > Propiedades), siga uno de estos procedimientos:
• Para añadir o eliminar filas, aumente o reduzca el valor de Filas. • Para añadir o eliminar columnas, aumente o reduzca el valor de Cols. Nota: Dreamweaver no advertirá de que las filas o las columnas que desea eliminar contienen datos.
División y combinación de celdas Utilice el inspector de propiedades o los comandos del submenú Modificar > Tabla para dividir o combinar celdas. Como alternativa a la división y combinación de celdas, Dreamweaver incluye también herramientas que permiten aumentar o disminuir el número de filas o columnas que ocupa una celda.
Combinación de dos o más celdas en una tabla 1 Seleccione las celdas en una línea contigua y en forma de un rectángulo.
En la siguiente ilustración, la selección es un rectángulo de celdas, por lo que éstas se pueden combinar.
En la siguiente ilustración, la selección no es un rectángulo, por lo que las celdas no se pueden combinar.
2 Siga uno de estos procedimientos:
• Seleccione Modificar > Tabla > Combinar celdas. • En el inspector de propiedades ampliado (Ventana > Propiedades), haga clic en Combinar celdas
.
Nota: Si no se muestra el menú, haga clic en la flecha de la esquina inferior derecha del inspector de propiedades para ver todas las opciones. El contenido de las celdas individuales se sitúa en la celda combinada resultante. Las propiedades de la primera celda seleccionada se aplicarán a la celda combinada.
División de una celda 1 Haga clic en la celda y siga uno de estos procedimientos:
• Seleccione Modificar > Tabla > Dividir celda.
USO DE DREAMWEAVER CS4 204 Maquetación de páginas con HTML
• En el inspector de propiedades ampliado (Ventana > Propiedades), haga clic en Dividir celda
.
Nota: Si no se muestra el menú, haga clic en la flecha de la esquina inferior derecha del inspector de propiedades para ver todas las opciones. 2 En el cuadro de diálogo Dividir celda, especifique cómo desea dividir la celda: Dividir celda en Especifica si la celda debe dividirse en filas o en columnas. Número de filas/Número de columnas Especifica el número de filas o de columnas en que debe dividirse la celda.
Aumento o disminución del número de filas o columnas que ocupa una celda ❖ Siga uno de estos procedimientos:
• Seleccione Modificar > Tabla > Aumentar tamaño de fila, o bien Modificar > Tabla > Aumentar tamaño de columna.
• Seleccione Modificar > Tabla > Reducir tamaño de fila, o bien Modificar > Tabla > Reducir tamaño de columna.
Copia, pegado y eliminación de celdas Puede copiar, pegar o eliminar una o varias celdas de una tabla al mismo tiempo, conservando el formato de las celdas. Las celdas se pueden pegar en el punto de inserción o en el lugar de una selección en una tabla existente. Para pegar varias celdas de una tabla, el contenido del Portapapeles debe ser compatible con la estructura de la tabla o la selección de la tabla en la que se van a pegar las celdas.
Corte o copia de celdas de una tabla 1 Seleccione una o varias celdas en una línea contigua y en forma de un rectángulo.
En la siguiente ilustración, la selección es un rectángulo de celdas, por lo que éstas se pueden cortar o copiar.
En la siguiente ilustración, la selección no es un rectángulo de celdas, por lo que éstas no se pueden cortar ni copiar.
2 Seleccione Edición > Cortar, o bien Edición > Copiar.
Nota: Si selecciona una fila o columna completa y selecciona Edición > Cortar, se eliminará toda la columna o fila de la tabla (no sólo el contenido de las celdas).
USO DE DREAMWEAVER CS4 205 Maquetación de páginas con HTML
Pegado de celdas de tabla 1 Elija dónde desea pegar las celdas:
• Para reemplazar las celdas actuales por las celdas que desea pegar, seleccione un grupo de celdas que tengan el mismo diseño que las del portapapeles. (Por ejemplo, si ha copiado o cortado un bloque de celdas de 3 x 2, podrá reemplazarlo por otro bloque de celdas de 3 x 2.)
• Para pegar toda una fila de celdas encima de una celda concreta, haga clic en dicha celda. • Para pegar toda una columna de celdas a la izquierda de una celda concreta, haga clic en dicha celda. Nota: Si no dispone de toda una fila o columna de celdas en el portapapeles y hace clic en una celda y, a continuación, pega las celdas del portapapeles, puede reemplazar la celda en la que ha hecho clic y las que la rodean (dependiendo de su ubicación en la tabla) por las celdas que está pegando.
• Para crear una nueva tabla con las celdas pegadas, sitúe el punto de inserción fuera de la tabla. 2 Seleccione Edición > Pegar.
Si pega filas o columnas completas en una tabla existente, éstas se añadirán a la tabla. Si pega una sola celda, se reemplazará el contenido de la celda seleccionada. Si pega fuera de una tabla, las filas, columnas o celdas se utilizarán para definir una tabla nueva.
Eliminación del contenido y mantenimiento de las celdas intactas 1 Seleccione una o más celdas.
Nota: Asegúrese de que la selección no consta sólo de filas o columnas completas. 2 Seleccione Edición > Borrar o presione Supr.
Nota: Si únicamente están seleccionadas filas o columnas completas, cuando seleccione Edición > Borrar o presione Supr, se eliminarán de la tabla todas las filas o columnas, y no sólo su contenido.
Eliminación de filas o columnas que contienen celdas combinadas 1 Seleccione la fila o columna. 2 Seleccione Modificar > Tabla > Eliminar fila o Modificar > Tabla > Eliminar columna.
Anidación de tablas Una tabla anidada es una tabla dentro de una celda o de otra tabla. Puede aplicar formato a una tabla anidada como lo haría con cualquier otra tabla; no obstante, su ancho estará limitado por el ancho de la celda en la que aparece. 1 Haga clic en una celda de la tabla. 2 Seleccione Insertar > Tabla, establezca las opciones de Insertar tabla y haga clic en Aceptar.
Ordenación de tablas Puede ordenar las filas de una tabla en función del contenido de una sola columna. También puede realizar una operación más compleja ordenándola en función del contenido de dos columnas. No se pueden ordenar tablas que contengan atributos colspan o rowspan, es decir, tablas con celdas combinadas. 1 Seleccione la tabla o haga clic en cualquiera de las celdas. 2 Seleccione Comandos > Ordenar tabla, establezca las opciones en el cuadro de diálogo y haga clic en Aceptar. Ordenar por Determina los valores de la columna que se utilizarán para ordenar las filas de la tabla.
USO DE DREAMWEAVER CS4 206 Maquetación de páginas con HTML
Orden Determina si la columna debe ordenarse alfabética o numéricamente, y si el orden será ascendente (de la A a
la Z, de los números más bajos a los más altos) o descendente. Si la columna contiene números, seleccione Numéricamente. Una clasificación alfabética aplicada a una lista de números de uno y dos dígitos ordenará los números como si fueran palabras (como 1, 10, 2, 20, 3, 30) en lugar de ordenarlos como si fueran números (como 1, 2, 3, 10, 20, 30). Después por / Orden Determina el orden de una clasificación secundaria en otra columna. Especifique la columna de clasificación secundaria en el menú emergente Después por y el orden de clasificación secundaria en los menús emergentes de Orden. El orden incluye la primera fila Especifica que la primera fila de la tabla debe incluirse en la clasificación. Si la primera fila contiene un encabezado que no se debe mover, no seleccione esta opción. Ordenar filas de encabezado Especifica que se ordenen todas las filas de la sección thead de la tabla (si las hay)
siguiendo los mismos criterios que para las filas del cuerpo. (Observe que las filas thead permanecerán en la sección thead y seguirán apareciendo en la parte superior de la tabla, incluso después de ordenarlas.) Para información sobre
la etiqueta thead, consulte el panel Referencia (seleccione Ayuda > Referencia). Ordenar filas de pie Especifica que se ordenen todas las filas de la sección tfoot de la tabla (si las hay) siguiendo los
mismos criterios que para las filas del cuerpo. (Observe que las filas tfoot permanecerán en la sección tfoot y seguirán apareciendo en la parte superior de la tabla, incluso después de ordenarlas.) Para información sobre la etiqueta tfoot, consulte el panel Referencia (seleccione Ayuda > Referencia). No modificar los colores de fila hasta que haya finalizado la operación de orden Especifica que los atributos de fila de
la tabla (por ejemplo, el color) deben permanecer asociados al mismo contenido después de la ordenación. Si el formato de las filas de la tabla alterna dos colores, no seleccione esta opción para garantizar que la tabla ordenada incluya filas con colores alternos. Si los atributos de fila son específicos del contenido de cada fila, seleccione esta opción para garantizar que los atributos permanezcan asociados a las filas apropiadas de la tabla ordenada.
Utilización de marcos Funcionamiento de los marcos y los conjuntos de marcos Un marco es una zona de una ventana de navegador que puede mostrar un documento HTML independiente de lo que se muestra en el resto de la ventana. Los marcos permiten dividir la ventana de un navegador en varias regiones, cada una las cuales puede mostrar un documento HTML diferente. Por lo general, un marco muestra un documento que contiene controles de navegación, mientras que otro muestra un documento con contenido Un conjunto de marcos es un archivo HTML que define el diseño y las propiedades de un grupo de marcos, que incluyen el número, el tamaño, la ubicación de los marcos y el URL de la página que aparece inicialmente en cada marco. El archivo de conjunto de marcos no incluye el contenido HTML que se muestra en el navegador, excepto en la sección noframes. El archivo únicamente ofrece al navegador información sobre cómo debe mostrarse un conjunto de marcos y los documentos que deben incluirse en los marcos. Para ver un conjunto de marcos en un navegador, introduzca el URL del archivo de conjunto de marcos; el navegador abre entonces los documentos que deben mostrarse en los marcos. El archivo de conjunto de marcos de un sitio suele llamarse index.html. Así, cuando el visitante no especifica ningún nombre de archivo, este archivo se muestra de forma predeterminada.
USO DE DREAMWEAVER CS4 207 Maquetación de páginas con HTML
En el ejemplo siguiente se muestra un diseño de marcos formado por tres marcos: un marco estrecho a un lado que contiene una barra de navegación, un marco que se extiende por la parte superior y contiene el logotipo y el título del sitio Web, y un marco grande que ocupa el resto de la página y presenta el contenido principal. Cada uno de estos marcos muestra un documento HTML diferente.
En este ejemplo, el documento mostrado en el marco superior nunca cambia cuando el visitante explora el sitio. El marco lateral de barra de navegación contiene vínculos; al hacer clic en uno de ellos, cambia el contenido del marco de contenido principal, aunque el del marco lateral permanecerá estático. El marco de contenido principal de la derecha mostrará el documento correspondiente al vínculo de la izquierda seleccionado por el visitante. Un marco no es un archivo. Podría pensarse que el documento mostrado en un marco forma parte integral del mismo, pero en realidad esto no es así. El marco es el contenedor que alberga el documento. Nota: La palabra página puede utilizarse para hacer referencia a un único documento HTML o a todo el contenido de una ventana del navegador en un momento determinado, aunque se estén mostrando varios documentos HTML al mismo tiempo. Por ejemplo, la frase “una página que utiliza marcos” suele hacer referencia a un conjunto de marcos y a los documentos que aparecen en ellos inicialmente. Un sitio que aparece en un navegador como una sola página compuesta de tres marcos consta realmente de al menos cuatro documentos HTML: el archivo de conjunto de marcos y los tres documentos que albergan el contenido que aparece inicialmente en los marcos. Al diseñar una página utilizando conjuntos de marcos en Dreamweaver, deberá guardar cada uno de estos cuatro archivos para que la página funcione correctamente en el navegador. Para obtener información más completa sobre marcos, consulte el sitio Web de Thierry Koblentz en www.tjkdesign.com/articles/frames/.
Cuándo utilizar marcos Adobe desaconseja el uso de marcos para el diseño de páginas Web. Estas son algunas de las desventajas que presenta el uso de marcos:
• Lograr una alineación gráfica precisa de los elementos en distintos marcos puede resultar difícil.
USO DE DREAMWEAVER CS4 208 Maquetación de páginas con HTML
• Comprobar las opciones de navegación puede llevar mucho tiempo. • Los URL de las páginas con marcos no aparecen en el navegador, por lo que puede resultar complicado para un visitante marcar una página concreta (salvo que incluya código de servidor que le permita cargar la versión con marcos de una determinada página). Para ver información completa de por qué no debe utilizar marcos, consulte la explicación al respecto de Gary White en http://apptools.com/rants/framesevil.php. El uso más habitual de los marcos, en el caso de que decida utilizarlos, es para navegación. Un conjunto de marcos suele incluir un marco con una barra de navegación y otro que muestra las páginas de contenido principal. El uso de marcos de esta forma ofrece estas ventajas:
• El navegador de un visitante no tendrá que volver a cargar los gráficos de navegación para cada página. • Cada marco dispone de su propia barra de desplazamiento (si el contenido es demasiado grande para una ventana), permitiendo al visitante desplazarse por los marcos de forma independiente. Por ejemplo, si la barra de navegación se encuentra en otro marco, cuando el visitante se desplaza al final de una página de contenido muy grande en un marco no es necesario que vuelva al principio de la página para acceder a la barra de navegación. En muchos casos, puede crear una página Web sin marcos que logre los mismos objetivos que un conjunto de marcos. Por ejemplo, si desea que la barra de navegación aparezca a la izquierda, puede reemplazar la página por un conjunto de marcos o, simplemente, incluir la barra de navegación en todas las páginas del sitio. (Dreamweaver le ayuda a crear varias páginas con el mismo diseño.) Aunque no utiliza marcos, el siguiente ejemplo muestra un diseño de página que los imita.
Los sitios mal diseñados utilizan los marcos de forma innecesaria, por ejemplo, un conjunto de marcos que vuelve a cargar el contenido de los marcos de navegación cada vez que el visitante hace clic en un botón de navegación. Cuando se utilizan bien los marcos (por ejemplo, para mantener controles de navegación estáticos en un marco y permitir que cambie el contenido de otro marco), pueden resultar muy útiles para el sitio.
USO DE DREAMWEAVER CS4 209 Maquetación de páginas con HTML
No todos los navegadores son compatibles con el uso de marcos, por lo que algunos visitantes con discapacidades pueden experimentar dificultades para navegar. Si utiliza marcos, incluya siempre una sección noframes en su conjunto de marcos para los visitantes que no pueden verlos. También puede incluir un vínculo explícito con una versión sin marcos del sitio. Para obtener información más completa sobre marcos, consulte el sitio Web de Thierry Koblentz en www.tjkdesign.com/articles/frames/.
Conjuntos de marcos anidados Un conjunto de marcos situado dentro de otro conjunto recibe el nombre de conjunto de marcos anidado. Un archivo de conjunto de marcos puede contener varios conjuntos de marcos anidados. La mayoría de las páginas Web con marcos utilizan en realidad marcos anidados y la mayoría de los conjuntos de marcos predefinidos en Dreamweaver también utilizan la anidación. Cualquier conjunto de marcos que contenga números de marcos diferentes en distintas filas o columnas requiere un conjunto de marcos anidado. Por ejemplo, el diseño de marcos más habitual emplea un marco en la primera fila (donde aparece el logotipo de la empresa) y dos marcos en la última fila (uno de navegación y otro de contenido). Este diseño requiere un conjunto de marcos anidado: un conjunto de marcos de dos filas con un conjunto de marcos anidado de dos columnas en la segunda fila.
A
B
A. Conjunto de marcos principal B. El marco de menú y el marco de contenido se anidan en el conjunto de marcos principal.
Dreamweaver se ocupa de todos los conjuntos de marcos anidados que sean necesarios; si utiliza las herramientas de división de marcos de Dreamweaver, no tendrá que preocuparse de qué marcos son anidados y cuáles no. Hay dos formas de anidar conjuntos de marcos en HTML: el conjunto de marcos interior puede definirse en el mismo archivo que el exterior o un archivo independiente. Los conjuntos de marcos predefinidos en Dreamweaver definen todos sus conjuntos de marcos en el mismo archivo. Ambos tipos de anidación producen los mismos resultados visuales; sin ver el código, no resulta sencillo distinguir cuál se está utilizando. En Dreamweaver suele recurrirse a un archivo de conjunto de marcos externo cuando se utiliza el comando Abrir en marco para abrir un archivo de conjunto de marcos dentro de un marco, lo cual puede dificultar la tarea de establecer los destinos de los vínculos. Suele resultar más sencillo definir todos los conjuntos de marcos en un mismo archivo.
USO DE DREAMWEAVER CS4 210 Maquetación de páginas con HTML
Utilización de conjuntos de marcos en la ventana de documento Dreamweaver permite ver y editar todos los documentos asociados a un conjunto de marcos en una misma ventana de documento. Este enfoque permite obtener una visión aproximada de cómo se mostrarán las páginas con marcos en un navegador a medida que las edita. Sin embargo, algunos aspectos de este enfoque pueden resultar confusos hasta que se acostumbre a ellos. En especial, recuerde que cada marco muestra un documento HTML distinto. Aunque los documentos estén vacíos, deberá guardarlos antes de obtener una vista previa de los mismos (ya que sólo puede obtenerse una vista previa del conjunto de marcos si éste contiene el URL del documento que se muestra en cada marco). Para comprobar si un conjunto de marcos aparece correctamente en los navegadores, siga estos pasos generales: 1 Cree el conjunto de marcos y especifique el documento que debe aparecer en cada marco. 2 Guarde todos los archivos que se van a mostrar en un marco. Recuerde que cada marco muestra un documento
HTML distinto y que debe guardar cada documento junto con el archivo de conjunto de marcos. 3 Establezca las propiedades de los marcos y del conjunto de marcos (incluido asignar un nombre a cada marco y
establecer las opciones de desplazamiento). 4 Establezca la propiedad Dest. del inspector de propiedades para todos los vínculos de forma que el contenido
vinculado se muestre en el área correspondiente.
Creación de marcos y conjuntos de marcos Hay dos formas de crear un conjunto de marcos en Dreamweaver: Puede seleccionar entre varios conjuntos de marcos predefinidos o puede diseñar uno propio. Al elegir un conjunto de marcos predefinido, se configuran todos los marcos y conjuntos de marcos necesarios para crear el diseño. Ésta es la forma más sencilla de crear rápidamente un diseño basado en marcos. Sólo se puede insertar un conjunto de marcos predefinido en la vista Diseño de la ventana de documento. También puede diseñar un conjunto de marcos propio en Dreamweaver añadiendo barras divisorias a la ventana de documento. Antes de crear un conjunto de marcos o utilizar marcos, haga visibles los bordes de los marcos en la vista Diseño de la ventana de documento seleccionando Ver > Ayudas visuales > Bordes de marco.
Véase también “Dreamweaver y accesibilidad” en la página 706
Creación de un conjunto de marcos predefinido y visualización de un documento en un marco 1 Coloque el punto de inserción en un documento y siga uno de estos procedimientos:
•
Elija Insertar > HTML > Marcos y seleccione un conjunto de marcos predefinido.
• En la categoría Diseño del panel Insertar, haga clic en la flecha abajo del botón Marcos y seleccione un conjunto de marcos predefinido. Los iconos de conjunto de marcos proporcionan una representación visual del conjunto de marcos aplicado al documento actual. El área azul de un icono de conjunto de marcos representa el documento actual y las áreas blancas representan marcos que mostrarán otros documentos.
USO DE DREAMWEAVER CS4 211 Maquetación de páginas con HTML
2 Si ha configurado Dreamweaver para que le solicite los atributos de accesibilidad de los marcos, seleccione un
marco del menú emergente, introduzca un nombre para el marco y haga clic en Aceptar. (Para los visitantes del sitio que utilicen lectores de pantallas, el lector de pantalla leerá este nombre cuando encuentre el marco en una página.) Nota: Si hace clic en Aceptar sin haber introducido un nombre nuevo, Dreamweaver asigna al marco un nombre que corresponde a su posición (marco izquierdo, marco derecho, etc.) en el conjunto de marcos. Nota: Si presiona Cancelar, el conjunto de marcos aparece en el documento pero Dreamweaver no le asocia etiquetas o atributos de accesibilidad. Seleccione Ventana > Marcos para visualizar un diagrama de los marcos a los que está asignando un nombre.
Creación de un conjunto de marcos predefinido vacío 1 Seleccione Archivo > Nuevo. 2 En el cuadro de diálogo Nuevo documento, seleccione la categoría Página de muestra. 3 Seleccione la carpeta Frameset de la columna Carpeta de muestra. 4 Seleccione un conjunto de marcos de la columna Página de muestra y haga clic en Crear. 5 Si ha activado los atributos de accesibilidad de los marcos en Preferencias, aparecerá el cuadro de diálogo Atributos
de accesibilidad de la etiqueta de marco; rellene la información para cada marco en el cuadro de diálogo y haga clic en Aceptar. Nota: Si presiona Cancelar, el conjunto de marcos aparece en el documento pero Dreamweaver no le asocia etiquetas o atributos de accesibilidad.
Creación de un conjunto de marcos ❖ Seleccione Modificar > Conjunto de marcos y seleccione en el submenú un elemento divisor, como por ejemplo
Dividir marco a la izquierda o Dividir marco a la derecha. Dreamweaver divide la ventana en marcos. Si hay un documento abierto, éste aparecerá en uno de los marcos.
División de un marco en marcos más pequeños • Para dividir el marco donde se encuentra el punto de inserción, elija un elemento divisor del submenú Modificar > Conjunto de marcos.
• Para dividir un marco o conjunto de marcos vertical u horizontalmente, arrastre el borde del marco desde el extremo hasta el centro de la vista Diseño.
• Para dividir un marco utilizando un borde de marco que no se encuentra en el extremo de la vista Diseño, arrastre el borde del marco mientras mantiene presionada la tecla Alt (Windows) u Opción (Macintosh).
• Para dividir un marco en cuatro, arrastre el borde del marco desde una esquina de la vista Diseño al centro de un marco. Para crear tres marcos, empiece con dos marcos y, a continuación, divida uno de ellos. No resulta fácil combinar dos marcos contiguos sin editar el código del conjunto de marcos, por lo que convertir cuatro marcos en tres es más difícil que convertir dos marcos en tres.
Eliminación de un marco ❖ Arrastre el borde del marco fuera de la página o hasta el borde del marco padre.
USO DE DREAMWEAVER CS4 212 Maquetación de páginas con HTML
Cuando un documento de un marco que se va a eliminar incluye contenido no guardado, Dreamweaver le pedirá que guarde el documento. Nota: No se puede eliminar totalmente un conjunto de marcos arrastrando los bordes. Para eliminar un conjunto de marcos, cierre la ventana de documento que lo muestra. Si se ha guardado el archivo de conjunto de marcos, elimine el archivo.
Cambio del tamaño de un marco • Para establecer el tamaño aproximado de los marcos, arrastre los bordes del marco en la vista Diseño de la ventana de documento.
• Para especificar los tamaños exactos y el espacio que el navegador debe asignar a una fila o columna de marcos cuando el tamaño de la ventana del navegador no permita mostrar todo el marco, utilice el inspector de propiedades.
Selección de marcos y conjuntos de marcos Para realizar cambios en las propiedades de un marco o conjunto de marcos, comience seleccionando el marco o conjunto de marcos que desea modificar. Puede seleccionar un marco o un conjunto de marcos en la ventana de documento o utilizando el panel Marcos. El panel Marcos proporciona una representación gráfica de los marcos de un conjunto de marcos. Muestra la jerarquía de la estructura del conjunto de marcos de una forma quizá difícil de percibir en la ventana de documento. En dicho panel, puede observar que mientras los conjuntos de marcos están rodeados por un borde grueso, los marcos están rodeados por una línea delgada gris y aparecen identificados por sus nombres.
Al seleccionar un marco en la ventana de documento de la vista Diseño, sus bordes muestran un contorno de línea de puntos; al seleccionar un conjunto de marcos, todos los bordes de los marcos contenidos en el conjunto de marcos muestran un contorno de línea de puntos fina. Nota: No es lo mismo situar el punto de inserción en un documento mostrado en un marco que seleccionar un marco. Para algunas operaciones (por ejemplo, establecer las propiedades del marco) es necesario seleccionar un marco.
USO DE DREAMWEAVER CS4 213 Maquetación de páginas con HTML
Selección de un marco o un conjunto de marcos en el panel Marcos 1 Seleccione Ventana > Marcos. 2 En el panel Marcos:
• Para seleccionar un marco, haga clic en él. (Aparecerá un contorno de selección alrededor del marco en el panel Marcos y en la vista Diseño de la ventana de documento.)
• Para seleccionar un conjunto de marcos, haga clic en el borde que rodea al conjunto de marcos.
Selección de un marco o un conjunto de marcos en la ventana de documento • Para seleccionar un marco, haga clic dentro de un marco en la vista Diseño mientras mantiene presionada la tecla Mayús-Alt (Windows) o las teclas Mayús-Opción (Macintosh).
• Para seleccionar un conjunto de marcos, haga clic en uno de los bordes del marco interior del conjunto de marcos en la vista Diseño. (Para ello, los bordes de los marcos deben estar visibles; si no lo están, seleccione Ver > Ayudas visuales > Bordes de marco.) Nota: Suele ser más fácil seleccionar conjuntos de marcos en el panel Marcos que en la ventana de documento. Para más información, consulte los temas anteriores.
Selección de un marco o un conjunto de marcos diferente • Para seleccionar el marco o conjunto de marcos siguiente o anterior en el mismo nivel jerárquico que la selección actual, presione Alt+flecha izquierda o Alt+flecha derecha (Windows), o Comando+flecha izquierda o Comando+flecha derecha (Macintosh). El uso de estas teclas le permite pasar por los distintos marcos y conjuntos de marcos en el orden en que están definidos en el archivo de conjunto de marcos.
• Para seleccionar el conjunto de marcos padre (el que contiene la selección actual), presione Alt+flecha arriba (Windows) o Comando+flecha arriba (Macintosh).
• Para seleccionar el primer marco o conjunto de marcos hijo del conjunto de marcos seleccionado actualmente (es decir, el primero en el orden en que están definidos en el archivo de conjunto de marcos), presione Alt+flecha abajo (Windows) o Comando+flecha abajo (Macintosh).
Apertura de un documento en un marco Puede especificar el contenido inicial de un marco insertando contenido nuevo en un documento vacío en un marco o abriendo un documento existente en un marco. 1 Sitúe el punto de inserción en un marco. 2 Elija Archivo> Abrir en marco. 3 Seleccione el documento que desea abrir en el marco y haga clic en Aceptar (Windows) o Escoger (Macintosh). 4 (Opcional) Para convertir este documento en el documento predeterminado que se mostrará en el marco al abrir
el conjunto de marcos en un navegador, guarde el conjunto de marcos.
Almacenamiento de archivos de marcos y conjuntos de marcos Para obtener una vista previa de un conjunto de marcos en un navegador, deberá guardar antes el archivo de conjunto de marcos y todos los documentos que se mostrarán en los marcos. Puede guardar cada archivo de conjunto de marcos y documento con marcos individualmente, o guardar al mismo tiempo el archivo de conjunto de marcos y todos los documentos que aparecen en los marcos.
USO DE DREAMWEAVER CS4 214 Maquetación de páginas con HTML
Nota: Cuando utiliza herramientas visuales de Dreamweaver para crear un conjunto de marcos, a cada nuevo documento que aparece en un marco se le asigna un nombre de archivo predeterminado. Por ejemplo, el primer archivo de conjunto de marcos se llamará UntitledFrameset-1, mientras que el primer documento en un marco se llamará UntitledFrame-1.
Almacenamiento de un archivo de conjunto de marcos ❖ Seleccione el conjunto de marcos en el panel Marcos o en la ventana de documento.
• Para guardar el archivo de conjunto de marcos, elija Archivo > Guardar conjunto de marcos. • Para guardar el archivo de conjunto de marcos como un archivo nuevo, elija Archivo > Guardar conjunto de marcos como. Nota: Si el archivo de conjunto de marcos no se ha guardado anteriormente, estos dos comandos serán iguales.
Almacenamiento de un documento que aparece en un marco ❖ Haga clic en el marco y seleccione Archivo > Guardar marco o Archivo > Guardar marco como.
Almacenamiento de todos los archivos asociados a un conjunto de marcos ❖ Elija Archivo> Guardar todo.
Se guardarán todos los documentos abiertos en el conjunto de marcos, incluidos el archivo de conjunto de marcos y todos los documentos con marco. Si el archivo de conjunto de marcos no se ha guardado todavía, en la vista Diseño aparecerá un borde grueso alrededor del conjunto de marcos (o del marco que no se ha guardado) y podrá seleccionar un nombre de archivo. Nota: Si ha utilizado Archivo > Abrir en marco para abrir un documento en un marco, cuando guarde el conjunto de marcos, este documento se convertirá en el predeterminado para mostrarse en dicho marco. Si no desea que este documento sea el predeterminado, no guarde el archivo de conjunto de marcos.
Visualización y definición de las propiedades y los atributos de los marcos Utilice el inspector de propiedades para ver y establecer la mayoría de las propiedades de un marco, incluidos los bordes, los márgenes y si deben aparecer barras de desplazamiento en los marcos. Al establecer una propiedad de marco, se anula la configuración de dicha propiedad correspondiente a un conjunto de marcos. Si lo desea, también puede definir algunos atributos de marco, como el atributo de título (que no es lo mismo que el atributo de nombre), para mejorar la accesibilidad. Puede activar la opción de creación de accesibilidad para los marcos para definir los atributos cuando se crean los marcos, o bien puede definir los atributos después de insertar un marco. Para editar los atributos de accesibilidad de un marco, utilice el inspector de etiquetas para editar el código HTML directamente.
Véase también “Dreamweaver y accesibilidad” en la página 706
Visualización o establecimiento de las propiedades de un marco 1 Seleccione un marco siguiendo uno de estos procedimientos:
• Haga clic en un marco en la ventana de documento mientras presiona la tecla Alt (Windows) o las teclas MayúsOpción (Macintosh).
• Haga clic en un marco en el panel Marcos (Ventana > Marcos).
USO DE DREAMWEAVER CS4 215 Maquetación de páginas con HTML
2 En el inspector de propiedades (Ventana > Propiedades), haga clic en la flecha de ampliación situada en la esquina
inferior derecha para ver todas las propiedades del marco. 3 Establezca las opciones del inspector de propiedades del marco. Nombre de marco Nombre utilizado por el atributo target de un vínculo o por un script para referirse al marco. El
nombre de un marco debe constar de una sola palabra; se admite el carácter de subrayado o guión bajo (_), aunque no los guiones (–), los puntos (.) ni los espacios. Los nombres de marcos deben comenzar con una letra (no con un número). Además, se distingue entre mayúsculas y minúsculas. No utilice términos que sean palabras reservadas de JavaScript (como top o navigator) para los nombres de los marcos. Para que un vínculo cambie el contenido de otro marco, deberá asignar un nombre al marco de destino. Para facilitar posteriormente la creación de vínculos entre marcos, asigne un nombre a los marcos al crearlos. Orig. Especifica el documento de origen que debe mostrarse en el marco. Haga clic en el icono de carpeta para
localizar y seleccionar un archivo. Desplaz. Especifica si aparecerán barras de desplazamiento en el marco. Al definir esta opción como Predet. no se
establecerá ningún valor para el atributo correspondiente, permitiendo que cada navegador utilice sus valores predeterminados. El valor predeterminado para la mayoría de los navegadores es Automático, que significa que las barras de desplazamiento aparecerán sólo cuando no hay espacio suficiente en la ventana del navegador para mostrar todo el contenido del marco actual. Mismo tamaño Impide al visitante arrastrar los bordes del marco para cambiar el tamaño del mismo en un navegador.
Nota: Dreamweaver le permite cambiar el tamaño de los marcos siempre; esta opción sólo afecta a los visitantes que ven los marcos en un navegador. Bordes Muestra u oculta los bordes del marco actual al visualizarlo en un navegador. Si selecciona la opción Bordes para un marco, se anulará la configuración de bordes del conjunto de marcos.
Las opciones de borde son Sí (mostrar bordes), No (ocultar bordes) y Predet.; de forma predeterminada, la mayoría de los navegadores muestran los bordes, salvo que la opción especificada para el conjunto de marcos padre sea No. Un borde está oculto únicamente cuando la opción de Borde especificada para todos los marcos que comparten el borde es No o cuando la propiedad Borde del conjunto de marcos padre está definida como No y la opción para los marcos que comparten el borde es Predet. Color de borde Establece un color de borde para todos los bordes del marco. Este color se aplica a todos los bordes
que están en contacto con el marco y anula el color de borde especificado para el conjunto de marcos. Ancho de márgenes Establece el ancho de los márgenes izquierdo y derecho en píxeles (es decir, el espacio que hay
entre los bordes del marco y su contenido). Alto de márgenes Establece el alto de los márgenes superior e inferior en píxeles (es decir, el espacio que hay entre el
borde del marco y su contenido). Nota: Establecer el ancho y el alto de los márgenes de un marco no es lo mismo que establecer los márgenes en el cuadro de diálogo Modificar > Propiedades de la página. Para cambiar el color de fondo de un marco, establezca el color de fondo del documento en el marco en las propiedades de la página.
Establecimiento de los valores de accesibilidad de un marco 1 En el panel Marcos (Ventana > Marcos), seleccione un marco colocando el punto de inserción en uno de los
marcos. 2 Seleccione Modificar > Editar etiqueta |