Instituto de Educacin Superior Tecnolgico Publico

Carlos Salazar Romero

Diseo Web


MG. ING. CIP ALEXANDER ARTURO ROMERO MORENO
17
HIPERENLACES EN DREAMWEAVER CS5





1. INTRODUCCIN.-

Un hiperenlace hiper!"nculo o !"nculo no es m#s $ue un enlace $ue al
ser pulsado lle!a de una p#gina o archi!o a otra p#gina o archi!o%

Es posible asignar un !"nculo a un te&to a una imagen o a parte de una
imagen%

Cuando creemos un enlace lo $ue realmente haremos ser# crear una
eti$ueta 'a(')a( $ue es la $ue en *T+, se encarga de de-inir los enlaces%
Esto podr#s obser!arlo en la barra de estado%





2. TIPOS DE REFERENCIA.-

E&isten di-erentes clases de rutas de acceso a la hora de de-inir los
!"nculos% Estas re-erencias no se limitan a los enlaces se comportar#n igual
cuando indi$uemos la ubicacin de una imagen de un archi!o .lash de la
ho/a de estilo etc%

Referencia Absolua!

Conduce al sitio en el $ue se encuentra el documento utilizando la ruta
completa del archi!o inclu0endo el protocolo http1))%

Por e/emplo http1))222%aulaclic%com o
http1))222%misitio%com)seccion3)pagina4%html%

,a re-erencia absoluta es independiente de la ubicacin de la p#gina $ue
contiene el enlace 0 ser# !#lida siempre $ue no cambie la ubicacin del

Instituto de Educacin Superior Tecnolgico Publico
Carlos Salazar Romero

Diseo Web


MG. ING. CIP ALEXANDER ARTURO ROMERO MORENO
18
archi!o enlazado% Es la opcin obligatoria si pretendemos enlazar a
archi!os -uera de nuestro sitio 5enlaces e&ternos6%

Referencia Relai"a al #ocu$eno %&or #efeco'!

,a ubicacin del archi!o enlazado se toma en relacin con la ubicacin
de la p#gina% Es decir partimos de la carpeta en la $ue se encuentra el
documento%

Si $ueremos enlazar con una p#gina o archi!o dentro de la misma
carpeta no tenemos m#s $ue utilizar su nombre% Por e/emplo
pagina3%htm%

Si est# en una subcarpeta de la p#gina actual no tenemos m#s $ue
indicar el nombre de la carpeta antes del archi!o 0 separarlos por una
barra 5)6% Por e/emplo imagenes)miimagen%gi-%

Si $ueremos re-erirnos a carpetas $ue est#n por encima del ni!el donde
nos encontramos deberemos utilizar %%)

Por e/emplo imagina $ue estamos en la siguiente direccin
http1))222%misitio%com)pagina)in-ormacion)inde&%html% En esta p#gina
$ueremos mostrar una imagen $ue se encuentra en la carpeta
http1))222%misitio%com)pagina)secciones)seccion4%html 7cmo
podemos hacerlo8 .#cil% Deberemos llamarla haciendo re-erencia al ni!el
superior 5http1))222%misito%com)pagina)6 para poder ir luego a la
carpeta secciones%

El resultado de la ruta ser"a el siguiente1 %%)secciones)seccion4%html%

De esta -orma mientras nos encontramos en la carpeta in-ormacin
subimos un ni!el 0 luego nos mo!emos dentro de la carpeta secciones
para mostrar el archi!o seccion4%html%

Esta opcin depende de la ubicacin del archi!o 0 pueden no -uncionar
correctamente si alteramos la estructura de carpetas%

Esta es la opcin por de-ecto de Dream2ea!er 0 es la -orma m#s
habitual para enlazar archi!os dentro del sitio%

Referencia relai"a al siio!

Conduce a un documento situado dentro del mismo sitio $ue el
documento actual% Tomando como origen la carpeta ra"z del sitio%

Para indicar la ruta relati!a al sitio precedemos la ruta de enlace por la
barra )%

En el e/emplo anterior si tu!i9semos de-inido como sitio la carpeta
http1))222%misitio%com) un enlace en cual$uier p#gina del sitio a

Instituto de Educacin Superior Tecnolgico Publico
Carlos Salazar Romero

Diseo Web


MG. ING. CIP ALEXANDER ARTURO ROMERO MORENO
19
http1))222%misitio%com)pagina)secciones)seccion4%html se crear"a como
)pagina)secciones)seccion4%html%

Por tanto podr"amos poner ese !"nculo en cual$uier p#gina del sitio 0
-uncionar"a independientemente de su ubicacin%

