Tutorial: cabecera con links integrados en Dreamweaver

¡Hola! Antes que nada, me presento: soy Miros Vázquez, una de las nuevas administradoras de Blogger's México :) junto a Rocío haré mancuerna en la sección de Edición y Diseño, espero que mis aportes sean de utilidad.

El día de hoy les traigo un tutorial que considero sencillo y bastante útil. Imagino que han visto varios sitios con cabeceras "interactivas", que tienen links integrados y efectos llamativos. En esta ocasión solo aprenderemos lo básico para generar los links con la etiqueta <map>.

¿Qué necesitan?

Adobe Photoshop (o cualquier programa de edición que les permita realizar composición de imágenes y texto) y Adobe Dreamweaver en cualquier versión arriba de la CS3; los cambios de las herramientas e interfaces en cada versión son mínimos y actualmente yo trabajo con la versión CS6. En caso de que no tengan alguno de esos programas, pueden bajarlos en la página de Adobe con una licencia de 30 días.

¡Empecemos!

1. Previamente, generamos nuestra cabecera en Photoshop o en el programa de edición de nuestra elección. Debemos incluir todos los elementos que queramos linkear, ya sean redes sociales o secciones.

2. Teniendo nuestra cabecera, la subimos al host de imágenes de nuestra preferencia (Photobucket, tinypic, etc.) para obtener la URL.

3. Abrimos Dreamweaver y seleccionamos la opción HTML en la página de inicio.

4. Se abrirá un nuevo documento y buscamos la opción Dividir. Al seleccionarla nuestro documento se partirá en dos áreas: una sirve para generar el código y otra para obtener una vista previa de lo que hagamos.

5. En el área del código, borramos todo el contenido y colocamos la etiqueta <img src="">; dentro de las comillas, colocamos la URL que generamos previamente. Después seleccionamos la opción Actualizar que se encuentra en la parte inferior y en el área de la vista previa debe aparecer nuestra cabecera.

6. Ahora, seleccionamos la opción Diseño para quedarnos solo con la vista previa de nuestra cabecera.

7. Seleccionamos nuestra cabecera y en la parte inferior donde se encuentran las Propiedades, ubicamos tres herramientas de Zona Interactiva: rectangular, circular y poligonal.

(en mi caso yo seleccionaré la herramienta rectangular, pero ustedes pueden seleccionar la que mejor se ajuste a la forma en la que hicieron los links de su cabecera)

8. Al seleccionar la herramienta que necesitemos, el cursor debe tomar forma de cruz. Hacemos clic en la la parte donde vayamos a comenzar el trazo y sin soltar el mouse, lo arrastramos hasta abarcar el área que queremos linkear. Al soltarlo, nos debe quedar de la siguiente manera:

9. Checamos en la parte inferior y notaremos que la ventana de Propiedades ha cambiado, ahora hay tres casillas que son clave para lograr que funcione la etiqueta <map>. En la casilla Vínculo escribimos el link correspondiente al área que trazamos; en la casilla Destino seleccionamos la opción _blank cuya función es abrir dicho link en otra ventana al darle clic. La casilla Alt es opcional, en ella podemos escribir el nombre del área seleccionada y sirve para ayudar a las personas invidentes que utilizan lectores web.

10. Repetimos los pasos 8 y 9 las veces que sean necesarias dependiendo de los links que hayamos integrado en nuestra cabecera. Al terminar volvemos a seleccionar la opción Dividir y copiamos todo lo que se generó en el área del código para pegarlo en la parte que corresponda de nuestro blog.

Dato extra: podemos meter todo el código dentro de una etiqueta <div> para alinearlo a la izquierda (left), al centro (center) o a la derecha (left) justo así:

- CLIC PARA VER EL RESULTADO FINAL -

Si se animan a hacerlo y no les quedó muy claro algún paso, no duden en comentar y con gusto les resolveré a la brevedad ^^ ¡saludos y hasta la próxima!