Guía del usuario Cancelar

Insertar y editar imágenes en Dreamweaver

  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 insertar, editar, reemplazar y cambiar de tamaño las imágenes en Dreamweaver.

Las imágenes forman parte integrante de un sitio web, proporcionando contexto adicional a los visitantes del sitio. Aunque existe una amplia variedad de formatos de archivos gráficos, los formatos GIF, JPEG y PNG son los habitualmente utilizados en páginas web. Los formatos de archivo GIF y JPEG son compatibles con las páginas web y pueden verse en la mayoría de los navegadores. En el texto siguiente se indica más información sobre estos formatos de archivo:

GIF (formato de intercambio de gráficos): los archivos GIF utilizan un máximo de 256 colores y son los mejores para visualizar imágenes de tonos discontinuos. Los archivos GIF son ideales para visualizar grandes áreas de color homogéneo, como barras de navegación, botones, iconos, logotipos u otras imágenes con colores y tonos uniformes.

JPEG (grupo conjunto de expertos fotográficos): el formato de archivo JPEG es el mejor para imágenes fotográficas o de tonos continuos, ya que los archivos JPEG pueden contener millones de colores. A medida que aumenta la calidad de un archivo JPEG, también lo hace su tamaño y su tiempo de descarga. Al comprimir un archivo JPEG se puede conseguir un equilibrio adecuado entre la calidad de la imagen y el tamaño de archivo.

PNG (grupo de red portable): el formato de archivo PNG es un sustituto sin patente del GIF, que admite imágenes con color indexado, escala de grises y color verdadero, así como compatibilidad con las transparencias, mediante canal alfa. Los archivos PNG conservan la información de capa, vector, color y efectos, como las sombras paralelas. Además, todos los elementos son siempre completamente editables. Los archivos deben tener la extensión de nombre de archivo .png para que Dreamweaver pueda reconocerlos como archivos PNG.

Nota:

Dreamweaver no es un editor WYSIWYG (lo que ve es lo que obtiene). Es decir, puede añadir o insertar imágenes con Dreamweaver, pero no puede mover o colocar las imágenes a través de la interfaz.

Para mover las imágenes en el diseño, debe utilizar un CSS que muestre el contenido HTML en la forma que desee. Puede consultar los tutoriales básicos sobre HTML y CSS para saber cómo trabajar con imágenes mediante código. También puede ver el tutorial sobre cómo trabajar con imágenes en Dreamweaver.

Para saber cómo insertar y usar imágenes mediante la aplicación Dreamweaver, consulte las siguientes secciones.

Inserción de una imagen

Al insertar una imagen en un documento de Dreamweaver, se genera una referencia al archivo de imagen en el código HTML. Para asegurarse de que esta referencia es correcta, el archivo de imagen deberá estar en el sitio actual. Si la imagen no está en el sitio actual, Dreamweaver le preguntará si desea copiar el archivo en el sitio.

Dreamweaver también le permite insertar imágenes de forma dinámica. Las imágenes dinámicas son aquellas que cambian con frecuencia. Por ejemplo, los sistemas de rotación de rótulos publicitarios que seleccionan aleatoriamente un único rótulo de una lista de posibles rótulos. El sistema muestra dinámicamente la imagen del rótulo seleccionado cuando se solicita una página.

También puede arrastrar y soltar cualquier capa del panel Extract en cualquier lugar de la Vista en vivo de Dreamweaver mediante Guías interactivas y Vista rápida de elementos. El panel Extract le permite cargar archivos PSD y después arrastrar y soltar cualquier capa del archivo PSD directamente en su documento de Dreamweaver.

Tras insertar una imagen, puede definir los atributos de etiquetas y accesibilidad de imágenes que los lectores de pantalla extraen para los usuarios con discapacidad visual. Puede editar estos atributos en código HTML.