Estos enlaces no -uncionar#n en el sitio local a no ser $ue con-iguremos
un ser!idor de pruebas como !eremos m#s adelante 0a $ue Windo2s
interpretar# como ra"z la ra"z del disco duro%

(arca#ores o Punos #e fi)aci*n!

Conduce a un punto dentro de un documento 0a sea dentro del actual o
de otro di-erente% Para ello indicamos el nombre del punto de -i/acin a
continuacin de la ruta del archi!o 5relati!a o absoluta6 separados por
una almohadilla 5:6%

El -ormato ser"a nombre;de;documento%e&tension:nombre;de;punto%

Si el punto de -i/acin est# en la propia p#gina basta con indicar
<nicamente el punto en el enlace por e/emplo :apartado3

Podemos de-inir el punto dentro de un documento a tra!9s del men<
Insertar opcin =ncla/e con nombre% > podemos utilizar el atributo ID
de cual$uier elemento 5se puede establecer desde el Inspector de
Propiedades *T+,6% En cual$uier caso los nombres no deben de estar
repetidos en la p#gina%

Deber#s tener siempre en cuenta $ue los nombres de las rutas se
correspondan per-ectamente a los nombres de los archi!os 0 carpetas en
el ser!idor 5local o remoto6%

Por ello es mu0 recomendable $ue utilices siempre min<sculas para
e!itar -allos en los enlaces%

Tambi9n deber#s e!itar utilizar caracteres especiales como acentos o
espacios as" no tendr#s problemas a la hora de re-erenciar tus ob/etos%


+. CREAR EN,ACES.-

,a -orma m#s sencilla de crear un enlace es a tra!9s del inspector de
propiedades% Para ello es necesario seleccionar el te&to o el ob/eto $ue !a a
ser!ir de enlace 0 seguidamente establecer el ?"nculo en el inspector
*T+,%

Por e/emplo en la siguiente imagen ha0 un enlace a 222%aulaclic%es $ue
al ser un archi!o e&terno es de re-erencia absoluta por eso contiene
http1))



Instituto de Educacin Superior Tecnolgico Publico
Carlos Salazar Romero

Diseo Web


MG. ING. CIP ALEXANDER ARTURO ROMERO MORENO
20



Es posible crear tambi9n !"nculos !ac"os $ue pueden ser <tiles cuando se
utilizan comportamientos etc% Para ello es necesario escribir en ?"nculo
<nicamente una almohadilla :% ?eremos su utilidad m#s adelante%
>tra -orma de crear un enlace es a tra!9s del men< Insertar opcin
*iper!"nculo%




Crear !"nculos de esta -orma es mu0 sencillo slo deber#s rellenar los
campos $ue e&plicaremos a continuacin 0 el enlace se colocar# en el lugar
en el $ue estaba situado el cursor%

Te&to1 es el te&to $ue mostrar# el enlace% Si ten"amos un te&to
seleccionado aparecer# ah"%

-.nculo! es la p#gina a la $ue ir# redirigida el enlace si se trata de un
enlace e&terno deber#s escribirla empezando siempre por http1))% *az
clic sobre el icono de carpeta para buscar los archi!os $ue e&istan dentro
del sitio% Por de-ecto Dream2ea!er te crear# un enlace relati!o al
documento% Si $uieres $ue los enlaces sean relati!os al sitio !isita este
a!anzado =!anzado%

Desino! la !entana donde se abrir# la p#gina este campo se e&plica en
el siguiente apartado%

T.ulo! se trata de la a0uda conte&tual del !"nculo $ue aparecer# al
mantener un instante el cursor sobre el enlace%

Tecla #e acceso! atributo $ue -acilita la accesibilidad a las p#ginas
habilita el acceso al enlace mediante la pulsacin de la tecla =lt m#s la
tecla de acceso indicada%

Instituto de Educacin Superior Tecnolgico Publico
Carlos Salazar Romero

Diseo Web


MG. ING. CIP ALEXANDER ARTURO ROMERO MORENO
21

/n#ice #e abula#or! Como habr#s podido obser!ar puedes saltar a
tra!9s de los enlaces pulsando la tecla Tabulador% En este campo podr#s
establecer un "ndice indicando la prioridad del enlace 0 as" con-igurar el
modo en el $ue actuar# el Tabulador es sus di-erentes saltos% Por
de-ecto se tabular#n por orden de aparicin%


0. DESTINO DE, EN,ACE.-

El destino del enlace determina en $u9 !entana !a a ser abierta la p#gina
!inculada puede !ariar dependiendo de si el documento est# basado en
marcos%

Puede especi-icarse en el inspector de propiedades *T+, a tra!9s de
Destino o en la !entana $ue aparece a tra!9s del men< Insertar opcin
*iper!"nculo%




1blan2!

