Listas

Es posible insertar texto a modo de lista ya sea con viñetas o numerada. La lista desordenada (con viñetas) y la Lista ordenada (con números) se selecciona a través de los iconos que aparecen en el Inspector de Propiedades y que se muestran en la siguiente figura. Aquí se muestran los botones para Listas desordenadas, Listas ordenadas y para aumentar o disminuir la sangría a la izquierda del texto. Recordar que una sangría es una especie de márgen que se establece en un texto.

Seleccionamos el botón correspondiente e iniciamos a escribir la lista. Al dar enter se inserta el número consecutivo o viñeta en forma automática. Para anidar listas como se ve en el ejemplo sólo tenemos que agregar la Sangría al elemento que deseamos se anide, después de terminar toda la lista.

Para obtener información adicional de Listas visita la página relacionada con HTML.

Vínculos

Un vínculo o hipervínculo es un enlace que al dar clic sobre él nos lleva de una página a otra o hacia un archivo, ya sea local o externo. Para definir un vínculo debemos considerar la ruta de acceso que se tomará en cuenta para que nos conduzca hacia la página deseada.

Debemos considerar dos tipos de referencias: La Relativa y la Absoluta.

La referencia Absoluta conduce al sitio donde se encuentra la página o archivo utilizando la ruta completa. Por ejemplo, tenemos una ubicación en Internet y para llegar a ella escribimos: www.ithinkweb.com.mx o si deseamos tener acceso a alguna página en particular la ruta sería: www.ithinkweb.com.mx/carpeta/informe.html

La referencia Relativa conduce a un documento que se encuentra dentro del mismo sitio y la ruta se establece a partir de la raíz del sitio. Cuando nos referimos a carpetas que están por encima del nivel en el que estamos se usa ../

Por ejemplo para vincular un documento que se encuentra dentro de una carpeta que a su vez está dentro de la carpeta raíz escribimos: <a href="../dewi.php">página</a>

La forma más sencilla de crear un vínculo es a través del inspector de propiedades. Seleccionamos primero el texto, la imagen o algún otro objeto y luego utilizamos el Vínculo en el inspector y ponemos la ruta, cuando es absoluta; por ejemplo si queremos establecer un vínculo a Google, escribimos www.google.com después de seleccionar la palabra Google.

Para el caso de un vínculo relativo basta con seleccionar el texto, imagen u otro objeto y luego en el Inspector de propiedades arrastrar el botón Señalar archivo hacia el panel Archivos y soltar sobre el archivo que será visto con el vínculo. En forma automática Dreamweaver coloca la ruta relativa al archivo. Otra forma de crear el vínculo es por medio del menú Insertar y luego la opción Hipervínculo con lo que aparece la siguiente ventana:

 

Sólo se requiere rellenar los campos y el enlace con texto se crea en forma muy sencilla. En el campo Vínculo hacemos uso del icono de la carpeta para localizar el archivo que será vinculado. En caso de una página externa debemos escribir la dirección iniciando con http://

En Destino, se establece el destino del enlace. En el Inspector de propiedades aparece como Dest. Se cuenta con cuatro opciones para determinar en que ventana será abierta la página vinculada:

_blank abre el documento en una ventana nueva.

_parent abre el documento en la ventana del marco que contiene el vínculo.

_self abre la ventana en el mismo marco o ventana que contiene el vínculo. Esta es la opción predeterminada.

_top abre el documento vinculado en la ventana completa del navegador.

En forma predeterminada un vínculo asociado con un texto parece subrayado. Cada vínculo puede adquirir tres colores diferentes los cuales se pueden configurar con Propiedades de la página que aparece en el inspector de propiedades o en el menú Mosificar y luego Propiedades de la página, enseguida elegir la Categoría Vínculos. En la ventana que se muestra podemos establecer el color de los vínculos, vínculos visitados y vínculos activos. En Estilo subrayado podemos elegir entre la disferentes opciones que se ofrecen: Siempre subrayar, Nunca subrayar, Mostrar subrayado solamente al situar cursor encima, Ocultar subrayado al situar cursor encima.

Para crear un enlace a correo electrónico debemos utilizar la sintaxis: mailto:correoelectrónico y se puede establecer ya sea con el Inspector de propiedades o con el menú Insertar. Con el Inspector de propiedades utilizamos Vínculo para escribir la dirección de correo respetando la sintaxis, pero antes de hacerlo selecionamos ya sea el texto o alguna imagen y escribimos: mailto:micorreo@servidor.com.

Si utilizamos el menú Insertar con la opción Vínculo de correo electrónico sólo se tendrá la oportunidad de utilizar texto para el vínculo de correo.

Imágenes

Para insertar una imagen en un documento utilizamos el menú Insertar con la opción Imagen y nos aparece la ventana Seleccionar origen de imagen por medio de la cual podemos buscar el archivo. De antemano por cuestión de organización debemos contar con una carpeta que contenga las imagenes, por lo que en el campo Origen que aparece en el Inspector de propiedades cuando seleccionamos la imagen, se muestra la ubicación del archivo.

En caso de que Dreamweaver no encuentre la imagen que ya ha sido insertada mostrará algo similar a esta imagen:

Esto puede ocurrir al modificar el nombre de la imagen después de ser insertada y no se modifica el Origen o también si dicha imagen fue cambiada de directorio. Lo que muestra es el contenido del campo Alt del Inspector de propiedades. El campo Alt nos sirve para agregar alguna información de la imagen la cual aparecerá al colocar el ratón sobre ella y como se aprecia en nuestra imagen que no es posible mostrarse, pero vemos la descripción realizada con Alt.

Mapas de imágenes.

Los mapas de imágenes son partes en que podemos secionar una imagen y se le puede algún tipo de comportamiento a cada una de esas partes en forma independiente. Lo más común es Vincular a otras páginas o archivos.

Para crear un mapa utilizamos el Inspector de propiedades a través de los siguientes botones:

Primero seleccionamos la imagen y luego elegimos uno de los tres botones disponibles: rectangular, circular o forma irregular libre. Al dar clic sobre uno de los botones el puntero cambia su pariencia al colocarlo sobre la imagen. Procedemos a dibujar sobre la imagen la figura y el rango que debe abarcar dentro de la imagen. Al hacerlo la imagen cambia su apariencia dentro de la zona marcada por el mapa.

Figura antes de mapear	Figura con mapa rectangular

Una vez que tenemos nuestra imagen con el mapa la seleccionamos y el Inspector de propiedades muestra los campos necesarios para configuraración. En la figura de la izquierda vemos los campos disponibles. Los rellenamos y al ver nuestra página con el navegador y colocar el cursor sobre el área del mapa toma la forma de una manita indicando que existe un vínculo. Una imagen puede ser dividida en varios mapas y cada uno de ellos puede tener un diferente vínculo.

Imagen de sustitución.

La imagen de sustitución se le conoce como Rollover. Un rollover es una imagen que cmbia por otra cuando pasamos el cursor sobre ella. Este tipo de efecto puede ser utilizado para crear menús o en botones para desplazarse a diferentes páginas.

Para insertar un rollover usamos el menú Insertar luego Objetos de imagen y la opción Imagen de sustitución y nos aparece una ventana como la figur de la izquierda.

A continuación puedes probar con el ejemplo que se muestra.