Para obtener información sobre cómo extraer imágenes de composiciones de PSD, consulte Extraer imágenes de archivos PSD.

  1. Coloque el punto de inserción en el lugar de la ventana de documento en el que desea que aparezca la imagen y, a continuación, siga uno de estos procedimientos:

    • En el panel Insertar, seleccione HTML en la lista desplegable. Haga clic en Imagen. Haga doble clic o arrastre el icono a la ventana del documento (o a la ventana de Vista de código si está trabajando con código).
    • Seleccione Insertar > Imagen.
    • Arrastre una imagen desde el panel Activos (Ventana > Activos) hasta la posición deseada de la ventana de documento. A continuación, siga con el paso 3.
    • Arrastre una imagen desde el panel Archivos hasta la posición deseada de la ventana de documento. A continuación, salte al paso 3.
    • Arrastre una imagen desde el escritorio hasta la posición deseada de la ventana de documento. A continuación, siga con el paso 3.
    • En Vista en vivo, arrastre una imagen desde el panel Extract o la pestaña Capas. Suelte el elemento en la parte superior, inferior, derecha o izquierda de un elemento usando las guías interactivas. También tiene la opción de soltar el elemento en un lugar exacto de la estructura del documento, haciendo clic en </> y a través de Vista rápida de elementos.
  2. Busque y seleccione el origen de la imagen o contenido que desee insertar.

    Si está trabajando en un documento que no está guardado, Dreamweaver genera una referencia con la estructura file:// para el archivo de imagen. Al guardar el documento en cualquier lugar del sitio, Dreamweaver convierte la referencia en una ruta relativa al documento.

    Nota:

    Al insertar imágenes, puede utilizar una ruta absoluta a una imagen que se encuentre en un servidor remoto. Es decir, una imagen que no esté disponible en el disco duro local. No obstante, si tiene algún problema de rendimiento al trabajar, puede desactivar la visualización de la imagen en la Vista de diseño si deja sin seleccionar la opción Comandos > Mostrar archivos externos.

  3. Haga clic en Aceptar

Ajustar propiedades de imagen

El inspector de propiedades de imagen permite establecer las propiedades de una imagen. Si no ve todas las propiedades de imagen, haga clic en la flecha de ampliación situada en la esquina inferior derecha.

