- Software
- Adobe
- Dreamweaver
- Cómo agregar imágenes a su sitio web en Dreamweaver
Libro Relacionado
Por Janine Warner
Añadir una imagen a su página web puede parecer casi mágico al principio porque el proceso es muy sencillo con Dreamweaver. El reto con los gráficos web no es añadirlos a sus páginas, sino crear imágenes atractivas que se cargan rápidamente en el navegador de su espectador.
Necesita otro programa, como Photoshop, Photoshop Elements o Fireworks, para crear, convertir, editar y optimizar imágenes. La optimización de las imágenes reduce el tamaño de los archivos para que las imágenes se descarguen más rápido. Dreamweaver proporciona algunas herramientas básicas de edición de imágenes, pero principalmente usted utiliza Dreamweaver para insertar y posicionar imágenes en su página.
Dreamweaver facilita la colocación de imágenes en sus páginas web y proporciona múltiples formas de hacerlo:
- Haga clic en el icono Imágenes en el panel Insertar común y, a continuación, seleccione una imagen mediante el cuadro de diálogo Insertar imagen.
- En el panel Archivos, haga clic y arrastre un nombre de imagen a la página en la que desea que aparezca la imagen.
- Utilice el menú Insertar.
Si no tiene a mano una imagen JPEG, GIF o PNG optimizada para la Web, puede descargar imágenes gratuitas que ya están optimizadas.
Para colocar una imagen en una página web utilizando el menú Insertar, siga estas instrucciones:
- Abra una página existente o cree y guarde una nueva página.
- Puede insertar imágenes en la parte superior izquierda de un nuevo archivo en blanco, y puede insertar imágenes en las etiquetas y elementos <div> de una página web, pero no puede colocar una imagen en el centro de una página sin utilizar etiquetas HTML adicionales o formato CSS para posicionarla.
- Seleccione Insert→Image→Image.Aparece el cuadro de diálogo Seleccionar fuente de imagen.
- Dependiendo de su sistema informático, puede obtener una vista previa de las imágenes a medida que las inserta de diferentes maneras. En un PC con Windows XP, seleccione Miniaturas en la lista desplegable del menú Ver a la derecha del campo Buscar en para mostrar versiones en miniatura de todas las imágenes de cualquier carpeta abierta. En una PC con Windows Vista o Windows 7, elija una opción de icono (Iconos pequeños, medios, grandes o extra grandes) de la lista desplegable del menú Ver a la derecha del campo Buscar en para mostrar versiones en miniatura de todas las imágenes de cualquier carpeta abierta. En un Mac, elige la opción Ver como columnas en la parte superior izquierda del cuadro de diálogo. Puede ver una sola vista previa de cualquier imagen seleccionada en el extremo derecho del cuadro de diálogo Crédito: Fotos de Casey Stoll
- Si inserta una imagen en una página y la imagen no se guarda en la carpeta de su sitio local, Dreamweaver le solicita con un cuadro de diálogo de advertencia y le ofrece copiar la imagen en la carpeta de su sitio local. Muchos diseñadores crean una subcarpeta llamada imágenes dentro de la carpeta del sitio local donde almacenan todas las imágenes en su sitio, pero usted puede organizar las imágenes en múltiples subcarpetas si lo prefiere.
- Seleccione la imagen en su página web para ver y editar las propiedades de la imagen. las opciones de imagen se muestran automáticamente en el inspector de propiedades en la parte inferior de la página cuando se selecciona una imagen.
Cuando se inserta un archivo de imagen en una página, en realidad no se añade una copia de la imagen a la página; se crea una referencia a la imagen. El código subyacente se parece mucho al código de un enlace de una página a otra.
Tanto las referencias de imagen como los enlaces incluyen el nombre del archivo y la ruta de la página a ese archivo. Esencialmente, está creando una instrucción para que un navegador web encuentre la imagen cuando muestre la página.
Para mostrar una imagen en su página web, necesita cargar tanto la página como la imagen cuando publique su sitio web. Si sus archivos de imagen y las páginas que se refieren a esos archivos no están en la misma ubicación relativa en su disco duro como lo están en su servidor web, usted rompe la referencia a sus imágenes, y un feo icono de Imagen Rota aparece en su página.
La mejor manera de asegurarse de que sus imágenes y archivos permanezcan donde se supone que deben estar en relación unos con otros es dejar que Dreamweaver los controle por usted. Por eso es tan importante completar el proceso de configuración del sitio y asegurarse de que nunca mueva o renombre una imagen, excepto en el panel Archivos.