Unidad 4. Herramientas de diseño (I)

4.1. Introducción

 Antes de comenzar a trabajar con los elementos que conforman una página web, vamos a estudiar algunas herramientas de Dreamweaver que sirven para asistir el diseño e incluso algunas más que sirven para dar mantenimiento a páginas ya creadas. Usarlas o no es opcional. Sin embargo, son particularmente útiles en diversas tareas. Por ejemplo, como referencia cuando insertamos o redimensionamos una imagen o un elemento estructural HTML. Las imágenes de rastreo, en otros casos, sirven como moldes para el diseño. A su vez, la vista En vivo nos puede servir para hacer ajustes en una página sin regresar a la vista Diseño, viendo además el resultado de inmediato.

Los elementos que vamos a estudiar son:

• Reglas y guías
• Cuadrículas
• Imagen de rastreo
• Edición en la vista En vivo
• Vista rápida de elementos
• Guías interactivas
• Selección inversa

A lo largo del curso podremos usar estas herramientas en diversos momentos según tengamos necesidad de las mismas.

4.2. Reglas, guías y cuadrícula

Cuando trabajamos en la vista Diseño, podemos activar las reglas, horizontal y vertical, que aparecerán en la parte izquierda y superior del área de trabajo, a través del menú Ver, opción Reglas, después Mostrar. Como podemos ver, podemos establecer las unidades de medida que presentarán las reglas, pixeles, pulgadas o centímetros.

Lo más recomendable es utilizar pixeles, ya que es una unidad común para establecer el tamaño en el que las distintas pantallas y dispositivos presentan las páginas web.

Las reglas en el área del documento se ven así:

Observa que en la esquina superior izquierda están los valores de origen, es decir, cero horizontal y cero vertical. Podemos cambiar ese valor de origen para, por ejemplo, medir una sección que estemos diseñando en nuestra página. Eso es tan simple como hacer clic y desplazar el cuadro que está exactamente en la esquina. Unas líneas nos mostrarán dónde podemos ubicar el nuevo origen, tanto vertical como horizontalmente.

 

Como puedes observar en la imagen del menú, tenemos también la opción Restablecer origen, que devuelve la regla a su posición original.

Otra ventaja que nos da el uso de las reglas es que podemos derivar de ellas líneas guías. De la regla superior derivamos líneas horizontales y verticales de la que está a la izquierda. Para ello, debemos hacer clic en la regla deseada y sin soltar el botón izquierdo del ratón, desplazamos sobre el área del documento y soltamos en el punto donde deseamos la línea. Una etiqueta te irá mostran el punto en el que se encuentra la línea. Obviamente, estas guías no van a formar parte de nuestra página, sólo nos servirán de referencia para la ubicación y/o redimensionamiento de los objetos.

Podemos ubicar tantas líneas guías como consideremos necesario para el diseño de nuestra página. Para eliminarlas, basta con "tomarlas" con el ratón y desplazarlas hasta la regla correspondiente. Otra ventaja que presentan, es que podemos ver la distancia entre líneas guías ahí donde ubicamos el cursor cuando pulsamos la tecla CTRL (Control).

Otra herramienta similar a las anteriores es la cuadrícula. Ésta aparece en el fondo del área del documento en la vista Diseño. Para activarla utilizamos el menú Ver, opción Cuadrícula, Mostrar cuadrícula.

La apariencia del área del documento sería ahora así:

El color de la cuadrícula, si se presenta como líneas o puntos y su distancia se establecen con el menú Ver, Cuadrícula, opción Configuración de cuadrícula.

La opción Ajustar a cuadrícula sirve para "atraer" objetos a las líneas de la cuadrícula cuando los movemos el cursor, pero esto sólo funciona cuando dichos objetos tienen posición absoluta. Esto será tema de estudio más adelante.

4.3. Imagen de rastreo

Podríamos definir a las imágenes de rastreo como fondos en el área de documento que sirven de moldes para el diseño de nuestra página web. Este fondo no forma parte de la propia página, por supuesto.

Para insertar una imagen de rastreo, utilizamos el menú Ver, Imagen de rastreo y luego la opción Cargar.

Podemos seleccionar una imagen de cualquiera de los formatos más comunes, .jpg, .png, .gif, etcétera. En cualquier caso, después de seleccionar el archivo, se abre el cuadro de diálogo Propiedades de la página, en la categoría Imagen de rastreo.

