12.5.- Vínculos de correo electrónico.

Se puede establecer también vínculos de correo electrónico a partir de una imagen o un texto, de manera muy similar al resto de los hiperenlaces.

Veamos un ejemplo. Vamos a vincular un nombre (o una expresión o frase cualquiera) con su dirección de correo electrónico. Una forma de hacerlo es:

Colocar el cursor en el punto en el que queramos que esté el enlace y darle a Insertar > Vínculo de correo electrónico:

Aparecerá el cuadro de diálogo en el que pondremos el texto que queramos que sirva como enlace y la dirección de correo electrónico:

Éste es el resultado:

Escríbeme

Cuando un visitante de nuestra página pinche sobre este vínculo se abrirá su programa de correo y podrá enviar un mensaje a la persona a cuya dirección hemos vinculado el enlace.

13.- Una vista al código fuente

Podemos aprovechar este tema para echar un vistazo al código que Dreamweaver va generando automáticamente.

Si no tienes mucha idea de a qué nos estamos refiriendo pincha aquí:
código html. Si ya sabes, aunque sólo sea un poco, de lenguaje html, continúa leyendo.

Vamos a ver cómo ha quedado el código para ese enlace de correo electrónico: Selecciono la palabra Escríbeme y, una vez seleccionada, pincho en el botón de la barra de herramientas: . Veremos el código fuente de nuestra página. Entre el resto del código aparecerá:

Vemos la palabra seleccionada Escríbeme (el acento se escribe con los caracteres especiales &iacute;) rodeada de dos etiquetas. La primera de enlace al correo que comienza <a href= con el mailto dentro de las comillas y la segunda etiqueta de cierre del enlace </a>.

Para volver a la vista normal pincho en

Pues bien, si yo quiero emplear una imagen como enlace del correo, puedo hacerlo desde el código. Primero coloco la imagen: . La selecciono y me voy a ver el código fuente pinchando en . Veré lo siguiente:

Que me está diciendo que la imagen (img) se encuentra (src source en inglés) en la carpeta ima , se llama correo_sonrisa y tiene formato gif. Después viene su medida en píxeles en anchura y altura.

Pues bien, puedo colocar las etiquetas de enlace de correo anteriores: <a href="mailto:apuente@roble.cnice.mecd.es"> delante y </a> detrás:

Dándole a Archivo > Guardar cuando hayas acabado y volviendo a la vista normal (Vista diseño) pinchando en

De esta manera he conseguido que la imagen anterior se convierta en un enlace al correo electrónico. Comprueba que funciona dándole a la tecla f12.

(Nota: Al ir escribiendo directamente el código, Dreamweaver MX nos va ayudando a partir de las primeras letras que vayamos introduciendo, proporcionándonos los posibles fragmentos de código que pudiéramos ir necesitando. Simplemente haciendo doble clic sobre el correcto, éste se incorpora al código)