Propiedades de imagen en el inspector de propiedades.

  1. Para ver el inspector de propiedades de una imagen seleccionada, haga clic en la imagen y seleccione Ventana > Propiedades.

  2. En el cuadro de texto de debajo de la imagen en miniatura, introduzca un nombre. Puede usar este nombre para hacer referencia a la imagen al utilizar un comportamiento de Dreamweaver (como Intercambiar imagen) o al utilizar un lenguaje de creación de scripts como JavaScript o VBScript.

  3. Defina cualquiera de las opciones de imagen.

    An (Anchura) y Al (Altura)

    La anchura y la altura de la imagen en píxeles. Dreamweaver actualiza automáticamente estos cuadros de texto con las dimensiones originales de la imagen al insertar una imagen en una página.

    Si ajusta valores de An (Anchura) y Al (Altura) que no se corresponden con la anchura y la altura reales de la imagen, es posible que esta no se muestre correctamente en los navegadores. Para restaurar los valores originales, haga clic en las etiquetas de los cuadros de texto An (Anchura) y Al (Altura), o bien haga clic en el botón Restablecimiento del tamaño de la imagen situado a la derecha de los cuadros de texto An y Al.

    Nota:

    Puede cambiar estos valores para establecer la escala del tamaño de la visualización de esta instancia de imagen. Sin embargo, el cambio no reduce el tiempo de descarga, ya que el navegador descarga todos los datos de la imagen antes de escalar la imagen. Para reducir el tiempo de descarga y asegurarse de que todas las instancias de una imagen aparezcan con el mismo tamaño, utilice una aplicación de edición de imágenes para modificar sus dimensiones.

    Origen

    Especifica el archivo de origen de la imagen. Haga clic en el icono de carpeta para localizar el archivo de origen o escriba la ruta correspondiente.

    Vínculo

    Especifica un hipervínculo para la imagen. Arrastre el icono Señalar archivo hasta un archivo del panel Archivos. Haga clic en el icono de carpeta para buscar un documento del sitio o escriba manualmente la URL.

    Alt

    Indica el texto alternativo que aparecerá en lugar de la imagen en los navegadores que solo admiten texto o en aquellos configurados para descargar las imágenes manualmente. Para usuarios con deficiencias visuales que usan sintetizadores de voz con navegadores que solo admiten texto, el texto se reproduce en voz alta. En algunos navegadores, este texto también aparece al situar el puntero sobre la imagen.

    Mapa y Herramientas de zona interactiva

    Permiten asignar una etiqueta y crear un mapa de imagen en el lado del cliente.

    Destino     Especifica el marco o la ventana donde se cargará la página vinculada. Esta opción no está disponible cuando la imagen no está vinculada a otro archivo. En la lista Destino figuran los nombres de todos los marcos del conjunto de marcos actual. También puede seleccionar estos nombres de destino reservados:

    • _blank carga el archivo vinculado en una ventana del navegador nueva y sin nombre.
    • _new carga el archivo vinculado en una nueva ventana del navegador.
    •  _parent carga el archivo vinculado en el conjunto de marcos padre o en la ventana del marco que contiene el vínculo. Si el marco que contiene el vínculo no está anidado, el archivo vinculado se cargará en la ventana completa del navegador.
    • _self carga el archivo vinculado en el mismo marco o ventana que el vínculo. Este destino es el predeterminado. No necesita especificar este valor tal cual.
    •  _top carga el archivo vinculado en la ventana completa del navegador, lo que hace que se quiten todos los marcos.

    Editar

    Ejecuta el editor de imágenes que haya indicado en las preferencias de editores externos y abre la imagen seleccionada.

    Editar configuración de imagen

    Abre el cuadro de diálogo Optimización de imágenes y le permite optimizar la imagen.

    Nota:

    El flujo de trabajo de optimización de imágenes ya no está disponible en Dreamweaver 21.0 y versiones posteriores.

    Actualizar desde el original

    Cuando la imagen que aparece en la página de Dreamweaver está sin sincronizar con el archivo original de Photoshop, Dreamweaver detecta que el archivo original se ha actualizado. La aplicación muestra en color rojo una de las flechas del icono de objeto inteligente. Al seleccionar la imagen web en Vista de diseño y hacer clic en el botón Actualizar desde el original en el inspector de propiedades, la imagen se actualiza automáticamente. La imagen actualizada refleja los cambios que ha realizado en el archivo original de Photoshop.

    Recorte

    Recorta el tamaño de una imagen y elimina las zonas no deseadas de la imagen seleccionada.

    Volver a muestrear

    Muestrea de nuevo una imagen cuyo tamaño se ha cambiado, lo que mejora su calidad en su nuevo tamaño y forma.

    Brillo y contraste

    Ajusta el brillo y el contraste de una imagen.

    Perfilar

    Ajusta la nitidez de una imagen.

    Nota:

    También puede modificar los atributos de una imagen en la Vista en vivo mediante el Inspector de propiedades de visualización rápida.

Editar atributos de accesibilidad de una imagen en el código

Si ha insertado los atributos de accesibilidad de una imagen, puede editar dichos valores en código HTML.

  1. En la ventana Documento, haga clic en la imagen o seleccione la etiqueta de imagen en el código.

  2. Siga uno de los siguientes procedimientos para introducir el nombre o una breve descripción de la imagen con menos de 50 caracteres en el cuadro Texto alternativo. El lector de pantalla lee la información introducida en dicho cuadro.  

    • Edite los atributos de imagen correspondientes en la Vista de código.
    • En el inspector de propiedades, modifique el valor Alt.


Cambiar de tamaño una imagen

Se puede cambiar visualmente el tamaño de elementos, como por ejemplo las imágenes, los plug-ins, los archivos de Shockwave o SWF, los applets y los controles ActiveX en Dreamweaver.