También llegamos a este cuadro de diálogo a través del menú Modificar, Propiedades de página y luego seleccionando la categoría correspondiente.

En este cuadro no sólo vemos la ruta al archivo de imagen, sino además podemos establecer su grado de transparencia.

Al final tendremos un fondo en el área del documento que, como ya mencionamos, no será parte de nuestra página, pero nos servirá para irla confeccionando. Su apariencia podría ser algo como esto:

4.4. Edición en la vista En vivo

La nueva versión de Dreamweaver CC no sólo ha mejorado la previsualización de las páginas en la vista En vivo, que cobran el mismo aspecto que en la mayoría de los navegadores, ahora también permite diversas tareas de edición.

Recuerda que la barra de documento tiene un botón que permite conmutar entre la vista Diseño y la vista En vivo. En esta vista podemos hacer clic sobre algún elemento de la página para editar el texto, insertar imágenes, asociar elementos HTML con selectores de CSS (tema que veremos más adelante), tener una vista rápida de los elementos de toda la página, cortar, copiar y pegar, elementos, etcétera.

Cuando hacemos clic sobre un elemento de una página en la vista En vivo, Dreamweaver remarca el elemento HTML correspondiente con un recuadro azul. No te preocupes por lo pronto de lo que esto significa, lo más importante es que en la parte superior de este recuadro podemos ver la etiqueta HTML que se trata y podemos asociarle fácilmente un selector de clase CSS o un ID.

En la siguiente imagen hemos hecho clic sobre el párrafo. Observa el recuadro azul, en la parte superior indica que se trata de una etiqueta <p> (de párrafo):

Si pulsamos el en signo +, veremos una pequeña caja de texto al lado de la etiqueta que nos permitirá añadir un selector CSS a esa etiqueta, como en la siguiente imagen.

Con ello, como estudiaremos en los siguientes capítulos, podríamos modificar rápidamente las propiedades de texto de ese párrafo, como en la siguiente imagen en donde hemos aplicado la clase llamada .marron.

A su vez, en algunos elementos, como las imágenes, aparecerá un Inspector de propiedades de visualización rápida al hacer clic sobre el icono a la izquierda de la etiqueta, lo cual nos permitirá editar sus propiedades más importantes.

Si hacemos doble clic en un objeto de texto, como un párrafo o un encabezado, el recuadro cambia de azul a naranja y veremos un cursor que nos permitirá modificar el texto. Si además seleccionamos una parte del texto, podremos ver una pequeña barra de herramientas para darle formato.

La edición en la vista En vivo aún tiene algunas otras características, pero para revisarlas debemos estudiar otros elementos, como la Vista rápida de elementos, que trataremos en el siguiente apartado.

Unidad 5. El texto: propiedades y formato (I)

A lo largo de este tema vamos a aprender a cambiar las propiedades del texto y a crear estilos CSS, que permiten asignar al texto clases y estilos creados por nosotros mismos, no predefinidos.

5.1. Características del texto

Las características del texto seleccionado pueden ser definidas a través del menú Formato, y a través del inspector de propiedades. Vamos a ver las posibilidades que se nos ofrecen a través del inspector de propiedades, que están clasificadas en dos categorías HTML y CSS.

 Comenzamos viendo las propiedades HTML

Todas estas propiedades generan etiquetas HTML, que tienen un estilo por defecto en el navegador. Pero al final, podremos personalizarlas con CSS para que se vean exactamente como queramos.

