Páginas web con FrontPage Express

2. Imágenes

Los objetivos de la segunda lección son:

2.1 Insertar imágenes en un documento
2.2 Conocer las propiedades de la imagen
2.3 Actividad nº 2: Insertar imágenes
2.4 Conocer la etiqueta de imágenes en HTML

2.1 Insertar imágenes en un documento

En esta lección vamos a incluir una imagen en nuestra página personal. Hay que señalar que la escasa velocidad de la Red en las conexiones normales impide que podamos incluir todas la imágenes que queramos en nuestras páginas, porque su inclusión retarda la visión de los documentos, así que tenemos que hacer un esfuerzo por incluir sólo las imágenes necesarias.

Los principales formatos de imágenes que se utilizan en Internet son GIF y JPG. El primero para imágenes con pocos colores (hasta 256) y el segundo para fotografías de millones de colores. Los archivos de imagen con extensión GIF son adecuados para introducir gráficos, imágenes pequeñas de navegación u otras imágenes que no incluyan muchos colores; por ejemplo, todas las imágenes de esta página son archivos GIF, salvo el retrato del monstruo que veremos más abajo, que es JPG. Los archivos GIF pueden tener transparente el color del fondo, como ocurre con la imagen de la pluma roja que encabeza la sección de actividades de esta página. La ventaja de los archivos JPG es que guardan una buena relación calidad-tamaño y se pueden comprimir bastante sin perder aparentemente calidad. Ambos formatos de imagen, además, pueden aparecer paulatinamente en la página web sin necesidad de que el navegador cargue del todo cada imagen antes de ser mostrada; en los archivos GIF, esta característica se llama entrelazado y en los archivos JPG, progresivo.

Para introducir una imagen con FrontPage Express hay que pulsar el botón correspondiente de la barra de herramientas: el botón central de la siguiente imagen. También se pueden insertar imágenes desde el menú Insertar de la barra de menús.

Insertar imagen

Al instante aparece una ventana en la que hay que elegir la opción Desde archivo y escribir en el cuadro de texto la ruta y el nombre del archivo. Lo más cómodo es, sin embargo, pulsar el botón Examinar... y buscar el archivo en el disco duro.

Insertar archivo de imagen

También se pueden introducir imágenes de fondo en el documento, que suelen ser archivos pequeños de texturas que se repiten en todo el documento en forma de mosaico. Se abusa demasiado de estos fondos como para desaconsejar casi siempre su utilización en una página web, pues suelen entorpecer la lectura del contenido. Para incluir una imagen de fondo en FrontPage Express hay que abrir el menú Formato y elegir la opción Fondo...; en el cuadro de diálogo que aparece señalamos la opción Imagen de fondo y pulsamos el botón Examinar... para buscar el archivo de imagen en el disco duro.

2.2 Propiedades de la imagen

Pero examinemos en la ventana de Propiedades de imagen las posibilidades que tenemos de modificar la imagen y su posición. A dicha ventana accederemos simplemente haciendo doble clic sobre la imagen. Otra forma de hacerla visible es marcando la imagen con el puntero del ratón, apretando el botón derecho del ratón y eligiendo la opción adecuada del menú emergente. La ventana aparece abierta en la sección General, donde se muestra el Origen de imagen, es decir, la ubicación del archivo de imagen en el disco duro; en este caso, el archivo monstruo.jpg se encuentra dentro de la carpeta imagenes, que a su vez está dentro de la carpeta monstruo: imagenes/monstruo.jpg.

Más abajo vemos un cuadro de texto en el que está escrita la frase "Éste soy yo": es importante incluir una frase explicativa de la imagen, que mostrará el navegador en forma de etiqueta de fondo blanco cuando el usuario coloque el puntero del ratón encima de la imagen, o que se verá cuando el usuario inhabilite la posibilidad de ver imágenes en el navegador.

Propiedades de imagen

Ahora hacemos clic en la pestaña de Apariencia. Vamos a fijarnos en la sección de Diseño. Si queremos que la imagen tenga un borde negro, ponemos un número en Grosor del borde; cuanto mayor sea el número, más ancho será el grosor.

Apariencia de imágenes

Gran importancia tienen los demás atributos de esta sección, sobre todo cuando queremos colocar una imagen dentro de un párrafo, que no es el caso en nuestra página personal. No obstante, conviene señalar la utilidad de estos atributos, que vamos a ilustrar con la imagen del monstruo. Si abrimos el menú desplegable denominado Alineación, aparece la siguiente lista:

Alineación de imagen

Observemos el texto que está junto a las siguientes imágenes colocadas en una tabla. La posición del texto depende de la alineación de la imagen:


Monstruito Inferior Monstruito Medio MonstruitoSuperior

