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 utilizando la herramienta del panel de objetos. Abrimos el Panel: Ventana > Objetos

Aparecerá el Panel de Objetos:

Apenas lo hemos empleado de momento, pero desde este panel se pueden realizar muchas funciones. Una de ellas es ésta:

Pinchamos en el sobre y se nos abre la siguiente ventana:

En el Texto: escribimos la palabra o palabras que queramos sean el enlace al correo (puede ser el nombre y apellido de la persona a cuyo correo enlazamos) y en el segundo cuadro de texto, eliminamos la dirección de correo que haya, y escribimos la que nos interese.

Daría como 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 imag y se llama correo_sonrisa. 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.pntic.mec.es"> delante y </a> detrás:

Dándole a Archivo > Guardar cuando hayas acabado, o bien, a del siguiente panel que suele aparecer cuando se modifica directamente el código:

Vuelvo 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.