• Formato: 
• Permite seleccionar un formato de párrafo ya definido para HTML, que puede ser encabezado, párrafo o formato predeterminado. Los encabezados se utilizan para establecer títulos dentro de un documento. El formato predeterminado sirve para que el texto aparezca tal cual ha sido escrito, por ejemplo, si entre dos palabras se introducen varios espacios solo se considera uno, pero al establecer el formato predeterminado se respetará que hayan varios espacios en lugar de solo uno. El texto normal, debería ir siempre en párrafos, salvo que esté en otros elementos, como tablas o listas.
• Es importante emplear correctamente los encabezados, ya que se organizará mejor el contenido de nuestra web, y es importante de cara a buscadores y visitantes. No te preocupes por cómo se muestran esos encabezados, recuerda que siempre podremos personalizarlo.
• Estilo: 
• El botón B encierra el texto en una etiqueta <strong></strong>, que por defecto se muestra en negrita. El botón I, lo encierra entre <em></em>, que por defecto se ve en cursiva.
• Estas son las etiquetas de resaltado más habituales, pero existen otras que encontramos a través del menú Texto. Por ejemplo, subrayar el texto. Esta opción no aparece en el panel de Propiedades ya que de normal no suele utilizarse, debido a que los vínculos aparecen subrayados y el subrayar texto normal podría hacer que el usuario pensara que se trata de un vínculo. Además, emplea etiquetas que están en desuso.
• Lista: 
• Estos botones permiten crear listas con viñetas o listas numeradas. Veremos qué son las listas en el siguiente apartado.
• Sangría: 
• Estos dos botones permiten sangrar el texto y anular la sangría. La sangría es una especie de margen que se establece a ambos lados del texto. En este caso los botones se refieren a sangría a la izquierda del texto.
• Si lo aplicamos sobre texto normal, lo encerrará en una etiqueta <blockquote></blockquote>, que por defecto se muestra indentada hacia la derecha. En cambio, al aplicarlo sobre una lista, creará una sublista dentro de ésta.

 Accediendo a las propiedades CSS.

Las hojas de estilo en cascada (CSS, Cascading Style Sheets) nos permiten formatear nuestra página y darle el diseño que queramos. Podemos cambiar desde propiedades simples, como el color de fondo, hasta cosas más vistosas, como hacer que un bloque se muestre en una posición determinada o que un elemento cambie al pasar el cursor sobre él. Profundizaremos en esto más adelante, por ser una parte fundamental en la creación de páginas web.

Tenemos más posibilidades a la hora de aplicar formatos. Dreamweaver CC nos proporciona numerosas funciones para la creación de estilos mediante hojas de estilos en cascada .

• Regla de destino: 
• Las reglas CSS sirven para definir a qué elemento aplicamos el estilo, y cómo lo hacemos.
• Podemos definir una Nueva Regla, eliminarla o aplicar una clase. Veremos esto antes de acabar el tema.
• Editar regla: 
• Mediante este botón accedemos a las opciones para la creación o modificación de estilos CSS, de la regla seleccionada.
• CSS Designer: 
• Este botón abre el panel Diseñador de CSS si no lo tuviéramos abierto.
• Fuente: Permite seleccionar un conjunto de fuentes. Aparecen conjuntos de fuentes en lugar de una sola, ya que es posible que al establecer una única fuente el usuario no la tenga en su ordenador. El seleccionar un conjunto de fuentes posibilita que en el caso de que el usuario no tenga una fuente se aplique otra del conjunto. Por ejemplo, si seleccionamos Arial, Helvetica, sans-serif, el texto se verá con la fuente Arial, pero si esta no existe se verá en Helvetica.
• Estilo:  
• Estas listas desplegables ponen el texto en cursiva u oblicua y en diversos grados de negrita respectivamente. Pero en este caso, generan un estilo css en línea.
• Alineación: 
• A través de estos botones es posible establecer la alineación del texto de una de estas cuatro formas distintas: izquierda, centrada, derecha y justificada.
• Hemos de aplicarlo sobre el elemento que contiene el texto que queremos alinear, por ejemplo sobre un párrafo.
• Tamaño: 
• Permite cambiar el tamaño del texto. El tamaño lo podemos indicar en diversas unidades, en píxeles, porcentajes del tamaño base, etc...
• Color: 
• Permite seleccionar el color de la fuente, ignorando el color que se haya definido en las propiedades de la página. Si no se ha establecido ningún color en las propiedades de la página ni aquí, el color del texto por defecto será el negro.