Monstruito

También son importantes la alineación izquierda y la derecha, pues colocan la imagen a la izquierda o a la derecha de un párrafo, tal y como se muestra en el presente párrafo.

El espaciado horizontal y el vertical deja un hueco horizontal o vertical respecto a la imagen. En el primer retrato del monstruo el espaciado horizontal es de 5 píxeles; en el segundo, de 10; y en el tercero, de 15, debido a lo cual el texto se separa cada vez más de la imagen, y la imagen se separa cada vez más del lado izquierdo de la celda. El espaciado vertical es de 3 para las tres imágenes, y por ese motivo se separan 3 píxeles de la parte superior de la tabla.

Actividad2.3 Actividad nº 2: Insertar imágenes

La actividad de esta lección consiste en incluir tres imágenes en nuestros documentos. Estas imágenes se encuentran dentro de la carpeta imagenes, que a su vez está en la carpeta monstruo, que el programa de instalación ubica dentro de la carpeta principal de este curso. Naturalmente, se pueden utilizar otras imágenes que tenga el usuario. Si se trabaja desde Internet, se pueden copiar dichas imágenes al disco duro colocando el puntero del ratón encima de la imagen, pulsando después el botón derecho del ratón y finalmente eligiendo la opción adecuada del menú emergente que aparece:

Imagen

monstruo.jpg

Imagen

conpatas.gif

Imagen

ojos.gif

Imagen La imagen del Monstruo es de la ilustradora Helena Martínez, a la que agradezco me permita utilizarla. Las otras dos imágenes, así como las que aparecen en el archivo colec.htm, cuyos nombres he modificado, las he extraído de la página www.halloween.com, donde no aparecen los nombres de sus autores.

Los pasos que vamos a dar son los siguientes:

  1. La imagen del Monstruo la vamos a incluir debajo del subtítulo y centrada. Además, debe llevar un borde fino y el texto alternativo "Éste soy yo", u otro que sea significativo.
  2. También vamos a incluir otras dos imágenes en un nuevo archivo, que más adelante enlazaremos con la página principal y que vamos a llamar colec.htm, pues el monstruo va a guardar en él su colección de imágenes recogidas en sus viajes por Internet. El documento irá encabezado por la frase: "Mi colección de imágenes" y en él insertaremos dos de las imágenes que atesora el Monstruo: conpatas.gif y ojos.gif.
  3. Después le pondremos un fondo negro a la página abriendo el menú emergente con el botón derecho del ratón y eligiendo Propiedades de página. Se abrirá una ventana de diálogo y haremos un clic en la sección Fondo. Allí cambiaremos el color blanco del fondo por uno negro abriendo el menú desplegable correspondiente. Probablemente tengamos que cambiar el color del texto del título por uno claro para que se distinga con el fondo negro.
  4. Finalmente, guardaremos este archivo junto a nuestro archivo index.htm y le pondremos como título interno la frase "Mi colección".
  5. Además, incorporaremos la imagen del Monstruo en la parte inferior del documento y la centraremos; ya veremos más adelante el motivo de su inclusión en ese lugar. Vamos a reducir esta imagen, y para ello la marcamos con un clic del ratón y arrastramos los tiradores de los bordes.

Si queremos ver cómo pueden quedar estas imágenes en el documento, pulsemos los siguientes botones:

Página con imagen

Colección de imágenes

Para completar esta actividad, vamos a colocar, de forma provisional y sólo como prueba, la imagen del monstruo a la izquierda del párrafo de la primera sección (Profesión) y a la derecha del párrafo de la segunda sección (Aficiones), separándola algunos píxeles vertical y horizontalmente respecto al texto de los párrafos. Después de comprobar que las imágenes están bien insertadas, las quitaremos.

2.4 La etiqueta de imágenes en HTML

En lenguaje HTML las imágenes se insertan con la etiqueta <img>, que no tiene cierre. Si vemos el código fuente de nuestra página personal, observaremos que la etiqueta se completa de la siguiente manera:

<img src="imagenes/monstruo.jpg" border="1" width="160" height="113" alt="Éste soy yo">

Dentro de la etiqueta <img> hemos incluido varios atributos:

En las imágenes del monstruo incluidas en una tabla de este documento, el código fuente añade, además, los atributos correspondientes a la alineación y al espaciado horizontal y vertical:

Por último, la imagen del monstruo que aparece a la izquierda de un párrafo anterior, añade a la etiqueta <img> el atributo align="left". Si la imagen hubiera estado en la parte derecha del párrafo, el atributo sería align="right".


Anterior Arriba Siguiente


Páginas dispersas de Alejandro Valero - http://fresno.pntic.mec.es/avaler3