Guía del usuario Cancelar

Diseño de páginas con el Diseñador de CSS

  1. Guía del usuario de Dreamweaver
  2. Introducción
    1. Conceptos básicos sobre diseño web adaptable
    2. Novedades de Dreamweaver
    3. Desarrollo web con Dreamweaver: información general
    4. Dreamweaver / Preguntas frecuentes
    5. Métodos abreviados de teclado
    6. Requisitos del sistema para Dreamweaver
    7. Resumen de funciones
  3. Dreamweaver y Creative Cloud
    1. Sincronizar la configuración de Dreamweaver con Creative Cloud
    2. Bibliotecas Creative Cloud en Dreamweaver
    3. Uso de archivos de Photoshop en Dreamweaver
    4. Trabajar con Adobe Animate y Dreamweaver
    5. Extraer archivos SVG optimizados para la Web desde bibliotecas
  4. Espacios de trabajo y vistas de Dreamweaver
    1. El espacio de trabajo de Dreamweaver
    2. Optimización del espacio de trabajo de Dreamweaver para la implementación visual
    3. Buscar archivos por nombre de archivo o contenido | Mac OS
  5. Configuración de sitios
    1. Acerca de los sitios de Dreamweaver
    2. Configuración de una versión local del sitio
    3. Conectar con servidores de publicación
    4. Configuración de un servidor de prueba
    5. Importación y exportación de la configuración de un sitio de Dreamweaver
    6. Traer sitios web existentes desde un servidor remoto a la raíz del sitio local
    7. Funciones de accesibilidad en Dreamweaver
    8. Ajustes avanzados
    9. Configuración de las preferencias de sitio para transferir archivos
    10. Especificación de la configuración del servidor proxy en Dreamweaver
    11. Sincronizar la configuración de Dreamweaver con Creative Cloud
    12. Uso de Git en Dreamweaver
  6. Administrar archivos
    1. Creación y apertura de documentos
    2. Administración de archivos y carpetas
    3. Carga de archivos al servidor y descarga desde el mismo
    4. Desprotección y protección de archivos
    5. Sincronizar archivos
    6. Comparación de archivos para detectar diferencias
    7. Ocultación de archivos y carpetas en el sitio de Dreamweaver
    8. Activación de Design Notes para sitios de Dreamweaver
    9. Prevención de la posible actuación repentina de Gatekeeper
  7. Maquetación y diseño
    1. Usar ayudas visuales al diseñar
    2. Información sobre el uso de CSS para diseñar la página
    3. Diseño de sitios web interactivos con Bootstrap
    4. Creación y uso de consultas de medios en Dreamweaver
    5. Presentación de contenido en tablas
    6. Colores
    7. Diseño interactivo mediante diseños de cuadrícula fluida
    8. Extract en Dreamweaver
  8. CSS
    1. Aspectos básicos de las hojas de estilos en cascada
    2. Diseño de páginas con el Diseñador de CSS
    3. Uso de preprocesadores de CSS en Dreamweaver
    4. Configuración de las preferencias de estilos CSS en Dreamweaver
    5. Mover reglas CSS en Dreamweaver
    6. Conversión de CSS en línea en una regla CSS en Dreamweaver
    7. Uso de etiquetas div
    8. Aplicación de degradados al fondo
    9. Creación y edición de efectos de transición de CSS3 en Dreamweaver
    10. Formatear código
  9. Contenido de página y activos
    1. Definición de las propiedades de la página
    2. Configuración de propiedades de encabezado CSS y propiedades de vínculo CSS
    3. Uso de texto
    4. Buscar y reemplazar texto, etiquetas y atributos
    5. Panel DOM
    6. Editar en la Vista en vivo
    7. Codificación de documentos en Dreamweaver
    8. Selección y visualización de elementos de la ventana de documento
    9. Configuración de las propiedades de texto en el inspector de propiedades
    10. Revisión ortográfica de una página web
    11. Uso de las reglas horizontales en Dreamweaver
    12. Añadir y modificar combinaciones de fuentes en Dreamweaver.
    13. Trabajo con activos
    14. Inserción y actualización de fechas en Dreamweaver
    15. Creación y gestión de activos favoritos en Dreamweaver
    16. Insertar y editar imágenes en Dreamweaver
    17. Adición de objetos multimedia
    18. Adición de vídeos en Dreamweaver
    19. Insertar vídeo HTML5
    20. Insertar archivos SWF
    21. Adición de efectos de sonido
    22. Insertar audio HTML5 en Dreamweaver
    23. Trabajar con elementos de bibliotecas
    24. Uso de texto árabe y hebreo en Dreamweaver
  10. Establecimiento de vínculos y navegación
    1. Acerca del establecimiento de vínculos y la navegación
    2. Vinculación
    3. Mapas de imágenes
    4. Vínculos de solución de problemas
  11. Widgets y efectos de jQuery
    1. Uso de interfaz de usuario y widgets móviles de jQuery en Dreamweaver
    2. Uso de efectos jQuery en Dreamweaver
  12. Programación de sitios web
    1. Acerca de la programación en Dreamweaver
    2. Entorno de programación en Dreamweaver
    3. Configuración de las preferencias de programación
    4. Personalización de los colores del código
    5. Escritura y edición de código
    6. Sugerencias de código y completado de código
    7. Contraer y expandir código
    8. Reutilizar código con fragmentos
    9. Depuración de código mediante linting
    10. Optimización del código
    11. Edición de código en Vista de diseño
    12. Trabajo con el contenido de Head para páginas
    13. Inserción del lado del servidor incluida en Dreamweaver
    14. Uso de bibliotecas de etiquetas en Dreamweaver
    15. Importación de etiquetas personalizadas a Dreamweaver
    16. Uso de comportamientos de JavaScript (instrucciones generales)
    17. Aplicación de comportamientos JavaScript incorporados
    18. Acerca de XML y XSLT
    19. Realización de transformaciones XSL del lado del servidor en Dreamweaver
    20. Realización de transformaciones XSL en el lado del cliente en Dreamweaver
    21. Adición de entidades de caracteres para XSLT en Dreamweaver
    22. Formatear código
  13. Flujos de trabajo de varios productos
    1. Instalación y uso de extensiones para Dreamweaver
    2. Actualizaciones integradas en Dreamweaver
    3. Insertar documentos de Microsoft Office en Dreamweaver (solo Windows)
    4. Trabajo con Fireworks y Dreamweaver
    5. Edición de contenido en sitios de Dreamweaver con Contribute
    6. Integración de Dreamweaver Business Catalyst
    7. Crear campañas de correo electrónico personalizado
  14. Plantillas
    1. Acerca de las plantillas de Dreamweaver
    2. Reconocimiento de plantillas y documentos basados en plantillas
    3. Crear una plantilla de Dreamweaver
    4. Crear regiones editables en plantillas
    5. Creación de tablas y regiones repetidas en Dreamweaver
    6. Usar regiones opcionales en plantillas
    7. Definición de atributos de etiqueta editables en Dreamweaver
    8. Creación de plantillas anidadas en Dreamweaver
    9. Edición, actualización y eliminación de plantillas
    10. Exportar e importar contenido xml en Dreamweaver
    11. Aplicación o eliminación de una plantilla de un documento existente
    12. Edición de contenido en plantillas de Dreamweaver
    13. Reglas de sintaxis de etiquetas de plantilla en Dreamweaver
    14. Configuración de preferencias de resaltado en regiones de plantillas
    15. Ventajas de usar plantillas en Dreamweaver
  15. Móvil y multipantalla
    1. Creación de consultas de medios
    2. Cambio de la orientación de página para dispositivos móviles
    3. Creación de aplicaciones web para dispositivos móviles con Dreamweaver
  16. Sitios, páginas y formularios web dinámicos
    1. Aspectos básicos de las aplicaciones web
    2. Configuración del ordenador para desarrollo de aplicaciones
    3. Solución de problemas de conexiones a bases de datos
    4. Eliminación de secuencias de comandos de conexión en Dreamweaver
    5. Diseñar páginas dinámicas
    6. Introducción a las fuentes de contenido dinámico
    7. Definir fuentes de contenido dinámico
    8. Añadir contenido dinámico a las páginas
    9. Cambio de contenido dinámico en Dreamweaver
    10. Visualización de registros de bases de datos
    11. Proporcionar datos en vivo y solucionar sus problemas en Dreamweaver
    12. Añadir comportamientos de servidor personalizados en Dreamweaver
    13. Crear formularios con Dreamweaver
    14. Uso de formularios para recopilar información de los usuarios
    15. Crear y activar formularios de ColdFusion en Dreamweaver
    16. Crear formularios web
    17. Compatibilidad mejorada con HTML5 para elementos de formulario
    18. Desarrollar un formulario con Dreamweaver
  17. Creación visual de aplicaciones
    1. Creación de las páginas maestra y de detalles en Dreamweaver
    2. Crear páginas de búsqueda y resultados
    3. Crear una página de inserción de registros
    4. Crear una página de actualización de registros en Dreamweaver
    5. Creación de páginas de eliminación de registros en Dreamweaver
    6. Usar comandos ASP para modificar una base de datos en Dreamweaver
    7. Crear una página de registro
    8. Crear una página de inicio de sesión
    9. Creación de una página para acceso exclusivo de usuarios autorizados
    10. Protección de carpetas en ColdFusion con Dreamweaver
    11. Uso de componentes de ColdFusion en Dreamweaver
  18. Prueba, vista previa y publicación de sitios web
    1. Vista previa de páginas
    2. Vista previa de páginas web de Dreamweaver en varios dispositivos
    3. Comprobación del sitio de Dreamweaver
  19. Solución de problemas
    1. Problemas resueltos
    2. Problemas conocidos

 

 

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.

