Capitulo
7. Elementos de biblioteca
La característica
Biblioteca (Library) en Dreamweaver fue diseñada para automatizar
el proceso de introducción y modificación de elementos que
se muestran en múltiples páginas de un sitio de Web.
En una biblioteca se puede guardar cualquier tipo de elementos como pueden
ser un logotipo, una hilera de imágenes, texto, etc. Para crear
un elemento de biblioteca debemos seleccionar la parte del documento que
queremos convertir en elemento de biblioteca. Luego debemos seleccionar
Ventana/Biblioteca (Window/Library) y arrastrar
lo seleccionado dentro de la ventana de biblioteca. El programa nos va
a pedir que le pongamos un nombre al elemento y luego de oprimir Enter
el objeto se habrá creado.
Para incorporar un elemento de biblioteca simplemente lo arrastramos desde
la ventana de librerías hacia el documento.
Una de las ventajas de los elementos de biblioteca es que nos permite
hacer cambios a los elementos almacenados en la misma y éstos se
aplican en forma automática a las múltiples páginas
que lo contienen. Para ello, primero editamos el elemento de biblioteca
original (haciendo doble clic sobre él en la paleta Biblioteca)
y, al guardarlo, el programa nos preguntará si queremos actualizar
todas las páginas en donde hayamos insertado dicho elemento.
Otra cosa importante es que podemos borrar un elemento de biblioteca y
no perderemos los elementos que hayamos insertado en las páginas.
Es más, podemos borrar un elemento de biblioteca y luego arrepentirnos
y simplemente seleccionando el elemento insertado en alguna de las páginas
y pulsando Recrear (Recreate) lo restauraremos.
Insertando
archivos multimedia a una página Web
Dreamweaver
nos permite insertar archivos de Shockwave (un tipo de archivo que permite
ver en la Web contenidos hechos con Macromedia Director); películas
hechas en Flash (programa de Macromedia para crear animaciones y sitios
web basados en
vectores); archivos para luego ser subidos a un servidor con Generator
(un servidor para contenido dinámico); controles ActiveX .(pequeñas
aplicaciones que actuan como plug-ins de los navegadores. Funcionan en
IE pero no funcionan en Netscape ni en Macintosh); Applets de java (aplicaciones
hechas en este lenguaje).
También, si hemos creado imágenes con HTML con el programa
Fireworks, podemos importarlo en Dreamweaver .
En la paleta de Objetos (Objects) existe un icono para importar cada uno
de estos tipos de archivo.
Rollovers
Los rollovers
son imágenes que al pasar el puntero del mouse por encima, cambian
por otra del mismo tamaño. Esto se utiliza mucho hoy en día,
sobre todo para los botones de navegación.
Para
crear un rollover, nos posicionamos en el lugar donde queremos insertarlo
y hacemos click sobre el botón Insertar imagen rollover (Insert
Rollover Image) de la paleta Objects. Se abrirá un cuadro de diálogo
que nos pedirá un nombre para nuestro rollover y también
que le indiquemos la ubicación de la primera imagen (cuando el
mouse no está encima) y de la segunda imagen (cuando el mouse está
encima). Tildamos también la opción de pre-carga de las
dos imágenes para que el usuario pueda ver el rollover cuando hayan
bajado las dos imágenes. También establecemos una dirección
adonde nos llevará el rollover al hacer clic. Pulsamos aceptar.
Marcos
Los marcos
están compuestos por dos elementos: el frameset o conjunto de marcos
y los marcos individuales. El conjunto de marcos contiene información
sobre la cantidad de marcos que habrá en la página, el tamaño,
etc. Este conjunto no se muestra en los
navegadores sino que solo contiene la información para mostrar
los marcos. Los marcos son zonas definidas o áreas de una página
HTML. Cada marco aloja una página Web. Lo que se suele hacer es
un marco para la parte de navegación de la página y otro
marco para el contenido. La ventaja de los marcos es que podemos establecer
zonas que siempre serán visibles por más que el usuario
descienda
con la barra de desplazamiento de su navegador.
Por ejemplo, podemos hacer que el encabezado de la página con el
logo de la
empresa siempre esté visible.
Entonces,
una página Web compuesta por dos marcos, en realidad está
integrada por tres archivos individuales: el archivo del conjunto de marcos
y dos archivos cuyo contenido es el que se muestra dentro de los marcos.
Para crear un conjunto de marcos con dos marcos debemos seguir los siguientes
pasos:
1) Crear un nuevo archivo.
2) Seleccionar Modificar/Conjunto de marcos/Dividir marco hacia arriba
(Modify /Frameset /Split Frame Up). De este modo dividiremos la página
a la mitad y veremos un borde horizontal a lo ancho de la página.
El área superior e inferior se separarán en
dos páginas HTML. También se creará una tercera página
que es el conjunto de marcos.
3) Hacer clic para colocar el cursor en el marco inferior .
4) Seleccionar Modificar/Conjunto de marcos/Dividir marco a la derecha
(Modify/ Frameset/ Split Frame right). Con esto, la página habrá
quedado dividida en tres áreas.
5) Hacer clic para seleccionar la barra que divide las áreas superior
e inferior de la página. Arrastrar la barra hasta que el marco
superior cubra una cuarta parte del espacio de la página.
6) Tomar la línea de división vertical y llevarla hacia
la izquierda hasta que ocupe una cuarta parte (como para poner una botonera).
7) El paso siguiente es guardar el conjunto de marcos. Para ello vamos
a archivo/ Guardar conjunto de marcos (File/Save Frameset) .
8) Luego vamos a ponerle un nombre a cada uno de los marcos.
Para ello, vamos a Ventana/Marcos (Window/Frames). Se abrirá una
ventana con una reproducción de nuestra página de marcos.
Cada una de las tres zonas dirá: Sin nombre (no name). Haremos
click en cada una de las zonas dentro de la ventana Marcos (frames) y
en el inspector de propiedades, en el campo Nombre del marco
(Frame Name) escribiremos un nombre para cada uno de ellos (Por ej: encabezado,
botonera, cuerpo). El nombre debe ser una sola palabra y servirá
luego para definir el destino de los enlaces.
9) Ahora solo resta guardar cada marco, es decir cada página de
marcos. Hacemos un click en el marco superior y vamos a Archivo/Guardar
como (File/Save as).
Hacemos lo mismo con los siguientes marcos. Una vez que está todo
guardado podemos comenzar a definir ciertas propiedades de cada
una de las páginas de marcos:
Define
la página HTML que se está mostrando en un marco.
Scroll: determina si el navegador le pondrá o no a esa página
barras de desplazamiento cuando no haya lugar suficiente para mostrar
todo el contenido. El valor Auto hace que el navegador solo muestre las
barras si es necesario y en muchos navegadores lo tomarán como
auto si dejamos este seteo en Default.
No resize (no redimensionar): No permite al usuario modificar el
tamaño de los marcos en el navegador .
Ancho del margen (Margin Width): establece un margen desde el lateral
izquierdo y derecho (el espacio entre el borde y el contenido del marco
).
Largo del margen: (Margin Height): establece un margen desde el
borde superior e inferior (el espacio entre el borde y el contenido del
marco).