• Unidad 5. El texto: propiedades y formato (III)

  
  5.2. ListasEs posible insertar texto a modo de lista. A su vez, la lista puede ser numerada o con viñetas.
  Para que un texto que ya ha sido introducido en el documento se convierta en una lista, simplemente hay que seleccionarlo y pulsar sobre la opción de lista correspondiente, ya sea a través del inspector de propiedades, o a través del menú Formato.
  La lista con viñetas (sin ordenar) se selecciona a través del botón  , mientras que la lista numerada (ordenada) se selecciona a través del botón .
   Ejemplo de lista numerada (ordenada):
  1. Preparar la mochila
     1. Sacar los libros de ese día
     2. Introducir los libros del día siguiente
  2. Ponerme el pijama
  3. Lavarme los dientes
  4. Poner el despertador
  Ejemplo de lista con viñetas (sin ordenar):
  • Perro
  • Gato
  • Aves
    • Canario
    • Loro
  • Hámster
  Para establecer listas anidadas dentro de otras como en los ejemplos anteriores, es necesario añadir una sangría en los elementos de la lista que se desee que pasen a formar parte de la lista anidada.
  A través del menú Formato, opción Lista, es posible acceder a las propiedades de la lista seleccionada. Se debe seleccionar el texto de la lista previamente o tener el cursor en algún lugar de la lista para que se active este submenú.
  En la ventana Propiedades de lista se puede especificar el tipo de lista (con números o con viñetas), el tipo de números o viñetas que se utilizarán (en la propiedad Estilo:), y en el caso de las listas ordenadas, el número por el que comenzará el recuento.
  

• 5.3. Caracteres especiales

  A veces necesitarás introducir caracteres especiales en tus páginas. Debido al modo editor de Diseño de Dreamweaver esta tarea es muy sencilla utilizando el teclado, podemos incluir caracteres como á, ê, ì, ö, ç.. de forma rápida. Pero si quieres poner dos espacios en blanco y los introduces por teclado, Dreamweaver no los creará, deberás introducirlo dos veces utilizando la opción que vamos a ver a continuación. Lo mismo ocurrirá con los caracteres que no tenemos en el teclado.
  Haz clic en el menú Insertar y selecciona la opción Carácter verás el desplegable de la imagen inferior.
  
  Se trata de una lista rápida de los caracteres más utilizados que no pueden ser introducidos mediante teclado.
  Para introducir alguno de estos caracteres en tus textos sólo selecciónalo en la lista y aparecerá en la vista de Diseño.
  Si el carácter que buscas no se encontrase allí, haz clic en Otro... y se abrirá una ventana desde donde podrás seleccionar caracteres entre una lista bastante más amplia:
  

Estilos CSS. Introducción

Los estilos CSS se utilizan para combinar una serie de atributos del texto, como pueden ser el color o el tamaño, de modo que no sea necesario asignar estos atributos uno a uno cada vez que se desee repetir la asignación de esos mismos valores a otras partes del texto.

También permiten, como veremos más adelante, definir prácticamente cualquier propiedad de los elementos que contendrá nuestra web.

Podemos definir los estilos para determinadas etiquetas, como encabezados (<h1>, <h2>...), párrafos (<p>), enlaces (<a>), etc... lo que formateará todas las apariciones de esta etiqueta en el ámbito del estilo.

También podemos crear clases. Algo así como definir un estilo y darle un alias. El estilo afectará a todos los elementos a los que apliquemos esa clase.

Por otro lado, al crear el estilo, podemos definirlo como un estilo en línea (afectará sólo al elemento seleccionado) o crear una regla, que puede afectar a toda la página, o a todo el sitio si la guardamos en un archivo CSS.

Un estilo CSS no es más que un conjunto de reglas de formato que controlan el aspecto del contenido de una página Web. Los estilos CSS aportan gran flexibilidad y control al aspecto exacto que se busca en una página, desde la posición precisa de elementos hasta el diseño de fuentes y estilos concretos.

Una de las grandes ventajas de los estilos CSS reside en que cuentan con una capacidad simple de actualización; cuando actualiza un estilo CSS, el formato de todos los documentos que usan ese estilo se actualiza automáticamente.

5.5. Crear un estilo personalizado

Con Dreamweaver CC, las características que apliquemos a un texto a través del Inspector de propiedades CSS crearán automáticamente estilos CSS. Aunque tenemos que decidir a qué elementos afecta.

Veámoslo:

 Crear un estilo en línea.

Por ejemplo, si queremos que un determinado estilo afecte a un único elemento y en un caso puntual, podemos crearlo como un estilo en línea. Esto incrustará el estilo en la propia etiqueta HTML, por lo que si alguna vez queremos modificarlo, deberemos de ir al elemento.

En el Inspector de propiedades CSS, en Regla de destino, seleccionamos <Nuevo estilo en línea>.

A continuación, definimos las propiedades del estilo.

Insistimos que esta opción es la menos flexible y debe emplearse sólo en casos concretos, cuando el estilo no se repita, y no tenga sentido mantenerlo si borramos esa etiqueta concreta.

