Dreamweaver M1 UD12 Elementos Activos

Forinsur S.L. Centro de Formación | Manual de Usuario

Elementos Activos y Plantillas

• Qué son elementos activos

Pues sencillamente un elemento activo es un archivo (con extensión .lbi) que

guarda un fragmento de código HTML que seguramente se repita en varias

páginas y que cambiaremos con cierta frecuencia. Puede ser una línea de

código o un montón 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 código HTML que se va a repetir

en varias páginas (como un menú, la publicidad, el contador, el logotipo de

la web...) y que puede que algún día cambiemos, es bueno guardar ese

trozo de código 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 páginas que

lo tienen como referencia. De este modo, Dreamweaver se encarga de

cambiar todas las páginas y solo tenemos luego que subirlas al servidor.

• Qué es la librería

Una Libreria en Dreamweaver no es más que una carpeta que se va a crear

dentro de la carpeta de vuestra web, llamada Library. En ella se van

guardando automáticamente todos los elementos de libreria que vamos

creando.

• Añadiendo un elemento a la librería

En primer lugar hemos de decidir qué trozo de código queremos incluir en el

elemento de libreria. Lo mejor es hacerlo con elementos completos, es decir,

todo el código 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 código vamos a poner en el

elemento de libreria lo copiamos (edición > copiar).

Técnico Especialista en Diseño, Animación y Programación Web

Para crear un elemento de biblioteca basado en una selección:

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 selección a la categoría Biblioteca del panel Activos

(Ventana > Activos). o Haga clic en el botón Nuevo elemento de biblioteca que se encuentra

en la parte inferior de la categoría Biblioteca del panel Activos (Ventana > Activos).

o Elija Modificar > Biblioteca > Añadir 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 extensión de archivo .lbi) en la carpeta Library de la carpeta raíz local del sitio.

Para editar un elemento de biblioteca:

1. En el panel Activos (Ventana > Activos), seleccione la categoría 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 botón Editar situado en la parte inferior del panel.


o 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 Diseño 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 diálogo 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 página actual o Actualizar páginas.

• Actualizando elementos de la librería

Para actualizar el documento actual para que utilice la versión actual de

todos los elementos de biblioteca:

Elija Modificar > Biblioteca > Actualizar página actual.

Para actualizar el sitio completo o todos los documentos que usen un

elemento de biblioteca concreto:

1. Elija Modificar > Biblioteca > Actualizar páginas.

Aparecerá el cuadro de diálogo Actualizar páginas.

2. En el menú emergente Buscar en, siga uno de estos procedimientos:

Seleccione Todo el sitio y, después, el nombre del sitio en el

menú emergente que aparece al lado.

De esta manera se actualizarán todas las páginas del sitio seleccionado para

que utilicen la versión 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 actualizarán todas las páginas del sitio actual que usen el elemento de

biblioteca seleccionado.


3. Asegúrese de que Elementos de biblioteca está seleccionado en la

opción Actualizar.

4. Haga clic en Iniciar.

Dreamweaver actualizará los archivos como se ha indicado. Si selecciona la

opción Mostrar regístro, Dreamweaver proporcionará información 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 páginas deben seguir un formato uniforme.

La mayoría de nosotros solemos hacer copias de los documentos ya

creados, y trabajar sobre estas copias, modificando simplemente su

contenido. Esta es la forma más sencilla de tener páginas con una

estructura basada en la estructura de otras ya creadas previamente.

Las plantillas son una especie de copia de la página en la que van a estar

basadas el resto de páginas del sitio web, pero que incluyen la posibilidad

de establecer unas zonas editables y otras zonas que serán fijas, que no

podrán ser modificadas.

No es posible modificar las propiedades de una página que está basada en

una plantilla, a excepción del título. Cuando se desea que existan páginas

con, por ejemplo, diferente color de fondo, es necesario crear plantillas

diferentes con los distintos colores, y basar las páginas en una u otra

plantilla, según el color de fondo que se desee para cada una.

Cuando se modifica el diseño de una plantilla, se pueden actualizar todas

las páginas basadas en ella.

Las plantillas son archivos con la extensión DWT que se guardan en el sitio

web, dentro de una carpeta llamada

T

Templates.


• Creando un Plantilla

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, pestaña Activos.

La pestaña Activos se puede abrir a través del menú Ventana, opción

Activos. También pulsando F11.

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 este

botón no está activado, pulsa con el botón derecho del ratón 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.

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.

• Modificando y actualizando Plantillas

Todos los elementos de una plantilla están bloqueados por defecto, no se

pueden modificar.

Es necesario establecer las zonas que sí podrán 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.


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 forinsur 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.

Dreamweaver M1 UD12 Elementos Activos

Documents

Transcript of Dreamweaver M1 UD12 Elementos Activos