Graficación y Multimedios 2018A Tema: Vínculos

M en A. Gabriel Alanis Boizo

Tema: Vínculos.

Objetivo.
Introducir al alumno en la comprensión y creación de distintos tipos de vínculos que se utilizan usualmente en la creación
de sitios web.

 Vínculo.
Subtemas.  Tipos de vínculos.

Cuando un usuario busca información en un sitio web, normalmente tiene que saltar
Vínculo. de una información a otra hasta encontrar lo que requiere, el objeto en DreamWeaver
CS6 que permite realizar éste “Salto” y contiene la dirección a la que debe ir se le
denomina vínculo.

1
Graficación y Multimedios 2018A Tema: Vínculos
M en A. Gabriel Alanis Boizo

Tipos Son comunes 3 tipos de vínculos:

de
vínculos
1. Vínculo a una posición de la misma página.
.
2. Vínculo a una página del sitio.
3. Vínculo a una página externa del sitio.

1.- Vínculo a una posición de la misma página.

Este tipo de vínculo ocurre cuando se realiza un salto a información que se encuentra en la misma página,
por ejemplo, un usuario para localizar lo que le interesa, da clic en un vínculo que se encuentra en el párrafo
número uno y lo lleva al párrafo número veinte de la misma página. A continuación se muestra cómo realizar
este tipo de vínculos:

Ejemplo: Vamos a suponer que se está realizando una página para la Facultad de Contaduría y
Administración, el objetivo es dar a conocer las distintas licenciaturas que se ofertan, así como su objetivo y
perfil de egreso. En este sentido, se crea una página en blanco y se teclea en principio las licenciaturas que
se imparten y más abajo la información detallada. A continuación se muestra los primeros párrafos de la
página.

2
Graficación y Multimedios 2018A Tema: Vínculos
M en A. Gabriel Alanis Boizo

La idea es que cuando el usuario de clic en la palabra Administración (posición uno), lo lleve a la parte
inferior de la página en donde se encuentra la información detallada (posición dos):

a) El primer paso consiste en insertar un objeto llamado ancla en la posición dos donde se encuentra la
información detallada. Se coloca el cursor antes o después de la palabra Administración(posición
dos), vamos al panel de Insertar en la pestaña Común y damos clic en el objeto ancla (en la imagen
se muestra en el círculo rojo), aparece una ventana que pide el nombre, en este caso tecleamos
administracion (el nombre del objeto ancla debe hacer referencia a la información y se sugiere que
sea sin acentos ni espacios) y se da clic en aceptar, como a continuación se muestra:

3
Graficación y Multimedios 2018A Tema: Vínculos
M en A. Gabriel Alanis Boizo

Si se realizó correctamente aparece el icono de una ancla donde se colocó el cursor, de la siguiente forma:

4
Graficación y Multimedios 2018A Tema: Vínculos
M en A. Gabriel Alanis Boizo

b). El segundo paso consiste en insertar un vínculo en la palabra que va a realizar el salto (posición
uno). Primero seleccionamos de la lista de carreras la palabra en este caso Administración en el
panel de propiedades en el apartado de vínculo se teclea #administracion es decir, # y el nombre
del ancla, como se muestra a continuación:

5
Graficación y Multimedios 2018A Tema: Vínculos
M en A. Gabriel Alanis Boizo

Si se realizó correctamente al dar clic en cualquier parte en blanco de la página, aparecerá subrayada
la palabra de la siguiente forma:

6
Graficación y Multimedios 2018A Tema: Vínculos
M en A. Gabriel Alanis Boizo

c). El tercer paso consiste en ejecutar y probar la página web. Para ejecutar la página se presiona la
tecla F12 y se mostrará en el navegador que se tenga predefinido. Al dar clic en la palabra
1.Administración debe saltar a donde se encuentra el ancla, es decir, a la información detallada de
la licenciatura, como a continuación se muestra:

Lo mismo se puede hacer para realizar vínculos en las otras licenciaturas.

2.- Vínculo a una página del sitio.

Este tipo de vínculo ocurre cuando se realiza un salto a información que se encuentra en una página distinta
en la que se encuentra el vínculo, sin embargo pertenece al mismo sitio, siguiendo con el ejemplo anterior,
un usuario para localizar información sobre la licenciatura en administración, da clic en un vínculo que se

7
Graficación y Multimedios 2018A Tema: Vínculos
M en A. Gabriel Alanis Boizo

encuentra en la página principal.html y salta a la página de nombre administracion.html. Este tipo de vínculos
se utilizan cuando la información para un vínculo es extensa y causaría inconvenientes administrarla en una
sola página. A continuación se muestra cómo realizar este tipo de vínculos:

Ejemplo: Vamos a suponer que se está realizando un sitio web para la Facultad de Contaduría y
Administración, el objetivo es dar a conocer a la población interesada las distintas licenciaturas, maestrías y
doctorados que se ofertan en la institución, así como objetivo y perfil de egreso.

a).El equipo de desarrollo concluye que por el tipo y extensión de la información que debe contener el sitio se
crearán cuatro páginas, la primera se denominará principal.html y contendrá la oferta educativa, las otras tres
páginas contendrán la información específica de cada nivel educativo.

b).Primer paso, se crea el sitio local de nombre <UAEM> en la carpeta de nombre <UAEM>.

c).Segundo paso, se crea la página de nombre <principal.html> con las siguientes características:

8
Graficación y Multimedios 2018A Tema: Vínculos
M en A. Gabriel Alanis Boizo

d).Tercer paso, se crea la página de nombre <Licenciaturas.html> con las siguientes características:

9
Graficación y Multimedios 2018A Tema: Vínculos
M en A. Gabriel Alanis Boizo

d). Cuarto paso, una vez que tenemos las dos páginas realizamos el vínculo que al dar clic en la página
principal.html en el texto de licenciaturas de un salto a la página licenciaturas.html, a continuación se muestra
el procedimiento:
 En la página principal.html se selecciona el texto que realizará el vínculo, en este caso la palabra
“licenciaturas”.
 En el panel de <propiedades> en el apartado de <vínculo> se teclea el nombre de la página donde se
encuentra la información, en este caso licenciaturas.html.

10
Graficación y Multimedios 2018A Tema: Vínculos
M en A. Gabriel Alanis Boizo

f). Quinto paso, salvamos, ejecutamos la página principal.html y se prueba el vínculo.

11
Graficación y Multimedios 2018A Tema: Vínculos
M en A. Gabriel Alanis Boizo

Página principal.html Página licenciaturas.html

g). Sexto paso, se crean las páginas de maestrías y doctorados y se realiza el mismo procedimiento para los
vínculos respectivos. Es importante destacar que cuando se da clic en algún vínculo, por default la
información se muestra en la misma ventana del navegador, si queremos que la información se muestre en
una nueva ventana en el apartado de <destino> del panel de <propiedades> se elige la opción <_blank>.

12