=bre el documento !inculado en una nue!a !entana o pestaa del
na!egador%

1&aren!

=bre el documento !inculado en la !entana del marco $ue contiene el
!"nculo o en el con/unto de marcos padre% Tiene sentido si se emplean
marcos%

1self!

Es la opcin predeterminada 0 la $ue se produce si no indicamos otra
cosa% =bre el documento !inculado en el mismo marco o !entana $ue el
!"nculo%

1o&!

=bre el documento !inculado en la !entana completa del na!egador% Tiene
sentido si se emplean marcos%

@o te preocupes si no te $ueda del todo claro para $u9 sir!e cada una de
estas opciones de destino 0a $ue se !ol!er#n a !er en el tema de +arcos%


Instituto de Educacin Superior Tecnolgico Publico
Carlos Salazar Romero

Diseo Web


MG. ING. CIP ALEXANDER ARTURO ROMERO MORENO
22
Si la p#gina no usa marcos 5lo habitual ho0 en d"a6 simplemente no
especi-icaremos nada para abrirlo en la misma !entana 0 emplearemos
;blanA para abrir !entanas nue!as%

,o habitual es abrir las los enlaces a p#ginas del sitio en la misma !entana
0 los enlaces e&ternos en !entanas nue!as% >tra tendencia dice $ue una
p#gina nunca deber"a de abrir nue!as !entanas 0 $ue debe de ser el
usuario el $ue decida $u9 enlaces $uiere abrir en !entanas nue!as% En la
ma0or"a de na!egadores para abrir un enlace un una !entana nue!a
basta con hacer clic con la ruedecilla del ratn%
3. FOR(ATO DE, EN,ACE.-

En general un te&to $ue tiene asociado un !"nculo suele aparecer
subra0ado% =l mismo tiempo puede ad$uirir cuatro colores di-erentes $ue
pueden especi-icarse a tra!9s de las propiedades de la p#gina% Estos cuatro
colores di-erentes corresponden a los tres estados del !"nculo1 !"nculo
normal !"nculo acti!o 5el <ltimo pulsado6 !"nculo !isitado o !"nculo de
sustitucin 5cuando el cursor est# sobre el !"nculo6%

=$u" tienes dos !"nculos de e/emplo1

222%aulaclic%es 222%elpais%com

Si has !isitado alguno !er#s $ue sale en un tono morado si no sale en
azul%

Recuerda $ue como todo en nuestra p#gina los !"nculos tienen un -ormato
por de-ecto pero es totalmente personalizable por CSS% Para ello basta
con crear una Regla de estilo para la eti$ueta a%

Si $ueremos distinguir entre los tres estados del enlace emplearemos los
siguientes selectores1

a!lin2 para los enlaces normales%
a!"isie# para los enlaces !isitados%
a!aci"e para los enlaces acti!os%
a!4o"er para los enlaces con el cursor encima%

=un$ue recuerda $ue en las propiedades del documento ten"amos la
categor"a ?"nculos CSS $ue nos permite establecer estos !alores%

Cuando el !"nculo est# de-inido sobre una imagen en el borde aparecen
una serie de puntitos al pulsar sobre ella% Cuando el !"nculo est# de-inido
sobre una zona de una imagen 5un mapa6 aparece el contorno de esa
zona%

=$u" tenemos dos !"nculos en una imagen1



Instituto de Educacin Superior Tecnolgico Publico
Carlos Salazar Romero

Diseo Web


MG. ING. CIP ALEXANDER ARTURO ROMERO MORENO
23




Como puedes !er la primera imagen $ue hace de !"nculo contiene un
recuadro alrededor% Este es el -ormato por de-ecto pero no suele $uedar
bien sobre todo en im#genes con el -ondo transparente%

?eamos como $uitarlo utilizando CSS%

En el Inspector de propiedades CSS seleccionamos @ue!a regla CSS en
Regla de destino 0 pulsamos Editar regla%





En Tipo de selector elegimos Compuesto 0 en @ombre de selector
escribimos a img es decir im#genes $ue est9n dentro de una eti$ueta a
5de enlace6%

Se abrir# la !entana De-inicin de regla para a img1



Instituto de Educacin Superior Tecnolgico Publico
Carlos Salazar Romero

Diseo Web


MG. ING. CIP ALEXANDER ARTURO ROMERO MORENO
24



En ella seleccionamos la categor"a 5or#e 0 en S6le seleccionamos
none% Pulsamos Ace&ar%

Esta regla har# $ue las im#genes con enlace se muestren sin borde%

Tanto si el !"nculo se asigna a un te&to como a una imagen el cursor
cambia de -orma al situarse encima del !"nculo% Suele ad$uirir la apariencia
de una mano sealando%