Forinsur S.L.

Centro de Formacin | Manual de Usuario

Elementos Activos y Plantillas

Qu son elementos activos Pues sencillamente un elemento activo es un archivo (con extensin .lbi) que guarda un fragmento de cdigo HTML que seguramente se repita en varias pginas y que cambiaremos con cierta frecuencia. Puede ser una lnea de cdigo o un montn de ellas. Puede incluir un logotipo, un men, cualquier cosa. Para que sirve un elemento de Libreria? Si vamos a tener un fragmento o parte de cdigo HTML que se va a repetir en varias pginas (como un men, la publicidad, el contador, el logotipo de la web...) y que puede que algn da cambiemos, es bueno guardar ese trozo de cdigo dentro de un elemento de libreria. De ese modo, si un dia queremos cambiarlo solo hay que variar ese archivo y al guardarlo el Dreamweaver nos preguntar si deseamos actualizar todas las pginas que lo tienen como referencia. De este modo, Dreamweaver se encarga de cambiar todas las pginas y solo tenemos luego que subirlas al servidor. Qu es la librera Una Libreria en Dreamweaver no es ms que una carpeta que se va a crear dentro de la carpeta de vuestra web, llamada Library. En ella se van guardando automticamente todos los elementos de libreria que vamos creando.

Aadiendo un elemento a la librera En primer lugar hemos de decidir qu trozo de cdigo queremos incluir en el elemento de libreria. Lo mejor es hacerlo con elementos completos, es decir, todo el cdigo de una celda de una tabla (desde <TD> hasta </TD>, o desde <TR> hasta </TR> o desde <TABLE> hasta </TABLE>....), o todo el contenido de un DIV concreto (desde <DIV class="...> hasta </DIV>..). Una vez que decidimos qu fragmento de cdigo vamos a poner en el elemento de libreria lo copiamos (edicin > copiar).

Tcnico Especialista en Diseo, Animacin y Programacin Web

Para crear un elemento de biblioteca basado en una seleccin: 1. En la ventana de documento, seleccione una parte de un documento que vaya a guardar como elemento de biblioteca. 2. Siga uno de estos procedimientos: o Arrastre la seleccin a la categora Biblioteca del panel Activos (Ventana > Activos). o Haga clic en el botn Nuevo elemento de biblioteca que se encuentra en la parte inferior de la categora Biblioteca del panel Activos (Ventana > Activos). o Elija Modificar > Biblioteca > Aadir objeto a Biblioteca. 3. Escriba un nombre para el nuevo elemento de biblioteca y presione Intro (Windows) o Retorno (Macintosh). Dreamweaver guarda cada elemento de biblioteca como archivo independiente (con la extensin de archivo .lbi) en la carpeta Library de la carpeta raz local del sitio.

Para editar un elemento de biblioteca: 1. En el panel Activos (Ventana > Activos), seleccione la categora Biblioteca situada en la parte izquierda del panel. 2. Seleccione un elemento de biblioteca. En la parte superior del panel Activos aparecer una vista previa del elemento de biblioteca. (No se puede editar nada en la vista previa.) 3. Siga uno de estos procedimientos: o Haga clic en el botn Editar situado en la parte inferior del panel.

Forinsur S.L. Centro de Formacin | Manual de Usuario

Haga doble clic en el elemento de biblioteca. Dreamweaver abrir una nueva ventana para que edite el elemento de biblioteca. La ventana se parece mucho a la ventana de documento, pero su Vista de Diseo tiene un fondo gris que indica que se est editando un elemento de biblioteca en lugar de un documento.

4. Edite el elemento de biblioteca y guarde los cambios. 5. En el cuadro de dilogo que aparece, seleccione si desea actualizar los documentos del sitio local que utiliza el elemento de biblioteca editado: o Elija Actualizar para actualizar todos los documentos del sitio local con el elemento de biblioteca editado. o Elija No actualizar para impedir que se modifiquen los documentos hasta que utilice Modificar > Biblioteca > Actualizar pgina actual o Actualizar pginas.

Actualizando elementos de la librera Para actualizar el documento actual para que utilice la versin actual de todos los elementos de biblioteca: Elija Modificar > Biblioteca > Actualizar pgina actual. Para actualizar el sitio completo o todos los documentos que usen un elemento de biblioteca concreto: 1. Elija Modificar > Biblioteca > Actualizar pginas.

Aparecer el cuadro de dilogo Actualizar pginas. 2. En el men emergente Buscar en, siga uno de estos procedimientos: Seleccione Todo el sitio y, despus, el nombre del sitio en el men emergente que aparece al lado. De esta manera se actualizarn todas las pginas del sitio seleccionado para que utilicen la versin actual de todos los elementos de biblioteca. Elija Archivos que usan y luego seleccione el nombre del elemento de biblioteca en el men emergente que aparece al lado. Se actualizarn todas las pginas del sitio actual que usen el elemento de biblioteca seleccionado.

Tcnico Especialista en Diseo, Animacin y Programacin Web

3.

Asegrese de que Elementos de biblioteca est seleccionado en la

opcin Actualizar. 4. Haga clic en Iniciar.

Dreamweaver actualizar los archivos como se ha indicado. Si selecciona la opcin Mostrar regstro, Dreamweaver proporcionar informacin sobre los archivos que intenta actualizar, indicando si se han actualizado satisfactoriamente.

Qu es un Plantilla Cada vez que deseamos crear un sitio web, tenemos que tener muy en cuenta que las pginas deben seguir un formato uniforme. La mayora de nosotros solemos hacer copias de los documentos ya creados, y trabajar sobre estas copias, modificando simplemente su contenido. Esta es la forma ms sencilla de tener pginas con una estructura basada en la estructura de otras ya creadas previamente. Las plantillas son una especie de copia de la pgina en la que van a estar basadas el resto de pginas del sitio web, pero que incluyen la posibilidad de establecer unas zonas editables y otras zonas que sern fijas, que no podrn ser modificadas. No es posible modificar las propiedades de una pgina que est basada en una plantilla, a excepcin del ttulo. Cuando se desea que existan pginas con, por ejemplo, diferente color de fondo, es necesario crear plantillas diferentes con los distintos colores, y basar las pginas en una u otra plantilla, segn el color de fondo que se desee para cada una. Cuando se modifica el diseo de una plantilla, se pueden actualizar todas las pginas basadas en ella. Las plantillas son archivos con la extensin DWT que se guardan en el sitio
T

web, dentro de una carpeta llamada Templates.

Forinsur S.L. Centro de Formacin | Manual de Usuario

Creando un Plantilla Las plantillas pueden crearse desde cero, o a partir de una pgina ya existente

Una forma de crear una plantilla desde cero es a travs del panel Archivos, pestaa Activos. La pestaa Activos se puede abrir a travs del men Ventana, opcin Activos. Tambin pulsando F11. Una vez abierto el panel hay que seleccionar el botn trabajar con las plantillas. Los botones inferiores del panel Activos panel Estilos CSS. El nico botn 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. son similares a los del , para poder

Tcnico Especialista en Diseo, Animacin y Programacin Web

Para crear una nueva plantilla hay que pulsar sobre el botn Plantilla).

