Microsoft Expression Web: imágenes

Las imágenes se utilizan mucho en las páginas web para que parezcan interesantes y proporcionar una mejor experiencia de usuario. En este capítulo, aprenderemos cómo agregar imágenes al sitio web. Como de costumbre, vayamos paso a paso y aprendamos el proceso en detalle.

Step 1 - Para comenzar a agregar imágenes, creemos un nuevo sitio de una página y cambiemos el nombre del archivo default.html a index.html.

Step 2- Ahora necesitamos incluir imágenes en el sitio web para que podamos usar esas imágenes en la página web. Creemos una nueva carpeta. En la lista de carpetas, haga clic con el botón derecho en el nombre del sitio web.

Step 3- Actualmente, no hay imágenes en esta carpeta. Para agregar imágenes en esta carpeta, simplemente seleccione y arrastre imágenes desde su disco duro y suéltelas sobre la carpeta de imágenes.

Verás que las imágenes se agregan al sitio web images carpeta, como se muestra en la siguiente captura de pantalla.

Step 4- Ahora estas imágenes están incluidas en su sitio web, pero ninguna de ellas se utiliza en una página web. Una forma sencilla de agregar una imagen en la página web es arrastrar la imagen desde la carpeta de imágenes y soltarla en la vista de código donde desea agregar la imagen en la página web.

Supongamos que queremos agregar una imagen debajo del encabezado. Cuando suelte la imagen y suelte el botón del mouse, se mostrará el siguiente cuadro de diálogo.

Aquí puede especificar el texto alternativo y la descripción larga. Luego haga clic en Aceptar y guarde la página web. Ahora puedes ver eso<img> se agrega la etiqueta con el nombre alternativo y la fuente de la imagen.

Step 5 - Siga el mismo proceso y agregue la segunda imagen junto con su nombre alternativo y fuente.

Ahora el index.html El archivo aparecerá de la siguiente manera:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns = "http://www.w3.org/1999/xhtml">  
   <head> 
      <meta content = "text/html; charset = utf-8" http-equiv = "Content-Type" /> 
   </head>  
   
   <body> 
      <h1> Working with images </h1> 
      <img alt = "Beautiful Birds" src = "images/birds.jpg" /> 
      <img alt = "Other Birds" src = "images/birds2.jpg" /> 
   </body>  
</html>

Step 6 - el Picture PropertiesEl cuadro de diálogo le da acceso a los atributos de imagen más utilizados. Cuando hace doble clic en una imagen, se mostrará el cuadro Propiedades de imagen.

En Expression Web, el cuadro de diálogo Propiedades de imagen tiene dos pestañas, General y Appearance.

A continuación se muestran las opciones disponibles en el General tab.

  • Picture - Contiene el nombre de carpeta / archivo de la imagen gráfica.

  • Alternate Text- Escriba el texto que desea que se muestre para las imágenes cuando el gráfico se esté descargando, cuando no se pueda encontrar o cuando un visitante del sitio mueva el puntero sobre él. Este texto también será utilizado por un lector de pantalla si su espectador está usando uno.

  • Long Description- En ocasiones, algunas palabras pueden no ser suficientes para describir su imagen. Los cuadros y gráficos son ejemplos. Haga clic en Examinar para seleccionar un archivo que contenga una descripción más larga de la imagen.

  • Location - Si desea vincular su imagen a una página web o una imagen más grande, inserte el hipervínculo aquí.

  • Target Frame - Si la página actual es una página de marcos, esta opción indica en qué marco se debe mostrar el enlace O puede elegir que la imagen o la página se abra en una nueva ventana.

Las siguientes opciones están disponibles en el Appearance tab.

  • Wrapping Style - Especifique cómo flota la imagen en la página, como Ninguna, Izquierda o Derecha.

  • Layout - En esta sección, puede establecer la alineación, el grosor del borde, los márgenes horizontales y verticales.

  • Size- Expression Web establece automáticamente las propiedades de ancho y alto de la imagen en función de las dimensiones reales de la imagen. En lugar de cambiar el tamaño de su imagen cambiando estas dimensiones, cambie el tamaño de la imagen con su editor gráfico.

Step 7- Ahora, obtengamos una vista previa de la página web en el navegador; mostrará la siguiente salida.