Crear una regla de estilo:

Vamos a crear un estilo que afecte a todas las etiquetas de un tipo, sólo a las que estén contenidas en determinados elementos o una clase.

Para ello, En el Inspector de propiedades CSS, pulsamos el botón CSS Designer, que abre el panel Diseñador de CSS.

El Diseñador de CSS se divide en cuatro subpaneles. El primero de ellos nos permite definir la Fuente del nuevo estilo que vamos a crear. Es decir, si el estilo estará en un archivo .css adjunto o bien en la propia página. Para añadir una nueva fuente para nuestro estilo pulsamos el botón con el signo más que está en la esquina superior derecha del panel, lo que nos dará las opciones de la siguiente imagen:

Si seleccionamos Crear en un nuevo archivo CSS, se creará el archivos de estilos con extensión .css asociado a la página. En este caso podremos emplear estos estilos en cualquier página del sitio sólo con vincular la hoja de estilos. Deberemos de indicar dónde guardar el archivo css que contendrá los estilos. Normalmente en la misma carpeta que las páginas.

El Diseñador de CSS también nos permite adjuntar archivos de estilos existentes.

Si elegimos Definir en página, la definición del estilo se guardará en la cabecera de la página, por lo que sólo estará disponible dentro de ésta.

El segundo subpanel @Medios, permite crear líneas de código que obligarán al navegador a informar qué resolución de pantalla tiene el usuario. Es decir, se crea una "Consulta de medios", la cual, en función del tipo de pantalla, utilizará estilos CSS apropiados. No te preocupes si esto parece por ahora algo confuso, le dedicaremos un apartado más adelante. Por lo pronto, podemos pasar del subpanel Fuentes al de Selectores sin usar el subpanel @Medios.

Independientemente de la fuente de estilos a utilizar (archivo .css o regla definida en página), pasamos al subpanel Selectores, en donde podemos definir el tipo de selector. El tipo de selector es fundamental, ya que determina a qué elementos afectará el estilo. En función del lugar donde esté el punto de inserción en nuestra página, o de lo que tengamos seleccionado, el Diseñador de CSS va a sugerir el tipo de selector, pero también podemos escribirlo directamente en la caja de texto que se abre al pulsar el botón  del subpanel.

Podemos elegir entre cuatro tipos de selector:

• Clase. Es el alias que tomará el estilo, y para que afecte a un elemento, debemos de aplicarle esa clase.
  El nombre de la clase va precedido por un punto, y si no lo ponemos lo hará Dreamweaver.
• ID. El id es un atributo html, que podemos dar a cualquier elemento, y que lo identifica de forma única y concreta. Por tanto, el estilo sólo puede afectar a un elemento en cada página, al que tenga ese ID. En el selector, se escribe precedido por #.
• Etiqueta. El estilo afectará a todas las apariciones de la etiqueta HTML indicada.
• Compuesto. Combina los selectores anteriores. Por ejemplo, p.resaltado afecta únicamente a los párrafos con la clase resaltado, pero no a los encabezados con esa clase. También se pueden anidar. Por ejemplo ul#menu li p afecta sólo a los párrafos que estén dentro de un elemento de una lista con el id menu.

Dependiendo de lo que escribamos o seleccionemos en la caja de texto, será el tipo de selector de la regla de estilo, la cual, a su vez, se añadirá a la fuente indicada en el primer subpanel.

5.6. Definir o editar un estilo

Una vez creado, tenemos que definir las propiedades que formarán el estilo.

Para ello, encontramos las opciones básicas en el Inspector de propiedades CSS.

Observa que la regla que estamos editando es la que aparece en Regla de destino. Si queremos editar otra regla, hacemos clic en el desplegable y la seleccionamos, ya que una vez creadas se van añadiendo a la lista.

Si queremos acceder a todas las propiedades, podemos pulsar en el botón Editar regla. Se abrirá la ventana Definición de regla.

Aquí encontramos todas las propiedades CSS agrupadas por Categorías. Las veremos más adelante.

Esta ventana es la opción más cómoda nada más crear el estilo, cuando tenemos que cambiar varias propiedades.

También podemos concluir todo el trabajo en el propio panel Diseñador de CSS que vimos antes. En su último subpanel vienen todas las propiedades CSS que podemos modificar.