Panel Diseñador de CSS
Panel Diseñador de CSS

El panel Diseñador de CSS (Ventana > Diseñador de CSS) es un inspector de propiedades de CSS que permite crear “visualmente” archivos y estilos CSS, así como definir propiedades y consultas de medios.

Las siguientes secciones están disponibles en la interfaz de Diseñador de CSS:

  • Fuentes: una colección de archivos CSS asociados al proyecto
  • @Medios: consultas de medios para controlar el tamaño de la pantalla
  • Selectores: selectores asociados a la consulta de medios seleccionada en el panel @Medios
  • Propiedades: propiedades asociadas con el selector escogido, con una opción para mostrar solo las propiedades establecidas

Usando el Diseñador de CSS, puede editar reglas individuales en una hoja de estilos CSS (utilice la ficha Actual del Diseñador de CSS) o, si lo prefiere, puede trabajar directamente en la hoja de estilos CSS (utilice la ficha Todo del Diseñador de CSS).

Crear y adjuntar hojas de estilo

  1. 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:

    • Crear un nuevo archivo CSS: para crear y adjuntar un nuevo archivo CSS al documento
    • Adjuntar archivo CSS existente: para adjuntar un archivo CSS existente al documento
    • Definir en página: para definir un CSS dentro del documento
    Creación e inclusión de hojas de estilos con el Diseñador de CSS
    Creación e inclusión de hojas de estilos con el Diseñador de CSS

    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.

  2. Haga clic en Examinar para especificar el nombre del archivo CSS y, si está creando un CSS, la ubicación en la que guardar el nuevo archivo.

  3. Siga uno de estos procedimientos:

    • Haga clic en Vínculo para vincular el documento de Dreamweaver con el archivo CSS.
    • Haga clic en Importar para importar el archivo CSS al documento.
  4. (Opcional) Haga clic en Uso condicional y especifique la consulta de medios que desea asociar al archivo CSS.

