Creación de plantillas en Dreamweaver

INSTITUTO TECNOLÓGICO SUPERIOR DANIEL ÁLVAREZ BURNEO

5to DISEÑO GRÁFICO

Diseño Web II

- CAPAS - CREAR Y REUTILIZAR PLANTILLAS EN DW CC INTEGRANTES: - Cesar Briceño - Karen Salinas - Janela Pacheco

CB Cesar Briceño

cesaren14@outlook.com

f

12-12-2018

Adobe

Dreamweaver

OBJETIVO:

- Aplica los conceptos base para la maquetación y construye un sitio web haciendo uso de capas mediante DW CC. - Maneja adecuadamente la creación de plantillas para la creación de las páginas que contendrá un sitio web con el uso de DW.

cesaren14@outlook.com

Diseño Web II

Indice CAPAS

- Concepto de capa - Insertar capas - Etiqueta div - Propiedades de las capas - Cuando usar un div - Hojas de estilos en las capas

CREAR Y REUTILIZAR PLANTILLASEN DW CC - CreaciĂłn y uso de plantillas.

- Modificando plantillas.

- Atributos editables.

- Regiones editables - Regiones repetidas.

- Separar y unir a plantilla

cesaren14@outlook.com

DiseĂąo Web II

Capas Las capas no son más que unos recuadros, que pueden situarse en cualquier parte de la página, en los que podemos insertar contenido HTML. Dichas capas pueden ocultarse y solaparse entre sí, lo que proporciona grandes posibilidades de diseño.

- Las capas pueden moverse de una posición a otra de la ventana pulsando sobre el recuadro blanco, y sin soltar el ratón, arrastrándola hacia la nueva posición.

- También pueden ser redimensionadas pulsando sobre los recuadros negros, y arrastrándolos hasta conseguir el tamaño deseado.

Dentro del recuadro de la capa es posible insertar texto, tablas, imágenes, animaciones flash, y todos los elementos que puede contener un documento HTML.

cesaren14@outlook.com

Diseño Web II

Insertar capas - Las capas pueden insertarse en una página a través del menú Insertar, opción Objeto de diseño, Capa.

- Una vez se ha insertado la capa, pueden editarse sus atributos, pero para ello hay que seleccionarla primero.

- Una capa puede seleccionarse de varias maneras. Una de ellas es pulsando sobre el icono correspondiente, pero esto no resulta útil cuando existen muchas capas en un mismo documento, ya que todas las capas tienen asociada una imagen igual a esta, y no es fácil seleccionar la deseada a la primera.

- Cuando existen varias capas en un mismo documento, es preferible seleccionarlas a través de la pestaña Capas del panel Diseño, que puede abrirse a través del menú Ventana opción Capas.

- Si la opción Capas no te aparece directamente en este menú, posiblemente esté dentro de la opción Otros. También puedes abrir el panel pulsando F2.

- En dicho panel aparecen los nombres de todas las capas que existen en el documento actual, y para seleccionar una de ellas simplemente hay que pulsar sobre el nombre en el panel.

cesaren14@outlook.com

Diseño Web II

Etiqueta div - Div de "division" -división . Sirve para crear secciones o agrupar contenidos.

Sus etiquetas son: <div> y </div> (ambas obligatorias).

- Está definido como: Elemento en bloque.

Crea una caja: En bloque.

Puede contener: Texto, y/o cero o más elementos en bloque o en linea.

Cuando usar un div - Etiquetas div para crear bloques de diseño CSS y colocarlos en el documento. Esto resulta útil si ha adjuntado al documento una hoja de estilos CSS con estilos de posición. Dreamweaver le permite insertar rápidamente una etiqueta div y aplicarle estilos existentes.

cesaren14@outlook.com

Diseño Web II

Hojas de estilos en las capas Lo de capas es un síimil utilizado para intentar explicar la técnica utilizada. Imagina que tienes una pizarra completamente limpia y vacía. Eso sería el body de la página antes de escribir nada. Ahora tomamos una hoja transparente y en ella dibujamos un bloque que va a contener información y la ponemos sobre la pizarra. A continuación tomamos otra hoja transparente, le dibujamos otro bloque en otra posición (o no), y la depositamos encima de la anterior, y así sucesivamente hasta terminar la página. Eso es maquetar por capas.

Cada una de las capas es completamente independiente de las otras, y pueden tener sus propios contenidos y estilo, aunque también pueden heredarlos (los estilos) según un modelo jerárquico, en el que el padre de todas las capas es body. En la figura siguiente tienes un ejemplo de maquetación.

cesaren14@outlook.com

Diseño Web II

CREACIÓN Y REUTILIZACIÓN DE PLANTILLAS EN DREAMWEAVER

cesaren14@outlook.com

Diseño Web II

Creación y uso de Plantillas Puede crear una plantilla a partir de un documento existente.

1. Abra el documento que desea guardar como plantilla.

2. Siga uno de estos procedimientos: • Seleccione Insertar > Plantilla > Crear plantilla.

• En la categoría Común del panel Insertar, seleccione Plantillas en el menú desplegable y, a conti nuación, seleccione la opción Crear plantilla.

3. Seleccione un sitio para guardar la plantilla en el menú emergente Sitio y, a continuación, introduzca un nombre exclusivo para la plantilla en el campo Guardar como.

4. Haga clic en Guardar. Dreamweaver guarda el archivo de plantilla en la carpeta Templates del sitio en la carpeta raíz local del sitio, con la extensión de archivo .dwt. Si no existe la carpeta Templates en el sitio, Dreamweaver la creará automáticamente cuando guarde una plantilla nueva.

cesaren14@outlook.com

Diseño Web II

