Actividad: Título de la actividad: Duración: Objetivo: Materiales: Tarea previa: Empezaremos por crear una copia del laboratorio número cuatro.

Transcripción

1 Actividad: Laboratorio de marcos utilizando Dream Weaver. Título de la actividad: Menú de navegación con imágenes de sustitución y banner con mapas html. Duración: 180 minutos La realización del reto es en tiempo fuera de la clase, si te apresuras puedes terminar el ejercicio completo y el reto en dos horas aproximadamente. Objetivo: En una página de marcos, crear un menú de navegación con imágenes de sustitución y crear un banner con hot spots o mapa de html. Materiales: Una computadora con sistema operativo Windows, Dream Weaver (CS4 ó CS5), navegador (Explorer, Firefox o Google Chrome) y una USB (para guardar tus laboratorios). Programa Power Point y Paint para crear imágenes png o jpg. Tarea previa: Haber realizado el laboratorio número cuatro y que esté funcionando tu página de frames. Empezaremos por crear una copia del laboratorio número cuatro.

2 Copia la carpeta completa de tu laboratorio número cuatro. Debes tener doce páginas creadas. Abre la página frames.html con Dream Weaver (DW de ahora en adelante). Ahora, minimiza la ventana de DW y olvídala por un rato. Vamos a crear los botones para hacer una imagen en rollover. Normalmente podrías programar dichos botones con un java script. Si te interesa hacerlo en block de notas, la dirección es: Este también es un tutorial gratuito. Bien, ahora vamos a hacer unos botones de manera económica. Abre PowerPoint e inserta un rectángulo pequeño. Escribe la palabra Inicio y cópialo 5 veces, para obtener 6 rectángulos. Cambia los nombres de cada uno para obtener un botón para cada una de tus páginas.

3 Bien, ahora dales un formato con estilos rápidos, cópialos todos y pégalos a un lado a manera de tener dos columnas iguales. Con la misma función cámbiales nuevamente el formato a manera que se distinga una diferencia fuerte entre una columna y la otra. Ahora crea un grupo de formas a manera de que sobre un rectángulo grande se vean un triángulo, un círculo y un cuadrado, dentro de cada forma escribe un número, empezando por el 6 y terminando en 8 los. Algo así como esto:

4 Abre el programa Paint

5 Ahora sí, sigue los siguientes pasos para cada uno de los rectángulos. 1. Selecciona (individualmente) 2. Copia 3. Pega en paint 4. Selecciona la imagen y recórrela hasta la esquina superior izquierda del lienzo. 5. Reduce el tamaño del lienzo hasta ajustar al botón. 6. En inicio escoge la opción guardar como 7. Escoge jpg o png 8. Guárdala como inicio_a en una carpeta para tus imágenes.

6 9. Repite la operación. Cuando termines deberás tener los siguientes botones: inicio_a.jpg inicio_b.jpg uno_a.jpg uno_b.jpg dos_a.jpg dos_b.jpg tres_a.jpg tres_b.jpg cuatro_a.jpg cuatro_b.jpg cinco_a.jpg cinco_b.jpg 10. Ahora selecciona el conjunto de imágenes con las que creaste la barra con figuras y repite las operaciones anteriores, salvando la nueva imagen como banner.jpg Ya hemos creado nuestros botone de forma económica. Cierra paint, cierra Powerpoint y maximiza DW. Te acuerdas que abriste la copia de la página index.html que habías creado para el laboratorio anterior? Bien, ahora vamos a hacer el menú con imágenes de roll- over. Vacía la tabla que creaste para la barra de navegación. Vamos a seguir unos pasos. 1. Ahora, colócate en la primera celda.

7 2. Localiza en el menú de común la función de imagen 3. Dentro de esta localiza la función imagen de sustitución o roll over image si está en inglés. 4. Haz clic sobre este y aparecerá una ventana emergente. 5. Cambia el nombre de image1 por inicio. 6. En la segunda opción presiona el botón de examinar y busca la imagen inicio_a.jpg 7. Selecciónala. 8. En el tercer recuadro, escoge el botón de examinar y busca la imagen inicio_b.jpg. 9. Selecciónala. 10. En texto alternativo escribe Paginadeinicio. 11. En la última ventana presiona el botón de examinar y escoge la página main.html.

8 12. Presiona el botón de aceptar. 13. Haz clic con el botón derecho y del menú emergente escoge propiedades (está hasta abajo). 14. Donde dice Destino o target selecciona mainframe". (ten cuidado, el programa parece tener un bug o falla y no siempre registra tu selección la primera vez que haces clic sobre ella. 15. Salva tu trabajo. 16. Repite los pasos para las páginas uno, dos, tres, cuatro y cinco. Ahora sí, presiona F12 o en su defecto live view o Vista previa/depurar en explorador para verlo en el navegador. Lo más probable es que no funcione cuando lo ejecutes, cuando esto sucede, apareció una barra de alerta, pídele al Explorer que ejecute los programas.

9 Bien, ya está funcionando la barra de navegación. MAPAS html Llegó la hora de hacer mapas o hot spots de html. Nuevamente, si te interesa hacer este ejercicio en bloc de notas, lo puedes hacer. La página en la que te puedes apoyar es: En DW simplemente inserta la imagen en el espacio de banner si la imagen es muy grande, puedes ajustarla al cambiar el tamaño del frame o de la imagen misma. Nuevamente dirígete al menú de imagen, escoge la opción de mapa interactivo o hotspot. Para el triángulo escoge zona poligonal y traza los tres puntos del triángulo procurando ajustarte al área del dibujo. En la parte inferior aparecen las propiedades, coloca la liga a la página seis (en el caso del triángulo). El destino o target debe de ser mainframe". Repite este procedimiento para el círculo y el cuadrado, ligando las páginas correspondientes al número escrito en ellas.

10 Al menos la versión CS4 en español tiene el bug de no permitirte seleccionar el archivo al que quieres ligar el campo, en este caso, simplemente escribe el nombre del archivo al que quieras llamar en el campo de vínculo. Bien, llegó la hora de guardar y probar. No, no ha terminado el laboratorio. Es tu turno de poner a prueba lo que has aprendido hasta el momento. Reto: Realiza tu currículo utilizando frames, vínculos, inserción de imágenes, botones mágicos, etc. Titula cada una de las secciones y crea un menú interactivo para navegar por tus páginas. Algunas de las secciones que puedes incluir en tu currículo son: Bienvenida Contiene tu foto y como pie de foto, tu nombre Datos personales Nombre, dirección, teléfono, mail, etc. Educación Tu preparación académica Experiencia Tu experiencia laboral

11 Pasatiempos Los hobbies que realizas Actividades extracurriculares Practicas algún deporte? Eres presidente de tu generación? perteneces a algún club de lectura, ajedrez, oratoria, o actúas en alguna obra de teatro? Sorpréndeme, quiero ver que tan creativo puedes ser! Autoevaluación: Puedes crear una página de frames? Puedes crear muchas páginas cambiándoles el título y el nombre? Funcionan tus links? Abren en el marco principal y no en la ventana completa? Qué sucede cuando escoges alguna opción distinta a abrir en mainframe? Próximos laboratorios: Creando tu currículo en una página de marcos Abriendo vínculos fuera de tu página