Cambiar de tamaño visualmente una imagen le permite ver cómo afecta la imagen al diseño en diferentes dimensiones, pero no cambia la escala del archivo de imagen a las proporciones que especifique. Si cambia el tamaño de una imagen visualmente en Dreamweaver sin utilizar una aplicación de edición de imágenes, el navegador del usuario escalará la imagen cuando se cargue la página. Esto puede hacer que la descarga de la página tarde más y que la imagen no se vea correctamente en el navegador del usuario.

Si desea reducir el tiempo de descarga y garantizar que todas las instancias de una imagen tengan el mismo tamaño, utilice una aplicación de edición de imágenes para cambiarles la escala. Lea el siguiente procedimiento para saber cómo redimensionar un elemento visualmente.

Cómo redimensionar un elemento visualmente

  1. Seleccione el elemento (por ejemplo, una imagen o un archivo SWF) en la ventana de documento.

    Aparecerán unos controladores de cambio de tamaño en los lados inferior y derecho del elemento y en la esquina inferior derecha. Si no aparecen los controles de cambio de tamaño, haga clic fuera del elemento y, a continuación, vuelva a seleccionarlo. Como alternativa, puede hacer clic en la etiqueta correspondiente del selector de etiquetas para seleccionar el elemento.

  2. Cambie el tamaño del elemento siguiendo uno de estos procedimientos:
    • Para ajustar la anchura del elemento, arrastre el controlador de selección del lado derecho.
    • Para ajustar la altura del elemento, arrastre el controlador de selección de la parte inferior.
    • Para ajustar al mismo tiempo el ancho y el alto del elemento, arrastre el controlador de selección de la esquina.
    • Para conservar las proporciones del elemento (su relación ancho/alto) al ajustar sus dimensiones, arrastre el controlador de selección de la esquina mientras pulsa la tecla Mayús.
    • Si desea ajustar la anchura y la altura de un elemento a un tamaño específico (por ejemplo, 1 por 1 píxel), utilice el inspector de propiedades. Introduzca un valor numérico en los campos An y Al. Puede cambiar visualmente el tamaño de los elementos hasta un mínimo de 8 por 8 píxeles.
    Ajustar la anchura y la altura de un elemento mediante el inspector de propiedades
    Ajustar la anchura y la altura de un elemento mediante el inspector de propiedades

  3. Para devolver un elemento con el tamaño cambiado a sus dimensiones originales, elimine los valores en los campos de anchura y altura en el inspector de propiedades. También puede hacer clic en el botón Restablecer tamaño del inspector de propiedades de imagen.

Devolver una imagen a su tamaño original

Haga clic en el botón Restablecer tamaño del inspector de propiedades de imagen.

Revertir una imagen a su tamaño original
Revertir una imagen a su tamaño original

Volver a muestrear una imagen con tamaño cambiado

Cuando cambie el tamaño de una imagen en Dreamweaver, también puede volver a muestrearla para adaptarla a sus nuevas dimensiones. El nuevo muestreo añade o quita píxeles de archivos de imagen JPEG y GIF cuyo tamaño se ha cambiado a fin de que se parezcan lo máximo posible a la imagen original. Al muestrear de nuevo una imagen, se reduce el tamaño del archivo y mejora el rendimiento de la descarga.

  1. Cambie el tamaño de la imagen tal y como se describe en la sección Cambiar de tamaño una imagen.

  2. Haga clic en el botón Volver a muestrear del inspector de propiedades de imagen.

    Volver a muestrear una imagen en Dreamweaver
    Volver a muestrear una imagen en Dreamweaver

    Nota:

    No es posible volver a muestrear elementos o marcadores de posición de imagen que no sean imágenes de mapa de bits.

Edición de imágenes en Dreamweaver

Dreamweaver proporciona funciones básicas de edición de imágenes que permiten modificar las imágenes sin tener que iniciar una aplicación externa de edición de imágenes como Photoshop. Las herramientas de edición de imágenes de Dreamweaver están diseñadas para que pueda trabajar con diseñadores de contenido que crean archivos de imágenes que se pueden utilizar en el sitio web.

En Dreamweaver, puede volver a muestrear imágenes, recortarlas, optimizarlas y perfilarlas. También puede ajustar el brillo y el contraste de las imágenes.