Propiedades
de los conjuntos de marcos:
Para establecer el tamaño de los frames y los bordes utilizamos
las propiedades de los conjuntos de marcos. Para seleccionar un conjunto
de marcos debemos ir a Ventana/Marcos (Window/Frames) y hacer clic sobre
la línea gruesa que bordea a los marcos en la ventana Marcos. Sabremos
que estamos seleccionando el conjunto de
marcos porque el inspector de propiedades dirá Conjunto de Marcos
(Frameset).
Las propiedades
que podemos configurar para los conjuntos de marcos son las siguientes:
Bordes (Borders): Si queremos que haya bordes alrededor de los
marcos cuando veamos la página en un navegador. Al seleccionar
Default dejaremos que el navegador determine la forma en la que se verán
los bordes.
Ancho del borde (Border Width): En caso de haber elegido Si en
la opción Bordes, aquí especificaremos el ancho del mismo.
Border Color: Color del borde.
Por último debemos establecer la medida de cada marco.
Esto se logra haciendo click en cada una de las representaciones de los
marcos
que aparecen en el inspector de propiedades y seleccionando un valor en
el campo Columna (Column) o Fila (Row) (dependiendo de cómo hayamos
dividido la página). Para conseguir un resultado óptimo,
debemos establecer la medida de uno de los lados (fila o columna) y al
segundo debemos indicarle que su medida será Relativa (Relative)
a 1, es decir relativa al otro. Esta es la mejor manera de definir la
medida de los marcos.
Estableciendo
vínculos en un conjunto de marcos
Los vínculos
que se asignan en los marcos son iguales a cualquier otro vínculo
en un archivo HTML, excepto que cuando estamos trabajando en un conjunto
de marcos y queremos establecer un vínculo, debemos precisar cuál
será el marco de destino de dicho vínculo (para eso le pusimos
nombre a los distintos marcos). Al hacer un vínculo debemos entonces
desplegar el campo Destino (Target) y seleccionar en qué marco
se mostrará la página.
La manera
más rápida de crear marcos con Dreamweaver 3 es utilizando
alguno de los tipos de marco que el programa trae. Para verlos, hay que
ir ala subpaleta Marcos (Frames) de la paleta de Objetos (Objetcts). Debemos
elegir una de las posibilidades que nos ofrece dicha paleta y al hacer
clic sobre el icono de la opción elegida, inmediatamente se insertarán
los marcos en nuestra página.
Obviamente, luego debemos guardar el conjunto de marcos y los marcos como
se especificó en los puntos anteriores.