Scribd Logo
Cargar

¡Te damos la bienvenida a Scribd!

  • 146 vistas

    Ejercicios UF 1302 - Enunciado - Delegaciones PDF

    Cargado por

    Sergio Casado Gutiérrez
    Este documento proporciona instrucciones para crear un mapa de imágenes y usar imágenes de sustitución en una página web sobre delegaciones. Explica cómo crear un mapa de imágenes seleccionando una imagen y usando las herramientas en el inspector de propiedades, y cómo vincular cada área a un enlace. También describe cómo usar imágenes de sustitución para que cambien cuando el usuario pase el mouse sobre ellas, y proporciona un ejemplo de cómo insertar una imagen de sustitución.

    Copyright:

    © All Rights Reserved
    Descargue como PDF, TXT o lea en línea desde Scribd

    Ejercicios UF 1302 - Enunciado - Delegaciones PDF

    Cargado por

    Sergio Casado Gutiérrez
    146 vistas4 páginas
    Este documento proporciona instrucciones para crear un mapa de imágenes y usar imágenes de sustitución en una página web sobre delegaciones. Explica cómo crear un mapa de imágenes seleccionando una imagen y usando las herramientas en el inspector de propiedades, y cómo vincular cada área a un enlace. También describe cómo usar imágenes de sustitución para que cambien cuando el usuario pase el mouse sobre ellas, y proporciona un ejemplo de cómo insertar una imagen de sustitución.

    Título original

    Ejercicios UF 1302 - Enunciado_delegaciones.pdf

    Derechos de autor

    © © All Rights Reserved

    Formatos disponibles

    PDF, TXT o lea en línea desde Scribd

    ¿Le pareció útil este documento?

    ¿Este contenido es inapropiado?

    Este documento proporciona instrucciones para crear un mapa de imágenes y usar imágenes de sustitución en una página web sobre delegaciones. Explica cómo crear un mapa de imágenes seleccionando una imagen y usando las herramientas en el inspector de propiedades, y cómo vincular cada área a un enlace. También describe cómo usar imágenes de sustitución para que cambien cuando el usuario pase el mouse sobre ellas, y proporciona un ejemplo de cómo insertar una imagen de sustitución.

    Copyright:

    © All Rights Reserved
    Descargue como PDF, TXT o lea en línea desde Scribd
    Descargar como pdf o txt
    146 vistas4 páginas

    Ejercicios UF 1302 - Enunciado - Delegaciones PDF

    Cargado por

    Sergio Casado Gutiérrez
    Este documento proporciona instrucciones para crear un mapa de imágenes y usar imágenes de sustitución en una página web sobre delegaciones. Explica cómo crear un mapa de imágenes seleccionando una imagen y usando las herramientas en el inspector de propiedades, y cómo vincular cada área a un enlace. También describe cómo usar imágenes de sustitución para que cambien cuando el usuario pase el mouse sobre ellas, y proporciona un ejemplo de cómo insertar una imagen de sustitución.

    Copyright:

    © All Rights Reserved
    Descargue como PDF, TXT o lea en línea desde Scribd
    Descargar como pdf o txt
    Está en la página 1de 4

    Uf-1302: CREACIN DE PGINAS WEB

    CON LENGUAJES DE MARCAS.


    ACTIVIDAD: MAPA DE IMAGENES
    E IMGENES DE SUSTITUCIN
    Fecha: (22-02-2015)

    EJERCICIO DE MAPA DE IMGENES ( SITIO DELEGACIONES).

    Los mapas de imagen son partes de una imagen que pueden ser utilizadas para asignarle algn
    tipo de comportamiento.

    Para crear un mapa de imagen es necesario seleccionar previamente la imagen en la que se


    desea crear el mapa, y abrir el inspector de propiedades de dicha imagen.

    Estando seleccionada la imagen, ya es posible crear un mapa a travs de los botones del

    inspector de propiedades que tienen el siguiente aspecto:

    Si no te aparecen despliega el panel Propiedades para verlo completo.

    Los tres ltimos botones son los que se utilizan para crear los mapas. Dichos mapas pueden
    tener forma rectangular, circular, o libre, dependiendo del botn pulsado.

    Al pulsar alguno de estos tres botones, cambia la apariencia del puntero al situarlo sobre la
    imagen. Entonces ya es posible dibujar el mapa sobre la imagen, pulsando sobre los lugares
    donde se desea que comience y finalice el mapa, as como sobre el resto de lugares (en orden)
    que se desea que recorra el mapa en el caso de forma libre.

    1
    Uf-1302: CREACIN DE PGINAS WEB
    CON LENGUAJES DE MARCAS.
    ACTIVIDAD: MAPA DE IMAGENES
    E IMGENES DE SUSTITUCIN
    Fecha: (22-02-2015)

    Al estar seleccionado un mapa el inspector de propiedades cambia. Permite asignar un vnculo


    y un texto alternativo a ese mapa como puedes ver a continuacin:

    El primero de los botones, el de la flecha, debe pulsarse al finalizar la creacin de un mapa,


    para que el puntero recupere su forma original al situarse sobre una imagen. De este modo, es
    posible mover los puntos del mapa, en el caso de que no hayan sido creados en los sitios
    deseados, para ajustarlos mejor a la imagen.

    Pasos a realizar

    1. Descargar la carpeta material, suministrada por el profesor, para obtener las


    imgenes del ejemplo.
    2. Enmaquetar la web con etiquetas semnticas: <header>, <section>,<nav>,< footer> y
    dar estilos a estas zonas con una hoja de estilos externa.
    3. Colocar la imagen del mapa completo en la seccin principal de la web.
    4. Crear el mapa de imgenes en las zonas indicadas y enlazar cada una de las etiquetas
    <area> obtenidas, dentro de la etiqueta <map>, a los enlaces que se indican en la
    figura siguiente.

    2
    Uf-1302: CREACIN DE PGINAS WEB
    CON LENGUAJES DE MARCAS.
    ACTIVIDAD: MAPA DE IMAGENES
    E IMGENES DE SUSTITUCIN
    Fecha: (22-02-2015)

    5. Relacin de links:

    http://www.barcelona.cat/
    http://www.asturias.es/

    http://www.madrid.es/

    http://www.valencia.es/

    http://www.granada.org/

    https://www.facebook.com/ast
    http://es.linkedin.com/in/astex

    https://www.youtube.com/user/cecotpatronal

    6. Para los botones inferiores de likedin, youtube y Facebook, utilizar la opcin de


    imgenes de sustitucin de Dreamweaver Cs6.

    Imagen de sustitucin. Rollover

    Un rollover es una imagen que cambia por otra cuando el puntero se sita sobre ella.
    Este tipo de imagen suele utilizarse en los mens o en los botones para desplazarnos a
    travs de distintas pginas.

    Veamos un ejemplo de rollover. Partiendo de las siguientes imgenes

    3
    Uf-1302: CREACIN DE PGINAS WEB
    CON LENGUAJES DE MARCAS.
    ACTIVIDAD: MAPA DE IMAGENES
    E IMGENES DE SUSTITUCIN
    Fecha: (22-02-2015)

    Para insertar un rollover hay que dirigirse al men Insertar, Objetos de Imagen, a la
    opcin Imagen de sustitucin. En la nueva ventana hay que especificar la imagen
    original y la de sustitucin.

    Es preferible que la opcin Carga previa de imagen de sustitucin est activa. Si se


    activa, la imagen de sustitucin se carga cuando se carga la pgina, de este modo se
    evitan las demoras debidas a la descarga de la imagen cuando llega el momento de
    que aparezca.

    El Texto alternativo es el texto que aparece al situar el puntero sobre una imagen, o el
    que aparecer en lugar de la imagen en el caso de que por algn motivo sta no pueda
    ser mostrada en el navegador.

    El texto alternativo puede asignarse a todas las imgenes, no slo a los rollovers.
    Puede hacerse a travs del campo Alt del inspector de propiedades de la imagen
    seleccionada.

    También podría gustarte