MANUAL DE DREAMWEAVER CS4 CONTINUACIN DEL CURSO CAPITULO 7

Lcda. Mnica Gonzlez R.

Capitulo 7 Elementos de biblioteca

La caracterstica Biblioteca (Library) en Dreamweaver fue diseada para automatizar el proceso de introduccin y modificacin de elementos que se muestran en mltiples pginas de un sitio de Web. En una biblioteca se puede guardar cualquier tipo de elementos como pueden ser un logotipo, una hilera de imgenes, 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 libreras 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 automtica a las mltiples pginas 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 pginas 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 pginas. Es ms, podemos borrar un elemento de biblioteca y luego arrepentirnos y simplemente seleccionando el elemento insertado en alguna de las pginas y pulsando Recrear (Recreate) lo restauraremos.

Insertando archivos multimedia a una pgina Web

Dreamweaver nos permite insertar archivos de Shockwave (un tipo de archivo que permite ver en la Web contenidos hechos con Macromedia Director); pelculas 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 dinmico); controles ActiveX .(pequeas 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). Tambin, si hemos creado imgenes 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 imgenes que al pasar el puntero del mouse por encima, cambian por otra del mismo tamao. Esto se utiliza mucho hoy en da, sobre todo para los botones de navegacin. Para crear un rollover, nos posicionamos en el lugar donde queremos insertarlo y hacemos click sobre el botn Insertar imagen rollover (Insert Rollover Image) de la paleta Objects. Se abrir un cuadro de dilogo

Lcda. Mnica Gonzlez R.

que nos pedir un nombre para nuestro rollover y tambin que le indiquemos la ubicacin de la primera imagen (cuando el mouse no est encima) y de la segunda imagen (cuando el mouse est encima). Tildamos tambin la opcin de pre-carga de las dos imgenes para que el usuario pueda ver el rollover cuando hayan bajado las dos imgenes. Tambin establecemos una direccin adonde nos llevar el rollover al hacer clic. Pulsamos aceptar.

Marcos
Los marcos estn compuestos por dos elementos: el frameset o conjunto de marcos y los marcos individuales. El conjunto de marcos contiene informacin sobre la cantidad de marcos que habr en la pgina, el tamao, etc. Este conjunto no se muestra en los navegadores sino que solo contiene la informacin para mostrar los marcos. Los marcos son zonas definidas o reas de una pgina HTML. Cada marco aloja una pgina Web. Lo que se suele hacer es un marco para la parte de navegacin de la pgina y otro marco para el contenido. La ventaja de los marcos es que podemos establecer zonas que siempre sern visibles por ms que el usuario descienda con la barra de desplazamiento de su navegador. Por ejemplo, podemos hacer que el encabezado de la pgina con el logo de la empresa siempre est visible. Entonces, una pgina 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 pgina a la mitad y veremos un borde horizontal a lo ancho de la pgina. El rea superior e inferior se separarn en dos pginas HTML. Tambin se crear una tercera pgina 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 pgina habr quedado dividida en tres reas. 5) Hacer clic para seleccionar la barra que divide las reas superior e inferior de la pgina. Arrastrar la barra hasta que el marco superior cubra una cuarta parte del espacio de la pgina. 6) Tomar la lnea de divisin 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 reproduccin de nuestra pgina 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.

Lcda. Mnica Gonzlez R.

9) Ahora solo resta guardar cada marco, es decir cada pgina 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 pginas de marcos: Define la pgina HTML que se est mostrando en un marco. Scroll: determina si el navegador le pondr o no a esa pgina 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 tomarn como auto si dejamos este seteo en Default. No resize (no redimensionar): No permite al usuario modificar el tamao 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 tamao 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 lnea 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 pgina en un navegador. Al seleccionar Default dejaremos que el navegador determine la forma en la que se vern los bordes. Ancho del borde (Border Width): En caso de haber elegido Si en la opcin 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 cmo hayamos dividido la pgina). 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.

Lcda. Mnica Gonzlez R.

Estableciendo vnculos en un conjunto de marcos

Los vnculos que se asignan en los marcos son iguales a cualquier otro vnculo en un archivo HTML, excepto que cuando estamos trabajando en un conjunto de marcos y queremos establecer un vnculo, debemos precisar cul ser el marco de destino de dicho vnculo (para eso le pusimos nombre a los distintos marcos). Al hacer un vnculo debemos entonces desplegar el campo Destino (Target) y seleccionar en qu marco se mostrar la pgina. La manera ms rpida 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 opcin elegida, inmediatamente se insertarn los marcos en nuestra pgina. Obviamente, luego debemos guardar el conjunto de marcos y los marcos como se especific en los puntos anteriores.

Lcda. Mnica Gonzlez R.