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%