En la parte superior del subpanel, encontramos cinco iconos que representan las cinco categorías en las que se dividen las propiedades CSS que podemos aplicar: Diseño, Texto, Borde, Fondo y Otros.

También se puede cambiar el nombre del estilo, es mejor que el estilo tenga un nombre que indique a qué tipo de texto se va a aplicar. Para ello simplemente hacemos doble clic sobre el estilo deseado en el subpanel Selectores del Diseñador de CSS e indicamos el nuevo nombre.

En ese mismo subpanel podemos dar clic derecho sobre los estilos y obtendremos un menú contextual que nos permitirá otras tareas relacionadas con los estilos, como duplicarlos, copiarlos, copiar, sólo alguna propiedad, ver su código, etcétera.

Nota: En los primeros ejercicios del curso iremos aplicando propiedades sin haber explicado previamente cada una. Más adelante detallaremos qué hacen las propiedades existentes. No obstante, sabiendo un poco de inglés resultan muy intuitivas.

 Para practicar lo que hemos visto, puedes realizar el ejercicio paso a paso Redefinir el estilo de una etiqueta.

5.7. Aplicar un estilo

En el caso de haber creado una regla para una etiqueta, no será necesario aplicarla, ya que directamente afecta a todas las etiquetas de ese tipo.

Por tanto lo que tendremos que aplicar serán los estilos que definamos como clases. Veamos cómo hacerlo:

En el documento, selecciona el texto al que deseas aplicar el estilo CSS. Si situamos el punto de inserción, pero sin seleccionar, el estilo se aplicará a la primera etiqueta que contenga el texto (por ejemplo el párrafo).

En el inspector de Propiedades seleccionamos la opción CSS y seleccionamos el estilo creado por nosotros de la lista que aparece al desplegar el cuadro Regla de Destino. Desde las propiedades HTML también podemos hacerlo, utilizando el desplegable Clase.

Si queremos aplicar la clase a una etiqueta, podemos hacer clic derecho sobre ella en la barra de estado, y seleccionar la clase deseada del menú Establecer clase.

Todas las reglas disponibles estan accesibles desde el menú Formato → Estilos CSS.

Observa que existe una clase llamada ninguna. Lo que hace esta opción es quitar la clase al elemento.

La barra de estado nos ayudará a saber qué clase tiene aplicada un elemento. La clase aparecerá junto al nombre de la etiqueta, separada por un punto.

 Para practicar puedes realizar el ejercicio paso a paso Crear y aplicar una clase y el ejercicio paso a paso Modificar el estilo de una lista.

5.8. Hojas de estilos

 Exportar estilos

Es frecuente que comencemos creando los estilos en la propia página, y después al ver que los necesitaremos en otras páginas del sitio, los pasemos a una hoja de estilo. Dreamweaver nos permite exportar estos estilos fácilmente.

Utilizamos el panel Diseñador de CSS (Mayús + F11). Creamos un archivo de estilos CSS a través del botón Agregar origen de CSS del subpanel Fuentes. Ese archivo se agregará a la lista de fuentes.

Después elegimos la fuente <style> que contiene todos los estilos de la página y que se mostrarán en el subpanel Selectores.

Seleccionamos las reglas que queramos exportar y sencillamente los arrastramos a nuestra hoja de estilo del subpanel fuentes.

Los estilos seleccionados se quitarán de la página actual, y se vinculará con la hoja de estilos.

 Vincular una hoja de estilos.

Si queremos utilizar una hoja de estilos ya existente en nuestra página, debemos vincularla.

Podemos hacerlo desde el menú Formato → Estilos CSS → Adjuntar hoja de estilos... o desde el panel Diseñador de estilos CSS. Lo único que tendremos que hacer es seleccionar el archivo a vincular a través de la opción Adjuntar archivo CSS existente del botón Agregar origen  del subpanel Fuentes. Las hojas de estilo tienen la extensión .css.

Recuerda, que aunque en principio Dreamweaver nos permite elegir cualquier archivo del equipo, todos los archivos que utilicemos deben de estar dentro del sitio.

Unidad 6. Hiperenlaces (I)

Vamos a ver qué son los hiperenlaces, para qué sirven y cómo crearlos, ya que son un elemento esencial para cualquier página web.

6.1. Introducción

Un hiperenlace, hipervínculo, o vínculo, no es más que un enlace, que al ser pulsado lleva de una página o archivo a otra página o archivo.