Definición de consultas de medios

  1. En el panel Diseñador de CSS, haga clic en una fuente de CSS en el panel Fuentes.

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

  3. Seleccione las Condiciones según sus necesidades.

    Definición de consultas de medios
    Definición de consultas de medios

    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.

    Nota:

    Solo se puede usar la operación "Y" cuando hay más de una condición.

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 de Diseño/en vivo, la ventana gráfica 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.

Definición de selectores CSS

  1. En el panel Diseñador de CSS, seleccione una fuente de CSS en el panel Fuentes o una consulta de medios en el panel @Medios.

  2. En el panel Selectores, haga clic en . Dependiendo del elemento seleccionado en el documento, el Diseñador de CSS lo identificará automáticamente y le solicitará el selector correspondiente (hasta tres reglas).

    Puede realizar una o varias de las siguientes acciones:

    • Utilice las teclas de flecha arriba o flecha abajo para que el selector sugerido sea más o menos específico.
    • Elimine la regla sugerida y escriba el selector necesario. Asegúrese de escribir el nombre del selector junto con la definición del Tipo de selector. Por ejemplo, si se especifica un ID, anteponga al nombre del selector un “#”.
    • Para buscar un selector específico, utilice el cuadro de búsqueda situado en la parte superior del panel.
    • Para cambiar el nombre de un selector, haga clic en el selector y escriba el nombre deseado.
    • Para reorganizar los selectores, arrastre los selectores hasta la posición que desee.
    • Para mover un selector de una fuente a otra, arrastre el selector hasta la fuente deseada del panel Fuentes.
    • Para duplicar un selector en la fuente seleccionada, haga clic con el botón derecho del ratón en el selector y haga clic en Duplicar.
    • Para duplicar un selector y añadirlo a una consulta de medios, haga clic con el botón derecho del ratón en el selector, pase el puntero del ratón por Duplicar en consulta de medios y, a continuación, elija la consulta de medios.

    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.

Copia y pegado de estilos

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.

Haga clic con el botón derecho en un selector y elija entre las opciones disponibles: 

  • Si un selector no tiene ningún estilo, se desactivan las opciones Copiar y Copiar todos los estilos.
  • Pegar estilos se desactiva para los sitios remotos que no se puedan editar. Sin embargo, las opciones Copiar y Copiar todos los estilos están disponibles.
  • Es posible pegar estilos que ya existen parcialmente en un selector (superposición). Se pega la unión de todos los selectores.
  • La copia y el pegado de estilos también funcionan para diferentes vínculos de archivos CSS: estilos importados, vinculados y en línea.