Nota:

No es necesario tener instalada Photoshop u otra aplicación de edición de imágenes en el equipo para poder utilizar las funciones de edición de imágenes de Dreamweaver.

  1. Seleccione Editar > Imagen. Puede definir las siguientes funciones de edición de imágenes de Dreamweaver:

    Optimizar

    Seleccione un ajuste preestablecido, especifique un formato de archivo y especifique un nivel de calidad. Al mover el regulador a través de los niveles de calidad, puede ver el tamaño de archivo de la imagen en el cuadro de diálogo. A continuación, haga clic en Aceptar.

    Volver a muestrear

    Añade o quita píxeles en archivos de imagen JPEG y GIF cuyo tamaño se ha cambiado a fin de que se parezcan lo máximo posible a la imagen original. Al muestrear de nuevo una imagen, se reduce el tamaño del archivo y mejora el rendimiento de la descarga.

    Cuando cambie el tamaño de una imagen en Dreamweaver, puede volver a muestrearla para adaptarla a sus nuevas dimensiones. Al muestrear de nuevo un objeto de mapa de bits, se añaden o quitan píxeles en la imagen para hacerla mayor o menor. Si se muestrea una imagen con una resolución más alta, la pérdida de calidad suele ser poco importante. Sin embargo, si se muestrea con una resolución más baja, siempre se pierden datos y se reduce la calidad.

    Recorte

    Editar imágenes reduciendo su área. Puede usar la opción de recorte para poner más énfasis en el tema de la imagen y eliminar elementos no deseados que haya alrededor del centro de interés.

    Brillo y contraste

    Modifica el contraste o el brillo de los píxeles de una imagen. Brillo y contraste afecta a los resaltados, las sombras y los tonos medios de las imágenes. Normalmente, la función Brillo/Contraste se utiliza para corregir imágenes que son demasiado oscuras o demasiado claras.

    Perfilar

    Ajusta el enfoque de una imagen aumentando el contraste de los bordes que haya en la imagen. Cuando se explora una imagen o se toma una foto digital, la acción predeterminada de la mayoría del software de captura de imágenes consiste en suavizar los bordes de los objetos de la imagen. La digitalización evita que se pierdan detalles minúsculos en los píxeles de que se componen las imágenes digitales. Sin embargo, para mostrar los detalles de los archivos de imágenes digitales, a menudo es necesario perfilar la imagen. Mediante la opción Perfilar se aumenta el contraste de los bordes, haciendo que la imagen aparezca más definida.

    Nota:

    las funciones de edición de imágenes de Dreamweaver solo se aplican a los formatos de archivo de imagen JPEG, GIF y PNG. Los demás formatos de archivo de imagen de mapa de bits no pueden editarse mediante estas funciones.

Recortar una imagen

Dreamweaver permite recortar o ajustar imágenes de archivos de mapa de bits.

Nota:

Al recortar una imagen, se cambia el archivo de imagen original del disco. Se recomienda conservar una copia de seguridad del archivo de imagen por si necesitara recuperar la imagen original.

  1. Abra la página que contiene la imagen que desea recortar, seleccione la imagen y realice una de las siguientes acciones:

    • Haga clic en el icono Herramienta Recortar  del inspector de propiedades de imagen.
    • Seleccione Editar > Imagen > Recortar.
    • Aparecerán unos controladores de recorte alrededor de la imagen seleccionada.
    Recortar imágenes en Dreamweaver
    Recortar imágenes en Dreamweaver

  2. Ajuste los controladores de recorte de modo que el recuadro de límite rodee el área de la imagen de mapa de bits que desee mantener.
  3. Haga doble clic en el recuadro de límite o pulse Intro para recortar la selección.
  4. En un cuadro de diálogo se le informará de que el archivo de imagen que está recortando cambiará en el disco. Haga clic en Aceptar.

    Los píxeles del mapa de bits seleccionado que se encuentren fuera del recuadro de límite se eliminarán, pero el resto de los objetos de la imagen permanecerán.

  5. Muestre una vista previa de la imagen para comprobar que la imagen ha quedado como esperaba. Si no es así, seleccione Edición > Deshacer Recortar para volver a la imagen original.

    Nota:

    Puede deshacer el efecto del comando Recortar y volver al archivo de imagen original hasta salir de Dreamweaver, o bien editar el archivo con una aplicación externa de edición de imágenes.

