INFOTECH

MÓDULO 4
Hipervínculos y plantillas

CURSO
Creación de páginas web con
Adobe Dreamweaver
 INFOTECH
Capacidades especíècas
Nombre del módulo 4 Contenidos Recursos Comprensión e Indagación y Actitudes y valores Duración
Juicio crítico Creatividad
información experimentación

1. Creación de ĺIdentièca y aplica

herramientas para la
hipervínculos externos e
creación de hipervínculos ĺExplora las
internos o en una imagen
externos e internos a èn herramientas del panel de ĺPlanteamiento de
o texto.
de facilitar la navegaciónayuda para la creación de preguntas abiertas para
en la web o permitir hipervínculos de acuerdo incentivar el debate en el
complementar los temas a su destino o lugar. aula.
2. Creación de ĺActitud responsable
visitando otros sitios. ĺ Indaga en la web o a ĺTemática transversal
hipervínculos de correo, a ĺFichas de aprendizaje. frente a las actividades
Hipervínculos ĺIdentièca y maneja las través de la exploración el actual y acorde a las ĺSe incentiva la
redes sociales y en el ĺ Ejercicios adicionales.
y plantillas herramientas para la proceso para insertar preferencias del grupo exploración de
menú principal. complemenarios ĺSe fomenta la
creación de hipervínculos hipervínculos a las etario que permite herramientas adicionales.
(aplicaciones y independencia del alumno
a las redes sociales a èn diferentes redes sociales. éexibilidad en cuanto a la ĺSe motiva a aplicar los 4 semanas
cuestionarios) en Paideia. para la inserción de
de integrar su web a su ĺ Explora las diferentes generación de diferentes aprendizajes a otras áreas
ĺRecursos de la Web. hipervínculos.
espacio personal. formas y opciones para la sub temas.ĺAutoevalúa de ámbito académico y
3. Creación y edición de ĺEjercicios de ĺSe promueve la autocrítica
ĺCrea plantillas y puede creación y edición de los conocimientos personal. para la mejora de las
plantillas. integración general.
editarlas a èn de plantillas. adquiridos hasta el habilidades.
personalizar su espacio ĺ Profundiza en el uso momento a través de los
como también facilitar la de las herramientas de ejercicios
organización de la manera complementaria y complementarios y
información. conjunta. cuestionarios.
4. Ejercicios de ĺRepaso de todos los
reforzamiento. contenidos trabajados en
los dos últimos módulos

MÓDULO 4: Hipervínculos y plantillas

 13
Ficha de Aprendizaje

Tema: Hipervínculos con textos e imágenes

n°

Crea hipervínculos internos en un texto o en una imagen que

permiten navegar dentro del sitio en las diferentes páginas que
Logro elabora.

Crea hipervínculos externos en un texto o en una imagen que

permiten visitar otras páginas web.

@
# Conocimientos previos

¿Sabes cómo hacer

referencia de una
página web a otra con
un simple clic? ¿Has
escuchado que son los
hipervínculos?,
comenta con tus
compañeros.

1
 Mapa de contenidos
Dreamweaver

permite

Crear hipervínculos
se clasifican
Por el lugar
Por su destino
donde se crean
pueden ser
pueden ser
Internos Externos En un texto
En una imagen
dirigen a
dirigen a también
Páginas web de
un mismo sitio
mediante zonas
Otras páginas
interactivas
web

Contenidos de aprendizaje
Hipervínculos
AbcGLOSARIO
Hipervínculos. Conocidos también como
“vínculos”, “enlaces” o “links”. Se usan en varios
tipos de documentos electrónicos: Excel, Word,
PowerPoint, páginas web, etcétera.

Sirven para:

Hacer referencia a un punto específico diferente a aquel en el que se encuentra

el usuario, ya sea dentro de la misma página web o en otra.

Ver el enlace de correo y enviarlo rápidamente.

ae
Para el caso que se te presenta en esta ficha, los hipervínculos tendrán dos funciones:
Interna: enlazar las diferentes páginas que conforman tu sitio

2
web a través de un menú.

Externa: hacer referencia a otras páginas webs de las que

has sacado información o que están relacionadas con el tema.
Tipos de hipervínculos
Básicamente hay tres tipos: enlaces a otras páginas web, enlaces para enviar correos
electrónicos y enlaces a PDF o contenidos descargables.

Hipervínculos en un texto
Para finalizar con la creación de tu sitio web, aprenderás a enlazar el menú principal de
navegación de tu página con las diferentes páginas que lo conforman.

Sigue cada uno de los pasos que te presentamos a continuación:

Paso 1. En el documento inicio.html, ubícate en la tabla correspondiente al menú.

Paso 2. Con los documentos que has elaborado durante todo el proyecto, comenzarás
a crear los hipervínculos internos y externos. En este caso crearás los hipervínculos o
enlaces internos, los cuales te permitirán ir de un lugar a otro dentro de la página.