Copiar y pegar estilos
Copiar y pegar estilos

Reorganización de los selectores

Haga clic en el selector que quiera y arrástrelo a su nueva posición dentro del panel Selectores.

Definición de las propiedades CSS

Las propiedades se agrupan en las siguientes categorías y se representan mediante distintos iconos en la parte superior del panel Propiedades:

  • Diseño
  • Texto
  • Borde
  • Fondo
  • Más (lista de propiedades "solo texto", sin propiedades con controles visuales)
Nota:

Antes de editar las propiedades de un selector CSS, identifique los elementos que tiene asociados mediante la inspección inversa. Al hacerlo, podrá saber si todos los componentes resaltados durante la inspección inversa requieren realmente 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, como 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 que se han anulado aparecen tachadas.

Establecimiento de márgenes, relleno y posición

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 prefiere usar código, puede especificar el código abreviado de margen y relleno en los cuadros de edición rápida, como se puede ver en este ejemplo.

Propiedad margin
Propiedad margin

Haga clic en los valores y escriba el valor en cuestión. Si desea que los cuatro valores sean iguales y cambien simultáneamente, haga clic en el icono de vínculo en el centro.

Cuando quiera, podrá deshabilitar o eliminar valores específicos, por ejemplo, el valor de margen izquierdo, conservando los valores derecho, superior e inferior.

Establecimiento de propiedades de borde

Las propiedades de Control de bordes se organizan en fichas lógicas para ayudarle a ver o modificar las propiedades de forma rápida. 

Propiedades de control de bordes
Propiedades de control de bordes

Si prefiere usar códigos, puede especificar el código de la forma abreviada para los bordes y los radios de bordes en los cuadros de edición rápida.

Para especificar las propiedades de Control de bordes, establezca primero las propiedades de la ficha “todos los lados”. Posteriormente, se activarán las demás fichas y se reflejarán las propiedades definidas en la ficha “todos los lados” en cada uno de los bordes.

Cuando cambie una propiedad en las fichas de los distintos bordes, el valor de la propiedad correspondiente en la ficha “todos los lados” pasará a “no definido” (valor predeterminado). 

En el siguiente ejemplo, el color de borde se definió en negro y luego se cambió a rojo para el borde superior. 

Configuración del color de borde para todos los lados
Configuración del color de borde para todos los lados

Borde por todos los lados
Borde por todos los lados

Definición del color de borde de la parte superior
Definición del color de borde de la parte superior

Color de borde en rojo por la parte superior
Color de borde en rojo por la parte superior

El código que se inserta se basa en la configuración de preferencias para la forma abreviada o sin abreviar. 

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 define el valor superior de un borde, el modo calculado se concentra en la ficha “superior” e ignora la ficha “todos los lados” porque esta no se ha definido.

Desactivación o eliminación de propiedades

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.

El Diseñador de CSS permite desactivar o eliminar todas las propiedades.

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.

Desactivación/eliminación de una propiedad
Desactivación/eliminación de una propiedad

También puede usar los controles de eliminación y desactivación en el nivel de grupo Control de bordes para aplicar estas acciones a todas las propiedades.

Métodos abreviados de teclado

Puede añadir o eliminar selectores y propiedades de CSS mediante métodos abreviados de teclado. También puede desplazarse 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.

Identificar los elementos de página asociados a un selector CSS

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.

El 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 el 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. 

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 cualquier hoja de estilos que cree o copie en el sitio.

  1. Abra el panel Diseñador de CSS mediante uno de estos procedimientos:

    • Seleccione Ventana > Diseñador de CSS.
    • Presione Mayús + F11.
  2. En el Diseñador de CSS, haga clic en el icono + situado junto a Fuentes y seleccione Adjuntar archivo CSS existente.

    Adjuntar archivo CSS existente
    Adjuntar archivo CSS existente

  3. Siga uno de estos procedimientos:

    • Haga clic en Examinar para localizar una hoja de estilos CSS externa.
    • Escriba la ruta de la hoja de estilos en el cuadro Archivo/URL.
  4. 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.

  5. Haga clic en OK.

 Adobe

Obtén ayuda de forma más rápida y sencilla

¿Nuevo usuario?

Adobe MAX 2024

Adobe MAX
La conferencia de creatividad

Del 14 al 16 de octubre en Miami Beach y en línea

Adobe MAX

La conferencia de creatividad

Del 14 al 16 de octubre en Miami Beach y en línea

Adobe MAX 2024

Adobe MAX
La conferencia de creatividad

Del 14 al 16 de octubre en Miami Beach y en línea

Adobe MAX

La conferencia de creatividad

Del 14 al 16 de octubre en Miami Beach y en línea