Optimizar una imagen

Puede optimizar imágenes de páginas web a través de Dreamweaver.

  1. Abra la página que contiene la imagen que desee optimizar. Seleccione la imagen deseada y, a continuación, realice una de las siguientes acciones:

    • Haga clic en el botón Editar configuración de imagen en el inspector de propiedades de imagen.
    • Seleccione Editar > Imagen > Optimizar.
    Editar la configuración de las imágenes mediante el inspector de propiedades
    Editar la configuración de las imágenes mediante el inspector de propiedades

  2. Realice los cambios deseados en el cuadro de diálogo Optimización de imágenes y haga clic en Aceptar.

    Optimizar la imagen en Dreamweaver
    Optimizar la imagen en Dreamweaver

Cómo perfilar una imagen

El perfilado aumenta el contraste de los píxeles situados alrededor de los bordes de los objetos para aumentar la definición o nitidez de la imagen.

  1. Abra la página que contiene la imagen que desee perfilar, seleccione la imagen y siga uno de estos procedimientos:
    • Haga clic en el botón Perfilar del inspector de propiedades de imagen.
    • Seleccione Editar > Imagen > Perfilar.
  2. Para especificar el grado de perfilado que Dreamweaver aplicará a la imagen, arrastre el regulador de control. También puede introducir un valor entre 0 y 10 en el cuadro de texto. Mientras ajusta la nitidez de la imagen en el cuadro de diálogo Perfilar, puede ver una vista previa del cambio de la imagen.

    Perfilar imágenes en Dreamweaver
    Perfilar imágenes en Dreamweaver

  3. Haga clic en Aceptar cuando esté satisfecho con la imagen.
  4. Guarde los cambios; para ello, seleccione Archivo > Guardar, o recupere la imagen original seleccionando Edición > Deshacer perfilar.

    Nota:

    Solo puede deshacer el efecto del comando Perfilar y volver al archivo de imagen original antes de guardar la página que contiene la imagen. Una vez que haya guardado la página, los cambios realizados en la imagen serán permanentes.

Ajustar el brillo y el contraste de una imagen

La opción Brillo y contraste modifica el contraste o el brillo de los píxeles de la imagen. Esta opción afecta a los resaltados, sombras y tonos medios de la imagen. Normalmente, la función Brillo y contraste se utiliza para corregir imágenes que sean demasiado oscuras o demasiado claras.

  1. Abra la página con la imagen que desee ajustar, selecciónela y siga uno de estos procedimientos:
    • Haga clic en el botón Brillo y contraste del inspector de propiedades de imagen.
    • Seleccione Editar > Imagen > Brillo/Contraste.
  2. Arrastre los controles deslizantes de Brillo y Contraste para ajustar los valores. Los valores pueden estar comprendidos entre -100 y 100.
    Ajustar el brillo y el contraste de las imágenes en Dreamweaver
    Ajustar el brillo y el contraste de las imágenes

  3. Haga clic en Aceptar.

Creación de una imagen de sustitución

Una sustitución es una imagen que, al visualizarse en un navegador, cambia cuando el puntero pasa sobre ella. Debe disponer de dos imágenes para crear la sustitución. Una imagen principal (la que aparece al cargarse inicialmente la página) y una imagen secundaria (la que aparece al pasar el puntero sobre la imagen principal). Las dos imágenes de una sustitución deben ser del mismo tamaño. Si las imágenes no son del mismo tamaño, Dreamweaver cambia el tamaño de la segunda imagen para que concuerde con las propiedades de la primera.