Paso 3. Selecciona el texto BIENVENIDA y dirígete al Inspector de propiedades. En

la sección HTML, haz clic en el ícono de carpeta de la opción Vínculo.

Luego, selecciona el documento bienvenida.html. Obtendrás el siguiente resultado:

3
Paso 4. Crea los enlaces para las demás páginas siguiendo los mismos pasos que has
aprendido hasta el momento.

Paso 5. Para ediciones de formato y color para los vínculos, ve a Propiedades de la

página (en el Inspector de propiedades).

Paso 6. En la nueva ventana, dirígete a la sección Vínculos (CSS) y realiza los cambios
correspondientes. Te recomendamos no modificar ni la fuente ni el tamaño porque estos
cambios afectarán a todos los hipervínculos del documento y no solo al texto
seleccionado.

Edita la siguiente información:

Color de vínculo: #00F

Vínculos visitados: #666

Estilo de subrayado:
siempre subrayar

Estilo de fuente: itálica

Paso 7. Vuelve a seleccionar el texto BIENVENIDA, dirígete al Inspector de

propiedades y, en la opción Destino, escoge self (recomendado para vínculos internos).

Ten en cuenta lo siguiente:

_blank: para que el enlace abra una nueva ventana del navegador.
_self: para que el enlace se abra en la misma pestaña o ventana del navegador.

Guarda todo y haz una prueba. Abre el documento inicio.html en el navegador.

Comprueba que funcionen todos los hipervínculos. Viaja de una página a otra; el título de
la página en la pestaña del navegador te confirmará qué página estás viendo.

4
Hipervínculo en una imagen
Vamos a continuar con el archivo bienvenida.html. Sigue cada uno de los pasos
que te presentamos a continuación:

Paso 1. Descarga de la plataforma la imagen pucp.jpg. Cambia la imagen de la

celda izquierda por la imagen que acabas de descargar.

Paso 2. Selecciona la imagen de la celda de la izquierda y en el Inspector de

propiedades ingresa lo siguiente:

Vínculo: http://www.pucp.edu.pe

Destino: _blank

Paso 3. Presiona F12, guarda y revisa el resultado obtenido. Al hacer clic en la

imagen debe abrirse otra ventana que muestre la página web de la PUCP.

No te olvides de agregar una pequeña columna entre el texto y la imagen de no

más de 10 píxeles de ancho.

Insertando un hipervínculo mediante zonas interactivas.

Antes de desarrollar la actividad,

descarga de la plataforma la
imagen interactiva.jpg.

5
Es importante que sepas que las zonas interactivas se crean sobre todo dentro
de una imagen. En la imagen que acabas de descargar, la cual ha sido trabajada
con Photoshop (pero que también puedes realizar en Paint u otro programa de
diseño), cada imagen interna corresponderá a un ítem del menú principal de la
web.

Abc GLOSARIO
Interacción. Que permite una acción recíproca, a
modo de un diálogo, entre la computadora y el
usuario.

Sigue los pasos que te presentamos a continuación a fin de que realices la

actividad.

Paso 1. Modifica la foto actual por la imagen que has descargado: interactiva.jpg.

Paso 2. Dirígete a la barra Insertar y en las

opciones de Imágenes selecciona Dibujar zona
interactiva rectangular.

Paso 3. El cursor se volverá una cruz con la cual debes dibujar el rectángulo en
el que se colocará el hipervínculo. Dibújalo alrededor de la palabra “Bienvenida”.

6
Paso 4. Dirígete al Inspector de propiedades y completa la siguiente información.

Paso 5. Presiona F12, guarda y verifica que el vínculo funcione

correctamente en el navegador. Cuando pases el cursor por encima de
la zona trabajada, aparecerá una mano que confirmará que ese
espacio sirve como hipervínculo.

Sigue el mismo procedimiento para las otras imágenes creando los enlaces a las
otras páginas del sitio web.

Ten en cuenta:
Para editar una zona interactiva, simplemente haz clic en la zona verde y
cambia lo que desees en el Inspector de propiedades.

7@LAH¾MOTDCDRLNCHèB@QDKS@L@ÆNCDKQDBS·MFTKNBNMS@MRNKNKKDU@QDK
BTQRNQ@TM@DRPTHM@XLNCHèB@QKNL@MT@KLDMSD

Ingresa a Paideia y realiza las siguientes actividades:

Aplica Aplicación 4.1

Crea hipervínculos en los textos del contenido,

lo
tanto internos como externos. Crea los estilos para
el enlace del contenido.

aprendido Aplicación 4.2

En la página inicio.html agrega imágenes con
zonas interactivas que enlacen a las distintas
páginas del sitio web Imagenesdelmundo.

Amplia tus
conocimientos @
Aprende más sobre como insertar hipervínculos en el siguiente video:
https://www.youtube.com/watch?v=adIjJGaXjD4