PDF (adobe.com)

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 no lo está, Dreamweaver le preguntará si desea copiar el archivo en el sitio.

Asimismo, las imágenes se pueden insertar de forma dinámica. Las imágenes dinámicas son aquellas que cambian con frecuencia. Por ejemplo, en los sistemas de rotación de rótulos publicitarios es necesario seleccionar de forma aleatoria un único rótulo de una lista de posibles rótulos y, después, mostrar dinámicamente la imagen del rótulo seleccionado cuando se solicite una página.

Tras insertar una imagen, puede definir atributos de accesibilidad de etiqueta de imagen que los lectores de pantalla pueden leer para usuarios ciegos. Estos atributos se pueden editar en el código HTML.

Para ver un tutorial sobre la creación de vínculos, consulte www.adobe.com/go/vid0148_es.

  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 la categoría Común del panel Insertar, haga clic en el icono Imagen .

    • En la categoría Común del panel Insertar, haga clic en el menú Imágenes y seleccione el icono Imagen. Con el icono Imagen visible en el panel Insertar, puede arrastrar el icono a la ventana del documento (o a la ventana de visualización de código, si está trabajando en el 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, siga con el 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.

  2. En el cuadro de diálogo que aparece, siga uno de estos procedimientos:

    • Seleccione Sistema de archivos para elegir un archivo de imagen.

    • Seleccione Fuente de datos para elegir un origen de imagen dinámica.

    • Haga clic en el botón Sitios y servidores para elegir un archivo de imagen en una carpeta remota de uno de los sitios de Dreamweaver.

  3. Busque y seleccione el origen de 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, se puede utilizar una ruta absoluta a una imagen que se encuentra en un servidor remoto (es decir, una imagen que no está disponible en la unidad de disco duro local). No obstante, si tiene algún problema de rendimiento al trabajar, le sugerimos que desactive la visualización de la imagen en la vista Diseño anulando la selección de Comandos > Mostrar archivos externos.
  4. Haga clic en Aceptar. Aparece el cuadro Atributos de accesibilidad de la etiqueta de imagen si se ha activado el cuadro de diálogo en Preferencias (Edición > Preferencias).
  5. Introduzca los valores en los cuadros de texto Texto alternativo y Descripción larga y haga clic en Aceptar.

    • En el cuadro de diálogo Texto alternativo, escriba un nombre para la imagen o una breve descripción. El lector de pantalla lee la información introducida en dicho cuadro. Debe limitar la entrada a alrededor de 50 caracteres. Si desea introducir descripciones más largas, puede proporcionar un vínculo en el cuadro de texto Descripción larga, a un archivo que contenga más información sobre la imagen.

    • En el cuadro Descripción larga, escriba la ubicación de un archivo que aparezca cuando el usuario haga clic en la imagen o en el icono de carpeta para desplazarse hasta el archivo. Este cuadro de texto proporciona un vínculo a un archivo con el que está relacionado u ofrece más información acerca de la imagen.

    Nota: Puede completar uno o ambos cuadros de texto, en función de sus necesidades. El lector de pantalla lee el atributo Texto alternativo de la imagen.
    Nota: Si presiona Cancelar, la imagen aparece en el documento, pero Dreamweaver no le asocia etiquetas o atributos de accesibilidad.
  6. En el inspector de propiedades (Ventana > Propiedades), establezca las propiedades de la imagen.

Definición de 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.

Ver gráfico a tamaño completo

  1. Seleccione Ventana > Propiedades para ver el inspector de propiedades para una imagen seleccionada.
  2. En el cuadro de texto situado bajo la imagen en miniatura, introduzca un nombre de modo que pueda hacer referencia a la imagen cuando utilice un comportamiento de Dreamweaver (como Intercambiar imagen) o cuando utilice un lenguaje de creación de scripts como JavaScript o VBScript.
  3. Defina cualquiera de las opciones de imagen.
    An (Ancho) y Al (Alto)
    El ancho y el alto 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 establece valores de An (Ancho) y Al (Alto) que no se corresponden con el ancho y el alto reales de la imagen, es posible que ésta no se muestre correctamente en el navegador. Para restaurar los valores originales, haga clic en las etiquetas de los cuadros de texto An (Ancho) y Al (Alto), o bien haga clic en el botón de restablecimiento del tamaño de la imagen situado a la derecha de los cuadros de texto An y Al al introducir un valor nuevo.

    Nota: Puede cambiar estos valores para establecer la escala del tamaño de visualización de esta instancia de imagen, aunque no por ello se reducirá el tiempo de descarga, ya que el navegador descarga todos los datos de la imagen antes de asignarle una escala. Si desea reducir el tiempo de descarga y conseguir que todas las instancias de una imagen tengan el mismo tamaño, utilice una aplicación de edición de imágenes.

    Origen
    Especifica el archivo de origen para 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 de señalización hasta un archivo del panel Archivos, haga clic en el icono de carpeta para buscar y seleccionar un documento del sitio o escriba el URL.

    Alinear
    Alinea una imagen y texto en la misma línea.

    Alt
    Especifica el texto alternativo que aparecerá en lugar de la imagen en los navegadores que sólo admiten texto o en aquéllos configurados para descargar las imágenes manualmente. Para usuarios con deficiencias visuales que usan sintetizadores de voz con navegadores que sólo 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.

    Espacio V y Espacio H
    Añaden espacio, en píxeles, a los lados de la imagen. Espacio V añade espacio en la parte superior e inferior de una imagen. Espacio H añade espacio a la izquierda y la derecha de una imagen.

    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 de navegador nueva y sin nombre.

    • _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, por lo que normalmente no es preciso especificarlo.

    • _top carga el archivo vinculado en la ventana completa del navegador, quitando así todos los marcos.

    Borde
    El ancho en píxeles del borde de la imagen. La configuración predeterminada es sin borde.

    Edición
    Inicia el editor de imágenes que ha especificado en las preferencias de editores externos y abre la imagen seleccionada.

    Edición de la configuración de imagen
     Abre el cuadro de diálogo Vista previa de imagen y le permite optimizar la imagen.

    Recorte
    Recorta el tamaño de una imagen, con lo que se eliminan las áreas 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 intensidad de una imagen.

    Restablecer tamaño
     Restaura los valores de An (Ancho) y Al (Alto) para devolver el tamaño original a la imagen. Este botón aparece a la derecha de los cuadros de texto An (Ancho) y Al (Alto) cuando se ajustan los valores de la imagen seleccionada.

Edición de los 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 de documento, seleccione la imagen.
  2. Siga uno de estos procedimientos:

    • Edite los atributos de imagen apropiados en la vista Código.

    • Haga clic con el botón derecho del ratón (Windows) o mantenga pulsada la tecla Control y haga clic (Macintosh) y, a continuación, seleccione Editar etiqueta.

    • En el inspector de propiedades, edite el valor de Alt (Alternativo).