Dreamweaver M1 UD12 Elementos Activos
Click here to load reader
-
Upload
white-moon -
Category
Documents
-
view
44 -
download
0
Transcript of 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.
Forinsur S.L. Centro de Formación | Manual de Usuario
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.
Técnico Especialista en Diseño, Animación y Programación Web
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.
Forinsur S.L. Centro de Formación | Manual de Usuario
• 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.
Técnico Especialista en Diseño, Animación y Programación Web
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.
Forinsur S.L. Centro de Formación | Manual de Usuario
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.
Técnico Especialista en Diseño, Animación y Programación Web
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.