HIPERENLACE
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:
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 pueden 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.
IMÁGENES
Las imágenes son un aspecto muy importante de la web. Ya
sea como complementos a la información o parte del diseño, la hacen mucho más
atractiva a ojos del visitante. No obstante, no conviene abusar, ya que
aumentarán mucho el tamaño final de la web.
Para insertar una imagen hay que dirigirse al menú Insertar, a la opción
Imagen. Después
de esto, ya es posible seleccionar una imagen a través de la nueva ventana.
Cuando te acostumbres, te será más cómodo acceder con la combinación de teclas Ctrl + Alt + I.
En Relativa a es posible especificar si la imagen será
relativa al documento o a la carpeta raíz del sitio. Es preferible que sea
relativa al Documento,
ya que si cambiamos la página de carpeta, lo habitual es cambiar también sus
imágenes.
Lo mismo ocurre cuando se selecciona un documento para crear un
vínculo.
La ruta en la que se encuentra la imagen aparecerá representada
de una u otra forma en el campo URL
de la ventana y en el campo Origen
del inspector de propiedades,
dependiendo de si ha sido insertada como relativa a la carpeta raíz del sitio o
relativa al documento.
Por ejemplo, imagina que dentro de la carpeta raíz del sitio (la
carpeta del sitio) se encuentran la carpeta imagenes
y el documento en el que deseamos insertar la imagen. Dicha imagen, llamada aulaclic.jpg, se encuentra dentro de la carpeta imagenes.
En el caso de insertar la imagen como relativa al Documento la ruta
sería:
imagenes/aulaclic.jpg
Mientras que en el caso de ser insertada como relativa a la Raíz del sitio la
ruta sería:
/imagenes/aulaclic.jpg
Ocurre lo mismo que cuando se crea un hipervínculo a un
documento relativo al documento o a la carpeta raíz del sitio.
Otra forma de insertar una imagen, es arrastrarla directamente
desde el panel Archivos
sobre el documento.
Si insertamos una imagen y luego la borramos, la movemos, o
escribimos mal su nombre, en Dreamweaver aparecerá así 
indicando que el enlace al archivo está roto.
En ese caso, la imagen que aparecerá en el
navegador será similar a ésta:
MARCOS
Los marcos o frames sirven para distribuir mejor los datos de las
páginas, ya que permiten mantener fijas algunas partes, como pueden ser el
logotipo y la barra de navegación, mientras que otras sí pueden cambiar. Además
de mejorar la funcionalidad, pueden mejorar también la apariencia.
Cada uno de los marcos de una página, contiene un documento HTML
individual. Por ejemplo, en la siguiente imagen puedes ver una página con dos
marcos. El marco izquierdo contiene el documento menu.htm
y el derecho el documento quienes.htm. Para poder
visualizar la página de este modo, hemos tenido que abrir el documento index.htm, que es la página que contiene los marcos
agrupados.
Es posible editar los documentos contenidos en los marcos desde
la página que contiene el grupo de marcos. Esto facilita el trabajo, ya que es
más fácil hacerse una idea de cómo quedará la página al final, cosa que no es
posible si se editan individualmente cada uno de los documentos que contiene el
marco.
El trabajar con marcos puede resultar una tarea algo complicada,
sobre todo al principio, por lo que no vamos a profundizar mucho en el tema, y
veremos solamente algunos conceptos básicos y ejemplos sencillos.
Actualmente los marcos están cayendo en desuso. Aunque son
realmente prácticos, crean problemas a la hora de ser indexados por los
buscadores. Y estar correctamente indexado y posicionado es crucial para una
web.
Por ejemplo, si vemos el código fuente de una página con marcos,
vemos que realmente no hay más que las llamadas a las páginas correspondientes,
por lo que no hay nada que indexar. Por otro lado, si se indexa una página,
puede que el visitante llegue a ella directamente, no a través del marco. Esto
hace, por ejemplo, que el usuario no pueda acceder a los elementos de
navegación del sitio.
La pega más común al no usar marcos es tener que repetir los
elementos comunes, como el menú y logo en cada página, con la complicación
correspondiente a la hora de hacer un cambio. No obstante, esto es fácilmente
solucionable si empleamos PHP o JavaScript en nuestra página.
ELEMENTOS MULTIMEDIA
PELICULAS FLASH
Las películas Flash son
animaciones, cuyo archivo tiene la extensión SWF. Es frecuente
verlas en las páginas iniciales de los sitios web, a modo de presentación hacia
los usuarios, como banners publicitarios, como botones... Flash es el elemento
multimedia más empleado en las páginas web.
Estas películas pueden crearse mediante
el programa Flash también de Adobe. Para poder ser visualizado en
el navegador, y necesitan que el usuario tenga instalado el plug-in de Flash
Player. Su instalación es muy sencilla y normalmente ya viene con el navegador.
Las películas Flash pueden
insertarse en una página a través del menú Insertar → Media,
opción SWF, o pulsando Ctrl
+ Alt + F.
También pueden insertarse empleando el
panel Insertar en la categoría Común, pulsando sobre la opción 
SWF que aparece al desplegar
el menú Media.
Veamos las opciones más importantes que
nos ofrece el inspector de propiedades cuando tenemos seleccionado el
archivo Flash:
Como en otros elementos, como las
imágenes, podemos asignarle el ancho (An.) y alto (Alt.). En
Archivo, indicamos la ruta hasta el archivo SWF.
Si disponemos de Flash instalado en el
equipo, y vamos a ir haciendo cambios sobre el archivo original (.fla), nos
resultará muy útil indicar su ubicación en Origen. Así, para editarlo,
bastará con pulsar Editar.
La opción Bucle indica que al
finalizar la película, ésta volverá a comenzar desde el principio.
La otra es la opción Rep. autom.
(reproducción automática), que al estar marcada indica que nada más cargarse la
página comenzará a reproducirse la película Flash. Si esta opción no estuviera
marcada, se mostraría únicamente el primer fotograma de la película hasta que
el usuario la activase. Por tanto interesa desmarcar esta opción cuando se
desea que la reproducción sea activada por algún comportamiento.
La Calidad, cuanto más baja,
antes se cargará el archivo pero peor se verá. Conviene dejarla en Alta
para verlo tal cuál se creó.
La Escala permite elegir cuanto
se verá del archivo. Las películas Flash no siempre son del tamaño exacto del
contenido, pueden tener un escenario de fondo alrededor del objeto, aunque no
se muestre. Si dejamos Predeterminada, se verá todo la película. En
cambio, si elegimos Ajuste exacto, se verán sólo los objetos, omitiendo
el escenario de fondo.
Alinear funciona como con las imágenes, y nos
permite alinear la película en relación con el texto. Si queremos centrarla
horizontalmente, podemos optar por centrar el contenido del elemento que
contiene el Flash (normalmente un párrafo) empleando CSS.
Wmode es el modo de ventana. Si es opaco, otros elementos pueden aparecer
sobre el Flash. En cambio, si es Transparente, el fondo se verá
transparente (a no ser que se haya especificado un color de fondo en el Flash).
El botón Reproducir nos permite
ver la película.
Al insertarse la película, veremos la
ubicación en la vista de diseño con el siguiente aspecto:
Al insertarse animaciones Flash, es
frecuente que Dreamweaver añada algunos archivos que nos permitirán reproducir
los elementos, normalmente creando la carpeta Scripts. Es importante
incluir esta carpeta cuando publiquemos nuestro sitio, si no los archivos no se
verán. De todas formas, Dreamweaver nos avisará cuando incluya archivos.
SONIDO
No es muy habitual incluir sonido en una
página web, ya que algunos usuarios suelen estar escuchando su propia música
cuando navegan en Internet, por lo que el escuchar también sonido en cada
página que se visita puede resultar algo molesto.
A pesar de ello, el incluir un sonido
agradable, apropiado al contenido de la página, puede hacerla más atractiva.
Las páginas que contienen sonido suelen ofrecer la posibilidad de activarlo o
desactivarlo, para que aquellos usuarios que no deseen escuchar el sonido de la
página puedan desactivarlo. Siempre es mejor que que el usuario abandone la
página.
Los formatos de sonido más habituales en
Internet son, fundamentalmente, el MP3, el WAV y en algunas
ocasiones el MIDI, aunque existen otros formatos diferentes que también
pueden utilizarse. Lo ideal es incluir algún archivo de audio que no ocupe
mucho espacio, y que no por ello sea de mala calidad.
Para insertar un archivo de audio en un
documento tienes que dirigirte al menú Insertar, Medía, opción Plug-in.
A continuación, para el que se muestran
los controles de audio. Si lo deseas, puedes reproducirlo pulsando sobre los
controles (recuerda encender los altavoces, si los tienes).
Pueden ocurrir dos cosas:
Si tu navegador tiene instalado el
plugin necesario para reproducir el archivo, se mostrará un control similar a
este (imagen de IE8):
En cambio, si el plugin necesario no
está instalado, el navegador ofrecerá la posibilidad de hacerlo, como en esta
imagen de Firefox.
Un plugin es un añadido al navegador,
que nos permite realizar funciones extra, como en este caso, reproducir un
archivo de música. Al insertar un elemento como plug-in lo que indicamos es que
el navegador debe de intentar abrir el archivo empleando los pluigns que tenga
para tal fin. Por eso, si no lo tiene, nos invitará a instalarlo.
En Dreamweaver no se mostrarán los
controles de audio. Todos los archivos que son insertados como plugin aparecen
representados dentro de Dreamweaver por una imagen como la de la izquierda.
En el inspector de propiedades pueden
establecerse la altura y la anchura con la que se mostrarán los controles de
audio, mediante Al y An.
En el caso de no especificar ningún
tamaño, se mostrará el tamaño por defecto de los controles, como ocurre en el
ejemplo de arriba. Si lo que se desea es que se escuche el sonido en la página,
pero que no se muestren los controles de audio, los campos Al y An deben
valer cero.
Los sonidos se reproducen
automáticamente al cargarse la página, y se reproducen solamente una vez. Estos
valores no pueden definirse como propiedades a través del inspector de
propiedades, pero si los conocemos podemos empelar el botón Parámetros....
Por ejemplo, para que el archivo se
reproduzca continuamente se hemos añadido loop="true".
Si no queremos que se reproduzca
automáticamente, podemos añadir también autostart="false"
La línea de
código del archivo de audio nos quedaría del siguiente modo:
<embed src="media/audio.mid" autostart="false"
loop="true"></embed>
Si quieres
poner música de fondo en una página web, sin que aparezcan los controles de
audio, puedes escribir este código directamente en la vista Código.
<bgsound src="cancion1.wav" loop="-1">
Insértalo
después de la etiqueta </title> Con el parámetro loop
puedes decidir cuántas veces quieres que se reproduzca, 1, 2, 3 ... (con -1 se
reproduce de modo continuo).
No obstante,
insistimos en que no es recomendable poner música sin controles de
reproducción.
Lo más
habitual en la web es insertar el sonido empleando Flash. Esto hace que
no se necesiten plugins, sólo poder reproducir Flash. Además, nos permite crear
los controles personalizados.
Otras páginas
de Internet, como goear nos permiten insertar en nuestra web un
reproductor con música del sitio, que nuestros visitantes podrán escuchar.
VIDEOS
En ocasiones
puede interesar incluir algún vídeo en una página web, pero hay que tener en
cuenta que los vídeos suelen ocupar mucho espacio en disco, y por lo tanto,
precisan de mucho tiempo para descargarse.
En este
apartado nos referimos a insertar vídeo de un archivo alojado en nuestro sitio.
No a mostrar vídeos de sitios especializados, como youTube.
Los formatos
de vídeo que suelen utilizarse en Internet son el AVI, el MPEG y
el MOV.
Para insertar
un archivo de vídeo en un documento tienes que dirigirte al menú Insertar,
Medía, opción Plug-in.
Puedes ver el
vídeo (si tienes el plugin adecuado) a continuación:
El inspector
de propiedades para los archivos de vídeo insertados de esta forma es el mismo
que el de los archivos de audio, ya que ambos se insertan como Plug-in.
Hay que
prestar especial atención al ancho y alto. Por defecto, si Dreamweaver no puede obtener el tamaño del archivo lo
fijará a 32 x 32, insuficiente para ver un vídeo.
Es mejor borrarlos, y así el vídeo se mostrará con su tamaño original. Si
conocemos el tamaño del vídeo, podemos pensar en insertarlo directamente, pero
hay que tener en cuenta el tamaño de los controles de reproducción, que depende
de cada navegador.
Los vídeos
también se reproducen automáticamente al cargarse la página, y se reproducen
solamente una vez. Estos valores pueden cambiarse a través botón Parámetros,
del mismo modo que en el caso de los archivos de audio, añadiendo autostart="false"
y loop="true".
Como ya hemos
dicho, todos los objetos insertados a través de la opción Plug-in
precisan que el usuario tenga instalado un reproductor o un plug-in apropiado
para reproducirlos. En el campo Origen del inspector de propiedades se
establece el archivo vinculado (el archivo de audio o de vídeo) que ha de
reproducirse.
En el caso de
que el usuario no tenga instalado ningún plug-in adecuado, puede establecerse
en el campo URL plg una página en la que pueda encontrarlo. No será
necesario en los archivos más comunes de audio y vídeo, pero sí si intentamos
cargar un archivo más raro.
CREAR PLANTILLAS
Las
plantillas pueden crearse desde cero, o a partir de una página ya existente.
Una forma de
crear una plantilla desde cero es a través del panel Archivos, que se
puede abrir a través del menú Ventana, opción Activos.
Una vez
abierto el panel hay que seleccionar el botón
, para poder trabajar con las
plantillas. Los botones
inferiores del panel Activos 
son similares a los del panel Estilos CSS.
El único
botón diferente es el primero, que en este caso sirve para actualizar la
lista, el resto permiten crear una nueva plantilla, editar una
plantilla seleccionada en la lista, o eliminarla.
Para crear
una nueva plantilla hay que pulsar sobre el botón 
. Si el botón está desactivado,
pulsa con el botón derecho del ratón sobre el área de plantilla y elige Nueva
Plantilla). Cuando se
pulsa ese botón aparece un nuevo documento en la lista de plantillas, al que es
posible cambiarle el Nombre pulsando previamente sobre él.
Para
modificar una plantilla la seleccionamos de la lista y pulsamos el botón 
.
Para eliminar
una plantilla la seleccionamos de la lista y pulsamos el botón
.
Las
plantillas se guardan en el sitio web actual, dentro de la carpeta Templates,
que se crea automáticamente.
Para crear
una plantilla a partir de un archivo existente es necesario abrir dicho
archivo, y después guardarlo como plantilla a través del menú Archivo,
opción Guardar como plantilla.
Cuando se
pulsa dicha opción, aparece una ventana como la de la imagen.
En ella es
necesario especificar el nombre con el que va a ser guardada la plantilla, a
través del campo Guardar como, y elegir, de entre la lista de sitios, el
Sitio: en el que se va a guardar.
Al guardar la
plantilla la página cambia de carpeta, a Templates, como ya hemos
dicho. Si contenía enlaces o imágenes se nos ofrecerá la opción de Actualizar
vínculos. Si lo hacemos, la plantilla se verá con normalidad y podremos
emplearla para crear páginas en cualquier carpeta. Si no lo hacemos, la
plantilla se mostrar sin las imágenes u hojas de estilo, ya que la ruta no será
la correcta, y sólo nos servirá para crear páginas en la misma carpeta que el
archivo desde el que creamos la plantilla.
Establecer
regiones editables en una plantilla
Todos los
elementos de una plantilla están bloqueados por defecto, no se pueden
modificar.
Es necesario
establecer las zonas para que puedan ser editadas en las páginas que se basen
en dicha plantilla.
Para editar
una plantilla hay que abrirla en Dreamweaver. Una forma de abrirla es a través
del panel Activos, pulsando dos veces sobre ella, o estando seleccionada
pulsando sobre el botón
como ya hemos visto.
Una vez
abierta la plantilla es posible establecer sus propiedades a través de la
ventana Propiedades de la página.
Como
recordarás, para abrir esta ventana puedes:
Pulsar la combinación de teclas Ctrl + J.
Hacer clic sobre el menú Modificar y elegir la opción Propiedades
de la página.
Pulsar con el botón derecho sobre el documento abierto en Dreamweaver, y en
el menú contextual que aparece seleccionar la opción Propiedades de la
página.
Para insertar
una región editable hay que situar el puntero en el lugar en el que se desea
insertar, y después dirigirse al menú Insertar, Objetos de plantilla,
opción Región editable, o pulsar la combinación de teclas Ctrl + Alt + V.
En la nueva
ventana hay que establecer un Nombre para la región editable.
Dentro de la
plantilla no pueden existir dos regiones editables con el mismo nombre.
Posteriormente
puede modificarse el nombre a través del inspector de propiedades de la región
editable.
Las zonas
editables aparecen representadas en Dreamweaver como un recuadro con una
etiqueta de color turquesa. En la etiqueta aparece el nombre de la zona
editable.
Dentro del
recuadro es posible insertar objetos, que aparecerán por defecto en aquellos
documentos que se basen en la plantilla. Estos objetos, al estar dentro de la
zona editable, podrán ser modificados en las páginas.
La región
editable se ajustará al tamaño del contenido. Por lo que aunque parezca pequeña
cuando aún no tiene nada no limitará lo que queramos introducir.
Todos los
objetos que se encuentren fuera de estas zonas editables aparecerán también en las
páginas, pero no podrán ser modificados.
En este caso,
la imagen con el logotipo de aulaClic aparecería en todas las páginas que se
basaran en esta plantilla, mientras que todo lo que insertáramos dentro de la
zona editable FormularioCorreoElectronico podría ser modificado.
Basar páginas en una plantilla
La opción más simple, consiste en elegir una Página de plantilla
al crear un Nuevo documento.
Como vemos en la imagen anterior, al seleccionar la
categoría Página de plantilla,
aparece un listado con los sitios. Seleccionando el que queramos, aparecerá
otro listado con las plantillas del sitio, y una vista previa de la
seleccionada a la derecha.
Bastaría con seleccionar la que queramos utilizar y pulsar
en Crear. El
nuevo documento estará basado en la plantilla, y solo tendremos que modificar
las regiones editables.
El uso de las plantillas puede resultar un poco más
complicado si queremos aplicar la plantilla sobre un documento existente. Vamos
a ver cómo basar una página vacía en una plantilla, ya que por el hecho de
estar vacía resulta más sencillo.
Una vez abierto el documento, hay que dirigirse al menú Modificar, Plantillas, opción Aplicar plantilla a página.
Es preferible que antes de hacer esto nos aseguremos de
que el sitio que se encuentra abierto en Dreamweaver es el mismo en el que
vamos a guardar el documento, y el mismo en el que se encuentra la plantilla en
la que queremos basarlo.
Después de pulsar sobre la opción Aplicar plantilla a página aparece una
ventana como la siguiente, en la que hay que seleccionar una de las plantillas
de la lista Plantillas: del
sitio.
Es recomendable activar la casilla Actualizar página cuando cambie la plantilla,
para que la página se actualice automáticamente en el caso de modificar la
plantilla en la que se basa.