Creación y uso de Plantillas - Al realizar cambios en una plantilla y guardarlos, se actualizan todos los documentos basados en la plantilla. También puede actualizar manualmente un documento basado en plantilla o todo el sitio si es necesario.

- Apertura y modificación de la plantilla adjunta al documento actual 1. Abra el documento basado en la plantilla en la ventana de documento.

2. Seleccione Herramientas > Plantillas > Abrir plantilla adjunta.

3. Modificación del contenido de la plantilla.

- Actualización del sitio completo o de todos los documentos que utilizan una plantilla determinada.

Puede actualizar todas las páginas del sitio o únicamente las páginas correspondientes a una plantilla determinada.

1. Seleccione Herramientas > Plantillas > Actualizar páginas...

2. En el menú Buscar en, siga uno de estos procedimientos: • Para actualizar todos los archivos del sitio seleccionado a sus correspondientes plantillas, seleccione Todo el sitio y, a continuación, seleccione el nombre del sitio en el menú emergente adyacente.

• Para actualizar los archivos correspondientes a una plantilla determinada, seleccione Archivos que usan y, a continuación, seleccione el nombre de plantilla en el menú emergente adyacente.

cesaren14@outlook.com

Diseño Web II

- Actualización de documentos en plantillas 3. Asegúrese de que Plantillas está seleccionado en la opción Actualizar.

4. Si no desea ver un registro de los archivos que Dreamweaver actualiza, desactive la opción Mostrar registro; de lo contrario, deje la opción seleccionada.

5. Haga clic en Iniciar para actualizar los archivos como se ha indicado. Si selecciona la opción Mostrar registro, Dreamweaver proporcionará información sobre los archivos que intenta actualizar, indicando si se han actualizado satisfactoriamente.

6. Haga clic en Cerrar.

cesaren14@outlook.com

Diseño Web II

Atributos Editables 1. En cualquier plantilla de Dreamweaver, seleccione un elemento en el que desea dar un atributo editable. Para asegurarse de que ha seleccionado un enlace, y no sólo el texto, haga clic en cualquier parte del texto vinculado y luego utilizar el selector de etiquetas en la parte inferior del espacio de trabajo para seleccionar el etiqueta.

2. Elija Modificar-plantillas-Make atributo editable. La etiqueta editables Atributos Aparecerá el cuadro de diálogo.

cesaren14@outlook.com

Diseño Web II

3. En la lista desplegable Atributo, elija el atributo que desea convertir en editable. Las opciones de atributos varían en función de si se selecciona una imagen, un enlace, texto, u otro elemento de la página. La etiqueta de enlace es una de las etiquetas HTML más confusos, ya que es conocida como la etiqueta de anclaje y se muestra como sólo una en el selector de etiquetas. Sin embargo, la etiqueta completa es , y en el cuadro de diálogo Atributos de etiqueta editables, se identificó como HREF. Si el atributo que desea no aparece en la lista, haga clic en el botón Agregar e introduzca el nombre del atributo.

4. Seleccione la casilla de verificación Hacer editable el atributo. Las opciones para ese atributo se activan en la parte inferior del cuadro de diálogo.

5. En la lista desplegable Tipo, seleccione un tipo de atributo. La etiqueta de enlace tiene varios atributos.

6. Haga clic en Aceptar para que el atributo editable y cerrar el cuadro de diálogo.

cesaren14@outlook.com

Diseño Web II

Regiones Editables Puede colocar una región editable en cualquier lugar de la página: • En la ventana de documento, siga uno de estos procedimientos para seleccionar la región: - Seleccione el texto o el contenido que desea definir como región editable.

- Sitúe el punto de inserción en la posición en la que desea insertar una región editable.

- Siga uno de estos procedimientos para insertar una región editable: Seleccione Insertar > Plantilla > Región editable.

• Eliminación de una región editable: Si ha marcado una región del archivo de plantilla como editable y después desea bloquearla de nuevo (convertirla en no editable en los documentos basados en la plantilla), utilice el comando Quitar formato de plantilla.

1. Haga clic en la ficha en la etiqueta de región editable en la parte inferior de la página para seleccionar la región editable.

Siga uno de estos procedimientos: 2. Elija Herramientas > Plantilla > Quitar formato de plantilla.

La región dejará de ser editable.

En la categoría Plantillas del panel Insertar, seleccione Región editable.

cesaren14@outlook.com

Diseño Web II

Regiones Repetidas - Creación de una región repetida en una plantilla Las regiones repetidas permiten a los usuarios de las plantillas duplicar una región especificada en una plantilla tantas veces como deseen. Una región repetida no tiene por qué ser necesariamente una región editable.

Para convertir en editable el contenido de una región repetida (por ejemplo, para que un usuario pueda introducir texto en una celda de la tabla en un documento basado en una plantilla), deberá insertar una región editable en la región repetida.

1. En la ventana de documento, siga uno de estos procedimientos: • Seleccione el texto o el contenido que desea definir como región repetida.

• Sitúe el punto de inserción en el documento en el que desea insertar la región repetida.

2. Siga uno de estos procedimientos: • Elija Insertar > Plantilla > Región repetida.

• En la categoría Plantillas del panel Insertar, seleccione Región repetida.

3. En el cuadro de texto Nombre, introduzca un nombre exclusivo para la región. (No se puede usar el mismo nombre para más de una región repetida en una plantilla).

4. aga clic en Aceptar.

cesaren14@outlook.com

Diseño Web II

BIBLIOGRAFÍA https://www.aulaclic.es/dreamweaver8/t_14_1.htm https://www.aulaclic.es/dreamweaver8/t_14_1.htm https://helpx.adobe.com/la/dreamweaver/using/div-tags.html https://developer.mozilla.org/es/docs/Web/HTML/Elemento/div

cesaren14@outlook.com

Diseño Web II