Manual de utilización del Dreamweaver MX 2004 CLASE 03.

Transcripción

1 Manual de utilización del Dreamweaver MX 2004 CLASE 03. IMÁGENES y VÍNCULOS en DREAMWEAVER. Para insertar una imagen es conveniente tenerla previamente guardada en la carpeta del sitio. De lo contrario Dreamweaver nos advertirá para que lo hagamos. Primero busca imágenes que quieras poner en tu página y cópialas en tu carpeta (desde MiPC) Para crear una carpeta dentro de la carpeta raíz del sitio: pinchamos sobre la carpeta raíz en el panel lateral derecho con el botón derecho del ratón y, en el menú conextual, elegimos Nueva carpeta. Aparecerá una nueva carpeta. DW le habrá puesto como nombre untitled Nosotros le cambiamos el nombre: Podemos llevar las imágenes a la carpeta por cualquiera de los procedimientos habituales en Windows. Si por ejemplo, tal como indicábamos al principio, la imagen no está previamente guardada en la carpeta, Dreamweaver nos va a sugerir que lo hagamos. Vamos a insertar una imagen usando DW. Pulsa en Insertar > Imagen. Luego busca la imagen donde quieras.

2 DW te avisa del peligro de que la imagen no esté copiada en tu sitio, y te da la opción de copiarla ahora. Pulsa SI. Fíjate que la imagen puede que no aparezca en tu sitio, pero si pulsas el botón de releer.. Una imagen puede colocarse también como fondo de una página, o de una tabla, o de una celda. Por ejemplo, en la tabla que hemos creado en el apartado anterior vamos a poner un fondo en la primera celda de la primera fila (vamos a hacerlo desde este propio documento). Situamos el cursor en la primera celda. Una forma de hacerlo es pinchar en la imagen y arrastrarla hasta la celda.

3 El problema puede ser el tamaño de la imagen. Para cambiarlo, pincha la imagen y mueve uno de los marcadores de las esquinas. El resultado se ve cuando pinchas fuera de la tabla.

4 Vamos a trabajar ahora con vínculos. Los vínculos, hipervínculos, enlaces, hiperenlaces, links (todas estas palabras designan el mismo concepto) es uno de los elementos más importantes del lenguaje HTML con el que se construyen las páginas web. Vínculos a otro documento del mismo sitio: Es, quizá, el vínculo más usado. Para ello se selecciona el elemento que va a servir para enlazar (puede ser una palabra, una frase, una imagen, un fragmento de imagen,...). Una vez seleccionado, pinchamos en el icono de la sección Vínculo dentro del panel del Inspector de Propiedades y elegimos el archivo vinculado. Por ejemplo. Vamos a hacer que la palabra LUNES sea un vínculo con otra página. Primero vamos a crear una nueva página: ve al gestor del sitio y pulsa en tu sitio, luego botón derecho y crea el archivo llamado LUNES.htm Luego seleccionamos la palabra LUNES en la tabla y vamos al Inspector de Propiedades. En el botón a la derecha del vínculo, pincha y sin soltar apunta a tu nueva página. Cuando sueltes verás que se establece el vínculo.

5 Para comprobarlo pulsa F12: Si pulsas en LUNES, se abre otra página que, por el momento, está en blanco.

6 Vínculos a documentos externos Son los vínculos que nos llevan a otros documentos que no son de nuestro sitio. Se comienza igual. Seleccionando la palabra, frase, imagen,... que será la activadora del vínculo. En este caso vamos a partir de la imagen que has colocado en la tabla. En el cuadro de Propiedades, escribe la dirección destino en la ventana de Vínculo: En los vínculos externos es norma de estilo casi obligada que los vínculos se carguen en ventana nueva del navegador. Para hacerlo, elegimos en Destino la opción _blank. Un nuevo parámetro de bastante importancia es colocar un texto alternativo para la imagen, útil tanto en imágenes activadoras de vínculos como en imágenes normales. Si el visitante opta por no cargarse las imágenes (por rapidez en la carga, por ejemplo) se encontrará con un texto alternativo. Esto se hace así:

7 Vínculos a otros puntos del mismo documento Para hacer esto posible, primero hay que definir las anclas o puntos de destino de los vínculos. Dreamweaver lo llama Anclaje con nombre. Situamos el cursor en el punto en el que queramos situar el ancla y le damos a Insertar > Anclaje con nombre. Tenemos que ponerle un nombre siguiendo las mismas reglas que en los nombres de archivos y carpetas: no acentos, no espacios, no caracteres especiales, mejor minúsculas, mejor nombres cortos y comenzando por letra. En el sitio donde hemos colocado el ancla aparece un icono de color amarillo. Si pincho sobre el icono del ancla, en el Inspector de Propiedades observo todos los parámetros del mismo:

8 Luego escribe un texto adecuado (Ir al inicio), márcalo y en la ventana de Vínculo, escribe el nombre del ancka precedido de almohadilla (#). También puedes usar marcador de la diana para apuntar el ancla (funciona). Puedes probarlo pulsando F12 y poniendo la ventana del navegador muy estrecha: