Dreamweaver CC 2017 esencial

Mapas de imágenes en Dreamweaver CC 2017

¡Prueba gratis durante 10 días

nuestros 1202 cursos !

Prueba gratis Mostrar modalidades de suscripción
Los Mapas de imágenes sirven para hacer que, en una sola imagen, tengamos diferentes zonas interactivas que detecten el movimiento y el clic del ratón, nos muestren información y nos sirvan de enlaces a otras páginas.

Transcripción

(hombre) Los mapas de imágenes sirven para hacer que en una imagen en concreto haya zonas activas. Por ejemplo, supongamos que yo quiero que al hacer clic en la rodilla me vaya información sobre la rodilla, y que por ejemplo, al hacer clic en esta parte superior me vaya sobre información acerca de pantalones cortos. Vamos a tener herramientas para poder hacer esto, Necesito irme a la vista de "Diseño", seleccionar de nuevo esta fotografía y abrir el panel de "Propiedades" y dentro de este panel de propiedades en la parte inferior puedo crear un nuevo mapa. Aquí le pondría, por ejemplo "foto corredor", a ese nombre de mapa, y ahora puedo utilizar estos tres botones para crear distintas zonas interactivas dentro de ese mapa. Entonces, por ejemplo, en la rodilla, bueno, pues ya que es una rodilla, añadir una zona circular. Puedo hacer clic en el cursor y seleccionar con el cursor para mover esa zona. En el caso de los pantalones cortos, bueno, pues puedo utilizar el rectángulo. entonces pinchar y arrastrar y estoy haciendo una zona activa en este rectángulo. Puedo hacer modificaciones sobre cualquiera de ellos en cualquier momento con el cursor, puedo pinchar sobre esos bordes y moverlos o pinchar en el medio y recolocarlos también. Por último, también puedo hacer clic y formar zonas interactivas irregulares, haciendo clic, clic, ir añadiendo puntos y por ejemplo, puedo adaptar una zona interactiva exactamente a la forma de esta pierna, iría añadiendo puntos hasta que quedase perfectamente definida esa forma. Esto está bien, ya tengo esas formas asignadas pero, en realidad, debería de añadir también enlaces. Aunque no hemos hablado todavía de los enlaces, pero vamos a ver un poquito acerca de ello. Yo, en "Vínculos", aquí, pondría la página a la que tiene que ir, entonces por ejemplo, aquí iría a "pantalones.html", seleccionando la siguiente zona iría a "rodilla.html" y seleccionando la tercera iría a "pierna.html". Ya hemos creado esa zona interactiva y para poder comprobar que efectivamente funciona, lo que puedo es cerrar el panel de propiedades, ir a la vista "En vivo" y al moverme encima, vemos que efectivamente, cuando paso por las zonas concretas, me aparece la mano, y si tuviese preparadas ya las páginas, pues se iría directamente el navegador a esos puntos. Esto es lo que es una zona interactiva. Si me voy a la vista de "Código", pues aquí vemos como dentro de la etiqueta de imagen, tengo una etiqueta "map", y dentro de esa etiqueta "map" vienen definidas las distintas áreas que son las distintas zonas interactivas, y cada una de ellas, con un atributo "href" que es el que se ocupa de ir a la página en concreto que toque cuando se haga clic.

Dreamweaver CC 2017 esencial

Crea sitios web gracias al software de Adobe, Dreamweaver CC 2017. Con este repaso esencial a sus fundamentos podrás crear páginas responsive y mostrar tus contenidos a la última.

6:11 horas (78 Videos)
Actualmente no hay comentarios.
 

Este curso video2brain está disponible como descarga y para ser visualizado online. ¡Pero no hace falta que decidas entre las dos opciones! Al comprar el curso, disfrutarás de ambas posibilidades.

La descarga te permite ver las lecciones sin estar conectado/a a internet y supone una navegación fácil y ágil entre capítulo y capítulo. Si vas a trabajar en diferentes ordenadores o si no quieres descargarte el curso completo, entra en la web con tus datos de acceso y disfruta directamente de tus vídeos online. Te deseamos que disfrutes de este curso y te resulte de mucha utilidad.

Estamos a tu disposición si tienes cualquier tipo de duda o pregunta.