revista-plantilla-dreamweaver

DREAMWEAVER
2018
ETIQUETA DIV
CREACIÓN Y USO DE PLANTILLAS

OBJETIVO
-
Ser capaz de dirigir, diseñar y desarrollar contenidos de cualquier sitio web
asimilando cada fase para llevar a cabo un proyecto, comprendiendo y atendiendo
las necesidades, la tecnología y las posibilidades reales de cada cliente
y así dar una respuesta efectiva a sus objetivos, además de ser capaz de
ofrecer las aportaciones creativas gráficas que hagan que sea una pieza única
e innovadora.
Etiqueta Div
Cuando usar una etiqueta Div
Creación de una plantilla de Dreamweaver
Edición de contenido en plantillas
Crear regiones editables en la plantilla

Plantilla de Dreamweaver
ETIQUETA DIV
La etiqueta se emplea para definir
un bloque de contenido o sección de la
página, para poder aplicarle diferentes
estilos e incluso para realizar operaciones
sobre ese bloque específico.
Si se aplica una modificación a la apariencia
de ese bloque, añadiendo un estilo de
borde a la etiqueta ; quedaría así:
Ejemplo de la etiqueta div:
Se observa en la figura; que aparece un
borde sólido de 2 píxeles alrededor de
todo el espacio definido por la etiqueta
div.
Visualmente la etiqueta no provoca
ningún cambio, pero en la estructura
interna del documento se aplica una división
muy importante.
La figura muestra el texto del ejemplo; y
se observa que no hay ninguna diferencia
visible.
RECUERDA: La etiqueta
configura espacios dentro de la
página.
1

Plantilla de Dreamweaver
CUANDO USAR LA
ETIQUETA DIV
Adicionalmente, las etiquetas div se
suele acompañar de uno o dos parámetros
destinados a identificar ese bloque:
id: permite establecer un identificador
único para el bloque. Así podremos referirnos
al bloque de forma inequívoca.
La forma de usar esta etiqueta es, colocándola
de apertura antes de donde empieza el
grupo; indicando el nombre dentro de esa
etiqueta, y colocar luego la etiqueta de
cierre, al final del grupo. Resulta bastante
sencillo; un ejemple, para agrupar dos
párrafos, sería de la siguiente manera:
class: es similar a id, pero con la ventaja
de que se puede repetir; así que podemos
tener varios diferentes con la
misma clase.
Usando id y class podemos diferenciar
unos div de otros y así aplicarles estilos
CSS diferentes o hacer que actúen de
forma distinta. Las etiquetas id y class se
utilizan como se muestra en el ejemplo:
Asimismo, se usa la etiqueta Html ,
cuando se quiere dar un nombre o identificador
a elementos enteros, como un párrafo
completo, o más habitualmente, a un
grupo de elementos: párrafos, imágenes, un
bloque formado por varios párrafos e imágenes,
o incluso la página completa. De
esta manera se puede aportarle estilos definidos
en la hoja de estilos, a todos los elementos
de ese grupo
Como se puede apreciar, las etiquetas id
y class se pueden mezclar. Se mantiene
siempre esa norma: los id son únicos
dentro de una página, mientras que los
class se suelen repetir para que varios
elementos tomen un mismo estilo.
2

Plantilla de Dreamweaver
CREACIÓN DE UNA
PLANTILLA DE
DREAMWEAVER
Podemos crear una plantilla a partir de un
documento existente, por ejemplo, un
documento HTML, o a partir de un documento
nuevo.
Una plantilla es un tipo de documento que
sirve para crear un diseño de página “fijo”;
puede crear documentos basados en la
plantilla que heredan su diseño de página. Al
diseñar una plantilla, usted especifica como
“editables” aquellos contenidos de un documento
basado en dicha plantilla que los
usuarios pueden editar.
Una vez creada la plantilla, se puede insertar
regiones de plantillas y establecer las
preferencias de plantilla para el color de
código y el de resaltado de la región de
plantilla.
CREACIÓN DE UNA PLANTILLA A PARTIR
DE UN DOCUMENTO EXISTENTE
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.
3. En la categoría Común del panel Insertar,
seleccione Plantillas en el menú desplegable
y, a continuación, seleccione la
opción Crear plantilla.
4.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.
5. 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.
3

Plantilla de Dreamweaver
EDICIÓN DE CONTENIDO
EN PLANTILLAS
Podemos crear una plantilla
a partir de un documento
existente, por ejemplo, un
documento HTML, o a partir
de un documento nuevo.
Una vez creada la plantilla,
se puede insertar regiones
de plantillas y establecer las
preferencias de plantilla
para el color de código y el
de resaltado de la región de
plantilla.
Modificación de un atributo de
etiqueta editable
1. Abra el documento basado
en la plantilla.
Seleccione Editar > Propiedades.
Si se intenta editar una región bloqueada en un
documento basado en una plantilla cuando se
desactiva el resaltado, el puntero del ratón cambiará
para indicar que no se puede hacer clic en
una región bloqueada.
2. Se abre el cuadro de diálogo
Propiedades de plantilla, que
muestra una lista de las propiedades
disponibles. El cuadro de
diálogo muestra las regiones
opcionales y los atributos de
etiqueta editables.
3. En la lista Nombre, seleccione
la propiedad.
El área inferior del cuadro de
diálogo se actualizará para
mostrar la etiqueta de la propiedad
seleccionada y su valor
asignado.
4. En el campo situado a la
derecha de la etiqueta de propiedad,
edite el valor para
modificar la propiedad en el
documento.
4

Plantilla de Dreamweaver
CREAR REGIONES
EDITABLES EN
PLANTILLAS
Las regiones de plantilla editables controlan
qué áreas de una página basada en plantilla
puede editar el usuario. Antes de insertar
una región editable, guarde como plantilla el
documento en el que está trabajando
Puede colocar una región editable en
cualquier lugar de la página, pero hay que
tener en cuenta los siguientes aspectos si
va a hacer que una tabla sea editable:
1. Marcar una tabla entera o una celda
individual de una tabla como editable
2. Seleccione el texto o el contenido que
desea definir como región editable.
3. Sitúe el punto de inserción en la posición
en la que desea insertar una región editable.
4. Siga uno de estos procedimientos para
insertar una región editable:
Seleccione Insertar > Plantilla > Región
editable.
5. En la categoría Plantillas del panel Insertar,
seleccione Región editable.
6. 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 editable en una plantilla
determinada).
7. Haga clic en Aceptar. La región editable
aparece limitada por un contorno rectangular
resaltado en la plantilla con el color
de resaltado definido en las preferencias.
5

Conclusiones
Las plantillas permiten que un diseñador web cree un sitio que pueda ser
flexible, fácil de actualizar y coherente entre páginas HTML.
Las plantillas pueden aumentar la productividad, lo que permite a algunos
miembros del equipo centrarse en el formato de las páginas mientras otros
crean nuevas páginas y revisan el contenido sin cambiar el diseño con formato.
Los diseñadores pueden realizar cambios con rapidez en el diseño general
del sitio revisando los archivos DWT (plantillas de Dreamweaver) directamente.

Bibliografía
Mediaactive. (2014). Aprender Dreamweaver CC con 100 ejercicios prácticos.
Barcelona,
España: Editorial MARCOMBO, S.A.
Caballeiro, Gustavo. (2012). Diseño web con HTML y CSS. Creación de
sitios atractivos y
profesionales. Buenos Aires. 1a ed.
Christophe AUBRY.(2014). HTML5 YCSS3:Revolucione eldiseño desussitios
web.
España. Editorial ENI

SV
GRAPHIC DESIGN