Aprenda a usar el panel Diseñador de CSS para crear o adjuntar hojas de estilo, consultas de medios y selectores, y configurar propiedades CSS.
El panel CSS Designer (Ventana > CSS Designer) es un Inspector de Propiedades de CSS que te permite crear "visualmente" estilos de CSS, archivos y establecer propiedades, junto con consultas de medios.
Las siguientes secciones están disponibles en la interfaz de CSS Designer:
Usando CSS Designer, puedes editar una regla individual en una hoja de estilos CSS (usa la pestaña Actual en CSS Designer), o si prefieres, puedes trabajar directamente en la hoja de estilos CSS (usa la pestaña Todas en CSS Designer).
En el panel Fuentes del panel Diseñador de CSS, haga clic en 
y, a continuación, haga clic en una de las siguientes opciones:
En función de la opción que elija, aparecerá el cuadro de diálogo Crear un nuevo archivo CSS o Adjuntar archivo CSS existente.
Haga clic en Examinar para especificar el nombre del archivo CSS y, si está creando una CSS, la ubicación en la que guardar el nuevo archivo.
Siga uno de estos procedimientos:
(Opcional) Haga clic en Uso condicional y especifique la consulta de medios que desea asociar al archivo CSS.
En el panel Diseñador de CSS, haga clic en una fuente de CSS en el panel Fuentes.
Haga clic 
en el panel @Medios para añadir una nueva consulta de medios.
Aparecerá el cuadro de diálogo Definir consulta de medios con todas las condiciones de consulta de medios que admite Dreamweaver.
Seleccione las Condiciones según sus necesidades.
Asegúrese de especificar valores válidos para todas las condiciones que seleccione. De lo contrario, las consultas de medios correspondientes no se crearán correctamente.
Solo se admite la operación "Y" para múltiples condiciones.
Si agrega condiciones de consulta de medios mediante código, solo se completarán las condiciones admitidas en el cuadro de diálogo Definir consulta de medios. El cuadro de texto Código del cuadro de diálogo, sin embargo, mostrará el código completamente (incluidas las condiciones no admitidas).
Si hace clic en una consulta de medios en la vista Diseño/en vivo, el puerto de visualización cambia para que coincida con la consulta de medios seleccionada. Para ver la ventana gráfica a tamaño completo, haga clic en Global en el panel @Medios.
En el panel CSS Designer, seleccione una fuente CSS en el panel Sources o una consulta de medios en el panel @Media.
En el panel Selectores, haga clic en . En función del elemento seleccionado en el documento, CSS Designer identifica de forma inteligente el selector relevante y te lo sugiere (hasta tres reglas).
Puede realizar una o varias de las siguientes acciones:
Nota: La opción Duplicar en consulta de medios solo está disponible cuando la fuente del Selector seleccionado contiene consultas de medios. No se puede duplicar un selector de una sola fuente en la consulta de medios de otra fuente.
Ahora puede copiar estilos de un selector y pegarlos en otro. Puede copiar todos los estilos o copiar solamente categorías específicas de estilos, como diseños, textos y bordes.
Haz clic derecho en un selector y elige entre las opciones disponibles:
Haz clic en el selector requerido y arrástralo a la nueva posición dentro del panel Selectores.
Las propiedades se agrupan en las siguientes categorías y se representan mediante distintos iconos en la parte superior del panel Propiedades:
Antes de editar las propiedades de un selector CSS, identifique los elementos que tiene asociados mediante la inspección inversa. Al hacerlo, puede evaluar si todos los componentes resaltados durante la inspección inversa realmente requieren cambios.
Seleccione la casilla de verificación Mostrar conjunto para ver solo las propiedades establecidas. Para ver todas las propiedades que se pueden especificar para un selector, anule la selección de la casilla de verificación Mostrar conjunto.
Para definir una propiedad, por ejemplo, width o border-collapse, haga clic en las opciones requeridas que se muestran junto a la propiedad en el panel Propiedades.
Las propiedades anuladas se indican mediante tachadura.
Los controles de cuadro del panel Propiedades del Diseñador de CSS le permiten definir rápidamente márgenes, rellenos y propiedades de posición. Si prefieres código, puedes especificar código abreviado para margen y relleno en los cuadros de edición rápida, como se muestra en este ejemplo.
Haga clic en los valores y escriba el valor en cuestión. Si quieres que los cuatro valores sean iguales y se cambien simultáneamente, haz clic en el icono de enlace del centro.
En cualquier momento, puedes desactivar o eliminar valores específicos, por ejemplo, el valor del margen izquierdo manteniendo los valores derecho, superior e inferior.
Las propiedades del control de borde están organizadas en pestañas lógicas para ayudarte a ver o modificar rápidamente las propiedades.
Si prefieres código, puedes especificar código abreviado para bordes y radio del borde en el cuadro de texto de edición rápida.
Para especificar las propiedades de Control de bordes, establezca primero las propiedades de la ficha “todos los lados”. Las otras pestañas se activan y las propiedades establecidas en la pestaña «Todos los lados» se reflejan para bordes individuales.
Cuando cambias una propiedad en las pestañas de bordes individuales, el valor de la propiedad correspondiente en la pestaña «Todos los lados» cambia a «indefinido» (valor predeterminado).
En el ejemplo siguiente, el color del borde se estableció en negro y luego se cambió a rojo para el borde superior.
El código que se inserta se basa en la configuración de preferencia para abreviado o completo.
Durante la inspección, las fichas se examinan en función de la prioridad de las fichas “definidas”. La máxima prioridad recae en la ficha “todos los lados”, seguida de las fichas “superior”, “derecha”, “inferior” e “izquierda”. Por ejemplo, si solo se establece el valor superior para un borde, el modo calculado lleva el enfoque a la pestaña «Superior» e ignora la pestaña «Todos los lados» porque esta no está establecida.
La función Deshabilitar/Activar propiedad CSS le permite convertir en comentarios partes del código CSS desde el Diseñador de CSS sin tener que realizar cambios directamente en el código. Al convertir en comentarios partes del código CSS, podrá comprobar los efectos que provocan en la página determinadas propiedades y valores.
Al deshabilitar una propiedad CSS, Dreamweaver añade etiquetas de comentario CSS y una etiqueta [disabled] a la propiedad CSS que ha deshabilitado. Posteriormente podrá volver a activar o eliminar fácilmente la propiedad CSS deshabilitada conforme a sus preferencias.
Puedes desactivar o eliminar cada propiedad usando CSS Designer.
La siguiente captura de pantalla muestra los iconos para deshabilitar y eliminar la propiedad width. Estos iconos son visibles al pasar el ratón sobre la propiedad.
También puedes usar los controles de eliminar y desactivar a nivel del grupo de control de borde para aplicar estas acciones a todas las propiedades.
Puede añadir o eliminar selectores y propiedades de CSS mediante métodos abreviados de teclado. También puedes navegar entre los grupos de propiedades en el panel Propiedades.
|
Método abreviado |
Flujo de trabajo |
|
CTRL + Alt + [Mayús =] |
Añade un selector (si el control está en la sección del selector). |
|
CTRL + Alt + S |
Añade un selector (si el control está en cualquier lugar de la aplicación). |
|
CTRL + Alt + [Mayús =] |
Añade una propiedad (si el control está en la sección de la propiedad). |
|
CTRL + Alt + P |
Añade una propiedad (si el control está en cualquier lugar de la aplicación). |
|
Seleccionar + Supr |
Elimina el selector si está seleccionado. |
|
CTRL + Alt + (RePág/AvPág) |
Cambia de sección en el subpanel de propiedades. |
La mayoría de las veces hay un solo selector CSS asociado a varios elementos de página. Por ejemplo, el texto del contenido principal de una página, un encabezado y el texto de un pie de página pueden asociarse al mismo selector CSS. Cuando edite las propiedades del selector CSS, todos los elementos asociados al selector se verán afectados, incluidos los que no va a cambiar.
Resaltado en vivo le ayuda a identificar todos los elementos asociados a un selector CSS. Si desea cambiar un solo elemento o varios elementos, puede crear un nuevo selector CSS para dichos elementos y luego editar las propiedades.
Para identificar los elementos de página asociados a un selector CSS, pase el ratón sobre el selector de Vista en vivo (con Código en vivo en “desactivado”). Dreamweaver resalta los elementos asociados con líneas de puntos.
Para bloquear el resaltado de los elementos, haga clic en el selector. Los elementos se resaltan con un borde azul.
Para eliminar el resaltado azul alrededor de los elementos, haga clic de nuevo en el selector.
El Resaltado en vivo está activado de forma predeterminada. Para desactivar Resaltado en vivo, haga clic en Opciones de Vista en vivo en la barra de herramientas Documento y haga clic en Desactivar resaltado en vivo.
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.
Abra el panel Diseñador de CSS mediante uno de estos procedimientos:
En el Diseñador de CSS, haga clic en el icono + próximo a Fuentes y seleccione Adjuntar archivo CSS existente.
Siga uno de estos procedimientos:
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.
Haga clic en Aceptar.
Crear sitios web atractivos en Dreamweaver
Diseña, codifica y gestiona sitios web dinámicos en una potente herramienta todo en uno.