Es posible asignar un vínculo a un texto, a una imagen, o a parte de una imagen.

Cuando creemos un enlace, lo que realmente haremos será crear una etiqueta <a></a> que es la que en HTML se encarga de definir los enlaces. Esto podrás observarlo en la barra de estado:

6.2. Tipos de referencia

Existen diferentes clases de rutas de acceso a la hora de definir los vínculos. Estas referencias no se limitan a los enlaces, se comportarán igual cuando indiquemos la ubicación de una imagen, de un archivo Flash, de la hoja de estilo, etc.

 Referencia absoluta:

Conduce al sitio en el que se encuentra el documento utilizando la ruta completa del archivo, incluyendo el protocolo http://.

Por ejemplo, http://www.aulaclic.com, o http://www.misitio.com/seccion2/pagina1.html.

La referencia absoluta es independiente de la ubicación de la página que contiene el enlace, y será válida siempre que no cambie la ubicación del archivo enlazado. Es la opción obligatoria si pretendemos enlazar a archivos fuera de nuestro sitio (enlaces externos).

 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.

Si está en una subcarpeta de la página actual, no tenemos más que indicar el nombre de la carpeta antes del archivo, y separarlos por una barra (/). Por ejemplo imagenes/miimagen.gif.

Si queremos referirnos a carpetas que están por encima del nivel donde nos encontramos deberemos utilizar ../

Por ejemplo, imagina que estamos en la siguiente dirección http://www.misitio.com/pagina/informacion/index.html. En esta página queremos mostrar una imagen que se encuentra en la carpeta http://www.misitio.com/pagina/secciones/seccion1.html, ¿cómo podemos hacerlo? Fácil. Deberemos llamarla haciendo referencia al nivel superior (http://www.misito.com/pagina/) para poder ir luego a la carpeta secciones.

El resultado de la ruta sería el siguiente: ../secciones/seccion1.html.

De esta forma, mientras nos encontramos en la carpeta informacion, subimos un nivel y luego nos movemos dentro de la carpeta secciones para mostrar el archivo seccion1.html.

Esta opción depende de la ubicación del archivo, y puede no funcionar correctamente si alteramos la estructura de carpetas.

Esta es la opción por defecto de Dreamweaver, y es la forma más habitual para enlazar archivos dentro del sitio.

Unidad 6. Hiperenlaces (II)

 Referencia relativa al sitio:

Conduce a un documento situado dentro del mismo sitio que el documento actual. Tomando como origen la carpeta raíz del sitio.

Para indicar la ruta relativa al sitio, precedemos la ruta de enlace por la barra /.

En el ejemplo anterior si tuviésemos definido como sitio la carpeta http://www.misitio.com/, un enlace en cualquier página del sitio a http://www.misitio.com/pagina/secciones/seccion1.html se crearía como /pagina/secciones/seccion1.html.

Por tanto, podríamos poner ese vínculo en cualquier página del sitio y funcionaría independientemente de su ubicación.

Estos enlaces no funcionarán en el sitio local, a no ser que configuremos un servidor de pruebas como veremos más adelante, ya que Windows interpretará como raíz la raíz del disco duro.

 Marcadores o Puntos de fijación:

Conduce a un punto dentro de un documento, ya sea dentro del actual o de otro diferente. Para ello, indicamos el nombre del punto de fijación a continuación de la ruta del archivo (relativa o absoluta) separados por una almohadilla (#).

El formato sería nombre_de_documento.extension#nombre_de_punto.

Si el punto de fijación está en la propia página, basta con indicar únicamente el punto en el enlace, por ejemplo #apartado2

Podemos definir el punto dentro de un documento estableciendo el atributo ID de cualquier elemento (se puede establecer desde el Inspector de Propiedades HTML) y después crear el vínculo con el formato ya indicado. De cualquier modo, los nombres utilizados en el atributo ID son únicos y no deben repetirse en la página.

Deberás tener siempre en cuenta que los nombres de las rutas se correspondan perfectamente a los nombres de los archivos y carpetas en el servidor (local o remoto).

Por ello, es muy recomendable que utilices siempre minúsculas para evitar fallos en los enlaces.

También deberás evitar utilizar caracteres especiales como acentos o espacios, así no tendrás problemas a la hora de referenciar tus objetos.