Creación de vínculos
El funcionamiento de Internet, en la parte de navegación en los diferentes sitios web, es gracias a los vínculos o enlaces que se pueden realizar entre los diferentes archivos que se visualizan, existen hoy en día un gran número de tipos de archivos que se observan: textos, gráficos en sus diferentes formatos, además sonido, animación y video. Por ello, es importante conocer la forma en que se estructura un sitio, cuando el número de páginas web es grande se debe diseñar el mapa de navegación del sitio.
El vínculo se puede realizar de varias maneras, por ejemplo, crear una liga por medio de un hipertexto, para que se traslade a otro archivo del sitio o sección del mismo documento, además de poder enlazarlo incluso a otro sitio web de Internet. Los enlaces se crean utilizando hipertexto o imágenes.
Los vínculos entre archivos de un sitio web pueden emplear direccionamiento relativo, es decir, desplazarse a otro lugar, empezando desde la posición donde se encuentra actualmente o direccionamiento absoluto, cuando se trata de ir a un archivo, independiente de donde se localice el usuario que navega. Un vínculo es una referencia insertada en una página web que señala a otro documento.
Existen varias formas para insertar vínculos en una página estas son a través de las etiquetas <a href> y se mencionan a continuación.
|
Creación de vínculo con otro documento, por medio de etiquetas html |
|
Creación de vínculo con otro documento, empleando el software de Dreamweaver CS6 |
|
Rutas relativas o absolutas, en la programación de páginas web |
|
Insertar mapa de imagen a través de la etiqueta <map> con el software Dreamweaver CS6 |
Actividad de aprendizaje 4
Vínculos en una página web
Una de las bondades de la programación html para el ambiente de Internet radica en la posibilidad de dirigir vínculos al enlazar hacia un archivo del propio proyecto u otro sitio. En esta actividad de aprendizaje se crean vínculos de una página web hacia otra, mediante las etiquetas del lenguaje html, además de crear un mapa de imagen para elaborar vínculos, empleando Dreamweaver CS6.
Actividad de aprendizaje 4 parte 1
Creación de vínculos utilizando etiquetas html
Continuando con el proyecto de la unidad académica, crear los vínculos en el archivo indice.htm hacia los archivos de las especialidades de la escuela por medio de etiquetas html, en vista código del software Dreamweaver CS6, además de modificar los parámetros para el color de los enlaces en la etiqueta body.
El archivo indice.htm tiene una lista en forma de viñetas de las especialidades y presentación, para ello es necesario programar vínculos para cada taller hacia su archivo htm, además dirigir la liga de la opción de presentación y vídeo de la escuela hacia la página correspondiente, como se muestra en la tabla 4.
Tabla 4. Relación de los vínculos del archivo indice.htm con los archivos de las especialidades.
| Especialidad de la unidad académica | Archivo a mostrar o ligar |
| Técnico en aeronáutica | aeronautica.htm |
| Técnico en sistemas automotrices | automotriz.htm |
| Técnico en construcción | construccion.htm |
| Técnico en instalaciones y mantenimiento eléctricos | electricidad.htm |
| Técnico en mantenimiento industrial | mantenimiento.htm |
| Técnico en soldadura industrial | soldadura.htm |
| Presentación y video de la escuela | presentacion.htm |
En el video 50 se explica la creación de los vínculos hacia las especialidades de la unidad académica y al archivo presentacion.htm
Video 50. Creación de vínculos del archivo indice.htm empleando etiquetas html.
|
Creación de vínculos utilizando etiquetas html |
Actividad de aprendizaje 4 parte 2
Mapas de imagen
Otra forma de crear un vínculo es mediante la utilización de una imagen, en lugar de ser un hipertexto, es una imagen que al momento de dar clic sobre ella, te dirige al archivo deseado. Esto se logra colocando el archivo gráfico dentro de la etiqueta <a> y su respectivo cierre </a>.
Una de las aplicaciones que brinda la herramienta de Dreamweaver CS6 es la creación de los mapas de imagen, es decir, crear a través de una imagen dividida en secciones, diferentes enlaces con la ventaja de emplear una imagen descriptiva de la aplicación que se este diseñando, se aplica una imagen que contiene las especialidades de la unidad académica.
En el video 51 se describe el procedimiento para elaborar un mapa de imagen en el archivo indice.htm que utilice cada sección de la imagen (indice.jpg) de los talleres de la escuela para lograr el enlace hacia cada uno de ellos, empleando la vista diseño de Dreamweaver CS6 (Bernardo, 2012, pp. 227 - 243).
Video 51. Creación de vínculos del archivo indice.htm empleando un mapa de imagen.
|
Creación de un mapa de imagen mediante Dreamweaver CS6 |