Tutoriales
Indice Dreamweaver
Capitulo 1
Capitulo 2
Capitulo 3
Capitulo 4
Capitulo 5
Capitulo 6
Capitulo 7
Capitulo 8
Capitulo 9
Capitulo 10
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.