(Si este

botn no est activado, pulsa con el botn derecho del ratn y elige Nueva

Cuando se pulsa ese botn 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 botn .

Para eliminar una plantilla la seleccionamos de la lista y pulsamos el botn . Las plantillas se guardan en el sitio web actual, dentro de la carpeta Templates, que se crea automticamente. Para crear una plantilla a partir de un archivo existente es necesario abrir dicho archivo, y despus guardarlo como plantilla a travs del men Archivo, opcin Guardar como plantilla. Cuando se pulsa dicha opcin, aparece una ventana. En ella es necesario especificar el nombre con el que va a ser guardada la plantilla, a travs del campo Guardar como, y elegir, de entre la lista de sitios, el Sitio: en el que se va a guardar. Modificando y actualizando Plantillas Todos los elementos de una plantilla estn bloqueados por defecto, no se pueden modificar. Es necesario establecer las zonas que s podrn ser editadas en las pginas que se basen en dicha plantilla. Para editar una plantilla hay que abrirla en Dreamweaver. Una forma de abrirla es a travs del panel Activos, pulsando dos veces sobre ella, o estando seleccionada pulsando sobre el botn como ya hemos visto.

Una vez abierta la plantilla es posible establecer sus propiedades a travs de la ventana Propiedades de la pgina.

Forinsur S.L. Centro de Formacin | Manual de Usuario

Como recordars, para abrir esta ventana puedes: Pulsar la combinacin de teclas Ctrl+J. Hacer clic sobre el men Modificar y elegir la opcin Propiedades de la pgina. Pulsar con el botn derecho sobre el documento abierto en Dreamweaver, y en el men contextual que aparece seleccionar la opcin Propiedades de la pgina. Para insertar una regin editable hay que situar el puntero en el lugar en el que se desea insertar, y despus dirigirse al men Insertar, Objetos de plantilla, opcin Regin editable, o pulsar la combinacin de teclas Ctrl+Alt+V. En la nueva ventana hay que establecer un Nombre para la regin editable. Dentro de la plantilla no pueden existir dos regiones editables con el mismo nombre. Posteriormente puede modificarse el nombre a travs del inspector de propiedades de la regin 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 aparecern por defecto en aquellos documentos que se basen en la plantilla. Estos objetos, al estar dentro de la zona editable, podrn ser modificados en las pginas.

Tcnico Especialista en Diseo, Animacin y Programacin Web

Todos los objetos que se encuentren fuera de estas zonas editables aparecern tambin en las pginas, pero no podrn ser modificados. En este caso, la imagen con el logotipo de forinsur aparecera en todas las pginas que se basaran en esta plantilla, mientras que todo lo que insertramos dentro de la zona editable FormularioCorreoElectronico podra ser modificado.