Hiperenlaces 6 f
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Hiperenlaces 6 f

on

  • 649 views

 

Statistics

Views

Total Views
649
Views on SlideShare
649
Embed Views
0

Actions

Likes
0
Downloads
7
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Hiperenlaces 6 f Presentation Transcript

  • 1. Referencia absoluta:Conduce al sitio en el que se encuentra el documento utilizandola ruta completa del archivo, incluyendo el protocolo http://. Porejemplo, http://www.aulaclic.com, ohttp://misitio.com/seccion2/pagina1html
  • 2. Referencia relativa al documento (por defecto): La ubicación del archivo enlazado se toma en relación con la ubicación del la página. Es decir, partimos de la carpeta en la que se encuentra el documento. Si queremos enlazar con una página o archivo dentro de la misma carpeta, no tenemos más que utilizar su nombre. Por ejemplo, pagina2.htm.Subcarpeta de la pagina inicial (carpeta imágenes) Nombre del archivoJuntaremos el nombre de la carpeta mas el nombre delArchivo ( para acceder al archivo q deseamos ir)
  • 3. Referencia relativa al sitio: Conduce a un documento situado dentro del mismo sitio que eldocumento actual. Tomando como origen la carpeta raíz del sitio. Para indicar la ruta relativa al sitio, precedemos la ruta de enlacepor la barra /. Si tuviésemos definido como sitio la carpeta (1) http://www.tudiscovery.com/, un enlace en cualquier Pagina del sitio a (2) http://www.tudiscovery.com/ imágenes/galleries/americana-chopper-y-susmotocicletas/ se crearía como (3) / imágenes/galleries/american-chopper-y-susmotocicletas/ (1) (3) (2)
  • 4. Marcadores o Puntos de fijación: Conduce a un punto dentro de un documento, ya seadentro del actual o de otro diferente. Para ello, indicamosel nombre del punto de fijación a continuación de la rutadel archivo (relativa o absoluta) separados por unaalmohadilla (#).Ejemplo deciencias.net/disenoweb/elaborardw/pagi nas/hipervinculos.htm#arriba, en este ejemplo el punto de fijación es htm#arriba, con esta terminación no nos conducirá a otra pagina, si lo queremos así entonces tendremos que agregar " nombre_documento#nombre_anclaje"
  • 5. La forma más sencilla de crear un enlace es a través del inspector depropiedades. Para ello es necesario seleccionar el texto o el objeto que vaa servir de enlace, y seguidamente establecer el Vínculo en el inspectorHTML.Es posible crear también vínculos vacíos,que pueden ser útiles cuando se utilizancomportamientos, etc. Para ello esnecesario escribir en Vínculo únicamenteuna almohadilla
  • 6. Otra forma de crear un enlacees a través del menú Insertar,opción Hipervínculo. Crear vínculos de esta forma es muy sencillo, sólo deberásrellenar los campos que explicaremos a continuación y elenlace se colocará en el lugar en el que estaba situado elcursor.
  • 7.  Es la página a la que irá dirigida el enlace, si se Es el texto que mostrará trata de un enlace el enlace. Si teníamos externo deberás un texto seleccionado, escribirla empezando aparecerá ahí. siempre por http://. Haz clic sobre el icono de carpeta para buscar los archivos que existan dentro del sitio. Por defecto Dreamweaver te creará un enlace relativo al documento.
  • 8.  es la ayuda contextual del vinculo, que aparecerá al  la ventana donde se abrirá la mantener el cursor sobre el página, este campo se aplica enlace. en el siguiente apartado.  facilita el acceso a las páginas, podrás establecer un índice habilitando el acceso al enlace indicando la prioridad del enlace y así configurar el pulsando Alt más la tecla de modo en el que actuara el acceso indicada. tabulador en sus diferentes saltos
  • 9. El destino del enlace determina en qué ventana va a ser abierta la página vinculada, puede variar dependiendo si el documento está basado en marcos.Puede especificarse en el inspector de propiedades HTML a través de destino, o en la ventana que aparece a través del menú insertar, opción hipervínculo.
  • 10. .
  • 11.  En general, un texto que tiene asociado un vínculo suele aparecer subrayado. Al mismo tiempo, puede adquirir cuatro colores diferentes que pueden especificarse a través de las propiedades de la página. Estos cuatro colores diferentes corresponden a los tres estados del vínculo: vínculo normal, vínculo activo (el último pulsado), vínculo visitado o vínculo de sustitución (cuando el cursor está sobre el vínculo). Aquí tienes dos vínculos de ejemplo: www.aulaclic.es www.elpais.es
  • 12.  como todo en nuestra página, los vínculos tienen un formato por defecto, pero es totalmente personalizable por CSS. Para ello, basta con crear una Regla de estilo para la etiqueta a. Si queremos distinguir entre los tres estados del enlace, emplearemos los siguientes selectores: a:link para los enlaces normales. a:visited para los enlaces visitados. a:active para los enlaces activos. a:hover para los enlaces con el cursor encima.
  • 13.  las propiedades del documento teníamos la categoría Vínculos CSS que nos permite establecer estos valores. Cuando el vínculo está definido sobre una imagen, en el borde aparecen una serie de puntitos al pulsar sobre ella. Cuando el vínculo está definido sobre una zona de una imagen (un mapa), aparece el contorno de esa zona. Aquí tenemos dos vínculos en una imagen:
  • 14.  Como puedes ver, la primera imagen que hace de vínculo contiene un recuadro alrededor. Este es el formato por defecto, pero no suele quedar bien, sobre todo en imágenes con el fondo transparente. Veamos como quitarlo utilizando CSS. En el Inspector de propiedades CSS seleccionamos Nueva regla CSS en Regla de destino, y pulsamos Editar regla. En Tipo de selector, elegimos Compuesto, y en Nombre de selector escribimos a img, es decir, imágenes que estén dentro de una etiqueta a (de enlace).
  • 15. Se abrirá laventana Definición de reglapara a img En ella, seleccionamos la categoría Borde, y en Style seleccionamos none. Pulsamos Aceptar. Esta regla hará que las imágenes con enlace se muestren sin borde. Tanto si el vínculo se asigna a un texto como a una imagen, el cursor cambia de forma al situarse encima del vínculo. Suele adquirir la apariencia de una mano señalando.
  • 16. Enlace a correo electrónicoEs posible especificar vínculos a direcciones de correo electrónico.Esto resulta útil cuando se desea que los visitantes de la web puedancontactar con nosotros.La sintaxis del vínculo en este caso es mailto:direccióndecorreo.Puede definirse el vínculo a través de Vínculo, del inspector depropiedades, seleccionando previamente el texto o la imagendeseados.También es posible a través del menú Insertar, opción Vínculo decorreo electrónico.En este caso no es posible asignar el vínculo a una imagen, solo permite introducir el texto que contendrá el vínculo de correo.
  • 17. Enlace a correo electrónico Lo que hace esta opción es abrir el cliente de correo predeterminado del usuario (Outlook, Firebird...). Por lo que puede no ser práctica si el usuario no lo tiene, se conecta en un ordenador público, o emplea el correo web directamente. Siempre que se pueda, es mejor crear un formulario de contacto, aunque esto requerirá una página dinámica como veremos a lo largo del curso. Otra opción sería mostrar nuestra dirección de correo, para que el usuario pueda enviarnos el correo como quiera. Si publicamos nuestra dirección en la web es mejor hacerlo como una imagen, o escribiéndola de forma que la pueda entender un humano (por ejemplo micorreo(arr)sitio.com) para evitar que sea reconocida por robots que la emplearán para el envío de correo no deseado.
  • 18. Trabajo hecho por : Juan Luis Hernández Ivonne Santiago Salas María Luisa López Vázquez Olga Barriga Arellano 6-f