Las imágenes de sustitución están automáticamente configuradas para responder al evento onMouseOver. Puede hacer que una imagen responda a un evento diferente. Por ejemplo, un clic del ratón o el cambio de una imagen de sustitución.

  1. En la ventana de documento, sitúe el punto de inserción en el lugar donde desee que aparezca la imagen de sustitución.
  2. Introduzca la imagen de sustitución mediante uno de estos métodos:
    • En el panel Insertar, seleccione HTML en la lista desplegable. Seleccione Imagen de sustitución en la lista de opciones.
    • Seleccione Insertar > HTML > Imagen de sustitución.
  3. En el cuadro de diálogo Insertar imagen de sustitución, seleccione las imágenes y defina las propiedades de la sustitución. Puede configurar las siguientes propiedades:

    Configuración de las propiedades de una imagen de sustitución
    Configuración de las propiedades de una imagen de sustitución

    Nombre de la imagen

    El nombre de la imagen de sustitución.

    Imagen original

    La imagen que desea que aparezca al cargarse la página. Introduzca la ruta en el cuadro de texto o haga clic en Examinar y seleccione la imagen.

    Imagen de sustitución

    La imagen que desea que aparezca cuando el puntero pase por encima de la imagen original. Introduzca la ruta o haga clic en Examinar para seleccionar la imagen.

    Precargar imagen de sustitución

    Realiza una carga previa de imágenes en la caché del navegador para que la imagen no tarde en aparecer cuando el usuario pasa el puntero sobre la imagen.

    Texto alternativo

    (Opcional) Texto que describa la imagen para los usuarios que utilicen un navegador de solo texto.

    Al hacerse clic, ir a URL

    El archivo que desee que se abra cuando un usuario haga clic en la imagen de sustitución. Introduzca la ruta o haga clic en Examinar y seleccione el archivo.

    Nota:

    Si no define un vínculo para la imagen, Dreamweaver insertará un vínculo nulo (#) en el código fuente HTML al que va unido el comportamiento de la sustitución. Si elimina el vínculo nulo, la imagen de sustitución dejará de funcionar.

  4. Para obtener una vista previa de la imagen de sustitución, seleccione Archivo > Vista previa en tiempo real o pulse F12.

  5. En el navegador, desplace el puntero sobre la imagen original para ver la imagen de sustitución.
    Nota:

    No se puede ver el efecto que causa una imagen de sustitución en la vista de diseño.

Uso de un editor de imágenes externo

Mientras esté en Dreamweaver, puede abrir una imagen seleccionada en un editor externo de imágenes. Al regresar a Dreamweaver después de guardar el archivo de imagen editado, los cambios realizados en la imagen se podrán ver en la ventana Documento.

Puede configurar un editor primario externo y también definir los tipos de archivo que abre un editor. Puede seleccionar varios editores de imagen. Por ejemplo, puede establecer las preferencias para iniciar Photoshop cuando quiera editar un archivo JPEG e iniciar un editor de imágenes distinto cuando desee editar un GIF animado.

Iniciar el editor externo de imágenes

  1. Para abrir un editor externo, realice una de las siguientes acciones:

    • Haga doble clic en la imagen que quiera editar.
    • Haga clic con el botón derecho del ratón (Windows) o mantenga pulsada la tecla Control y haga clic (Macintosh) en la imagen que quiera editar. A continuación, haga clic en Editar con > Examinar y seleccione un editor.
    • Seleccione la imagen que quiera editar y haga clic en Editar en el inspector de propiedades.
    • Haga doble clic en el archivo de imagen en el panel Archivos para iniciar el editor de imágenes principal. Si no ha indicado ningún editor de imágenes, Dreamweaver abrirá el editor predeterminado para el tipo de archivo en cuestión.

    Si tras regresar a la ventana de Dreamweaver no aparece una imagen actualizada, seleccione la imagen y después haga clic en el botón Actualizar del inspector de propiedades.

Configurar un editor externo de imágenes para un tipo de archivo existente

Puede seleccionar el editor de imagen con el que desea abrir y editar los archivos gráficos. Para seleccionar un editor externo de imágenes, siga los pasos siguientes:

  1. Seleccione Editar > Preferencias (Windows) o Dreamweaver > Preferencias (macOS) y luego Tipos de archivo/editores en la lista Categoría del panel izquierdo.

  2. En la lista Extensiones, seleccione la extensión para la que desee establecer un editor externo.

    Definir un editor externo para tipos de archivo específicos
    Definir un editor externo para tipos de archivo específicos

  3. Haga clic en el botón Añadir (+) situado sobre la lista Editores.
  4. En el cuadro de diálogo Seleccionar editor externo, busque hasta encontrar la aplicación que desea iniciar como editor para este tipo de archivo.

  5. En el cuadro de diálogo Preferencias, haga clic en Convertir en principal si desea que este editor sea el editor principal de este tipo de archivo.

  6. Si desea configurar un editor adicional para este tipo de archivo, repita los pasos 3 y 4.

    Dreamweaver utilizará automáticamente el editor principal cuando decida editar una imagen de este tipo. Puede elegir otros editores que figuren en el menú contextual de la imagen en la ventana de documento.

Añadir un nuevo tipo de archivo a la lista Extensiones

  1. Seleccione Editar > Preferencias (Windows) o Dreamweaver > Preferencias (macOS) y luego Tipos de archivo/editores en la lista Categoría del panel izquierdo.

  2. En la categoría Tipos de archivo/editores del cuadro de diálogo Preferencias, haga clic en el botón Añadir (+) situado encima de la lista Extensiones.

    Aparecerá un cuadro de texto en la lista Extensiones.

  3. Seleccione la extensión del tipo de archivo para el que desee establecer un editor.

  4. Para seleccionar un editor externo para el tipo de archivo, haga clic en el botón Añadir (+) situado encima de la lista Editores.

  5. En el cuadro de diálogo que aparece a continuación, elija la aplicación que quiera utilizar para editar este tipo de imagen.

  6. Haga clic en Convertir en principal si desea que este editor sea el editor principal para este tipo de imagen.

Cambiar la preferencia de un editor existente

  1. Seleccione Editar > Preferencias (Windows) o Dreamweaver > Preferencias (macOS) y luego Tipos de archivo/editores en la lista Categoría del panel izquierdo.

  2. En el cuadro de diálogo de preferencias Tipos de archivo/editores, seleccione el tipo de archivo que va a cambiar en la lista Extensiones para ver los editores existentes.

  3. En la lista Editores, seleccione el editor deseado y luego realice una de las siguientes acciones:

    • Para añadir o quitar un editor, haga clic en los botones Añadir (+) o Eliminar (–) situados sobre la lista Editores.
    • Para cambiar el editor que deba iniciarse de manera predeterminada para la edición, haga clic en el botón Convertir en principal.

Aplicar comportamientos a imágenes

Puede aplicar cualquier comportamiento disponible a una imagen o zona interactiva de imagen. Al aplicar un comportamiento a una zona interactiva, Dreamweaver inserta el código HTML en la etiqueta area. Hay tres comportamientos que se aplican específicamente a las imágenes: Carga previa de imágenes, Intercambiar imagen y Restaurar imagen intercambiada.

Cargar previamente imágenes

Carga en la memoria caché del navegador las imágenes que no aparecen inmediatamente en la página (como las que se intercambian con comportamientos, elementos PA o JavaScript). La carga previa de imágenes evita demoras por descarga al llegar el momento en que aparecen las imágenes.

Intercambiar imagen

Intercambia una imagen por otra cambiando el atributo src de la etiqueta img. Use esta acción para crear sustituciones de botones y otros efectos de imágenes (incluido el intercambio de varias imágenes a la vez).

Restaurar imágenes intercambiadas

Restaura el último conjunto de imágenes intercambiadas a sus archivos de origen anteriores Esta acción se añade automáticamente siempre que se adjunta la acción Intercambiar imagen a un objeto de forma predeterminada. En este caso, no es necesario seleccionar manualmente la opción Intercambiar.

También puede usar comportamientos para crear sistemas de navegación más sofisticados, como los menús de salto.

Temas similares

 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