Post on 06-Apr-2016
description
ESCRITA:
VANESSA ESCOBAR, KAROL CASTRO, MANUELA GARCES
El programa DreamWeaver es una
herramienta de desarrollo
profesional de sitios web, cuenta
con características novedosas y
ofrece un panorama amplio de
opciones de diseño que son
indispensables para los diseñadores
expertos y principiantes de web.
Podemos emplear DreamWeaver
para crear sitios de web en forma
visual, con una interfaz gráfica de
fácil manejo que nos permite
visualizar los cambios que
efectuamos al mismo tiempo que
los realizamos.
Introducción al tema
Novedades de dreamweaver cs3
Instalar dreamweaver
CAPITULO 1
1.1Introducción al diseño de espacio creado
1.2 Flujo de trabajo y espacio de trabajo de Dreamweaver
1.3 Utilización de la ventana de
1.4 Utilización de barras de herramientas, menús contextuales y Personalización del
Capitulo 2.
2.1 Creación y administración de archivos
2.2 Cómo crear y abrir documentos
2.3 Administración de archivos y carpetas
2.4 Sincronización de archivos
CAPITULO 3
3.1 Activos y bibliotecas
3.2 Utilización de activos
3.3 Creación y administración de una lista de activos favoritos
3.4 Utilización de los elementos de biblioteca
CAPITULO 4
4.1 Creación y administración de CSS
4.2 Diseño de páginas con CSS
4.3 Utilización de etiquetas div
CAPITULO 5
6.1 Plantillas de Dreamweaver
6.2 Reconocimiento de plantillas y documentos basados en
6.3 Creación de una plantilla de Dreamweave
FRAMEWORK DE SPRY PARA AJAX
Con Adobe® Dreamweaver® CS3,
puede diseñar visualmente, desarrollar
y desplegar interfaces de usuario
empleando el framework de Spry para
Ajax. El framework de Spry para Ajax es
una biblioteca JavaScript que
proporciona a los diseñadores Web la
capacidad de crear páginas que
ofrezcan una experiencia más
completa a los usuarios. A diferencia
de otros frameworks Ajax, Spry es
accesible tanto para diseñadores como
para desarrolladores, ya que es en un
99% código HTML.
WIDGETS DE SPRY
Los widgets de Spry son componentes
comunes de interfaz de usuario listos
para ser utilizados que puede
personalizar mediante CSS y,
posteriormente, añadir a sus páginas
Web. Con Dreamweaver, puede añadir a
las páginas diversos widgets de Spry,
incluidas listas y tablas gestionadas
mediante XML, acordeones, interfaces
en fichas y elementos de formulario con
validación”
EFECTOS DE SPRY
Los efectos de Spry ofrecen un método
sencillo y elegante para mejorar el
aspecto y el funcionamiento de un sitio
Web. Puede aplicarlos prácticamente a
cualquier elemento de una página HTML.
Puede añadir efectos de Spry para
aumentar o reducir el tamaño de
elementos; hacer que se desvanezcan o
resaltarlos; modificar visualmente un
elemento de una página durante un
período de tiempo determinado, etc.
INTEGRACIÓN DE PHOTOSHOP CS3
AVANZADA
Dreamweaver incluye integración
avanzada con Photoshop CS3. Los
diseñadores ahora pueden simplemente
seleccionar cualquier parte de un diseño
en Photoshop (que abarque incluso
varias capas) y pegarla directamente en
una página de Dreamweaver.
Dreamweaver muestra un cuadro de
diálogo en el que puede especificar las
opciones de optimización de la imagen.
COMPROBACIÓN DE
COMPATIBILIDAD CON
NAVEGADORES
La nueva función Comprobación de
compatibilidad con navegadores de
Dreamweaver genera informes que
identifican problemas de
representación relacionados con CSS
en diversos navegadores. En la vista
Código, los problemas se indican
mediante un subrayado verde para
que sepa dónde se encuentran
exactamente. Una vez que haya
identificado el problema, podrá
resolverlo rápidamente si conoce la
solución o visitar Adobe CSS Advisor
si necesita más información.
DISEÑOS CSS
Dreamweaver ofrece un conjunto de
diseños CSS predefinidos que le permiten
crear páginas con rapidez y le ayudan a
conocer el diseño de páginas CSS
mediante amplios comentarios en línea
incluidos en el código. La mayoría de los
diseños de sitios existentes en la Web
pueden agruparse en tres categorías:
diseños de una, dos o tres columnas,
cada uno de ellos con una serie de
elementos adicionales (como los
encabezados y pies de página).
Dreamweaver ofrece ahora una lista.
ADMINISTRACIÓN DE CSS
La función de administración de
CSS facilita el traslado de reglas
CSS de un documento a otro, de la
sección head de un documento a
una hoja externa, entre archivos
CSS externos, etc. También puede
convertir CSS en línea en reglas
CSS y colocarlas en el lugar en el
que sean necesarias simplemente
arrastrándolas y colocándolas.
ADOBE DEVICE CENTRAL
Adobe Device Central, que se encuentra
integrado en Dreamweaver y en el resto de
productos de software de la familia
Creative Suite 3, simplifica la creación de
contenido móvil permitiéndole un acceso
rápido a especificaciones técnicas
esenciales para cada dispositivo y
reduciendo el texto y las imágenes de la
página HTML para mostrar una
representación precisa de cómo
aparecerían en el dispositivo.
ADOBE BRIDGE CS3
Adobe Bridge ofrece un acceso
centralizado a los archivos de proyectos,
aplicaciones y parámetros de
configuración, además de prestaciones
de asignación y búsqueda de etiquetas
de metadatos XMP. Gracias a sus
funciones para organizar y compartir
archivos, además del acceso a Adobe
Stock Photos, Adobe Bridge proporciona
un flujo de trabajo más eficiente y le
permite un mayor control de sus
proyectos de impresión, Web, vídeo y
móvil.
1
Introduzca el CD de Dreamweaver
en la unidad de CD-ROM del
ordenador.
2
Dispone de las opciones siguientes:
En Windows, elija Inicio > Ejecutar. Haga
clic en Examinar y elija el archivo
Setup.exe del CD de Dreamweaver. En el
cuadro de diálogo Ejecutar haga clic en
Aceptar para comenzar la instalación.
3
Siga las instrucciones que aparecen
en pantalla.
4
Si el sistema lo solicita, reinicie el
ordenador.
El espacio de trabajo de
Dreamweaver permite ver las
propiedades de los documentos
y los objetos. Además, coloca
muchas de las operaciones más
frecuentes en barras de
herramientas para que pueda
realizar cambios en los
documentos rápidamente.
En Windows®, Dreamweaver
proporciona un diseño
integrado en una única ventana.
En el espacio de trabajo
integrado, todas las
ventanas y paneles están
integrados en una única
ventana de la aplicación
de mayor. Tamaño.
DREAMWEAVER ES UN PRODUCTO DE LA
EMPRESA DESARROLLADORA DE SOFTWARE
MACROMEDIA QUE NACIO EN 1992 TRAS LA
FUNCIÓN AUTOHORWARE Y MACRO-MID
PLANIFICACIÓN Y CONFIGURACIÓN DEL
SITIO
Determine la ubicación de los archivos y
examine las necesidades del sitio, el perfil
de la audiencia y sus objetivos. Además,
Tenga en cuenta requisitos técnicos como
el acceso de los usuarios, las limitaciones
del navegador, los plug-ins o la descarga
de archivos. Una vez que haya organizado
la información y determinado una
estructura, podrá comenzar a crear el
sitio.
DISEÑO DE LAS PÁGINAS WEB
Elija el diseño más apropiado, o combine
las opciones de diseño de Dreamweaver
para definir el aspecto de su sitio. En la
creación de su diseño puede utilizar
elementos PA, estilos de posición CSS o
diseños CSS predefinidos de
Dreamweaver.
Las herramientas de tabla le permite
diseñar páginas rápidamente y,
posteriormente, reorganizar la estructura
de las mismas. Para mostrar varios
documentos de forma simultánea en un
navegador, pueden utilizarse marcos para
diseñar los documentos. Por último,
puede crear páginas nuevas basadas en
una plantilla de Dreamweaver y
actualizar su diseño de forma automática
cuando cambie la plantilla
ADICIÓN DE CONTENIDO A LAS PÁGINAS
Añada activos y elementos de diseño, como
texto, imágenes, imágenes de sustitución,
mapas de imágenes, colores, películas,
sonido, vínculos HTML, menús de salto y
mucho más. Puede utilizar funciones de
creación de páginas incrustadas para dichos
elementos, como títulos y fondos, escribir
directamente en la página o importar
contenido desde otros documentos.
Dreamweaver también proporciona
comportamientos para llevar a cabo tareas
en respuesta a eventos específicos, como la
validación de un formulario cuando el
visitante hace clic en el botón Enviar o abrir
una segunda ventana del navegador cuando
la página principal ha terminado de cargarse.
Por último, Dreamweaver incluye
herramientas para maximizar el rendimiento
del sitio Web y para la comprobación de las
páginas, con objeto de garantizar su
compatibilidad con navegadores Web
distintos.
Comprobación y publicación
La comprobación de las páginas es un proceso continuo que se
lleva a cabo durante todo el ciclo de desarrollo. Al final del
ciclo, publicará el sitio en un servidor. Muchos
desarrolladores también programan operaciones de
mantenimiento periódico para asegurarse de que el sitio se
mantiene actualizado y operativo
CAMBIO DE VISTA EN LA VENTANA DE DOCUMENTO
La ventana de documento permite visualizar documentos en la
vista Código, en la vista Diseño o en ambas.
CAMBIO A LA VISTA CÓDIGO
❖ Siga uno de estos procedimientos:
• Seleccione Ver > Código.
• En la barra de herramientas Documento, haga clic en el botón
Mostrar vista de Código.
CAMBIO A LA VISTA DISEÑO
❖ Siga uno de estos procedimientos:
• Seleccione Ver > Diseño.
• En la barra de herramientas Documento, haga clic en el botón
Mostrar vista de Diseño
Cambio de la vista Código a la vista Diseño y viceversa
❖ Presione Control+comilla invertida (`).
Si aparecen ambas vistas en la ventana de documento, este
método abreviado de teclado permite pasar de una vista a otra
VISUALIZACIÓN DE BARRAS DE HERRAMIENTAS
Utilice las barras de herramientas Documento y Estándar para realizar operaciones
relacionadas con documentos y de edición estándar, la barra de herramientas Codificación
para insertar código rápidamente y la barra de herramientas. Representación de estilos
para mostrar la página tal y como aparecería en diferentes tipos de soportes. Si lo desea,
puede seleccionar la opción de mostrar u ocultar las barras de herramientas.
• Seleccione Ver > Barras de herramientas y, después, seleccione la barra de herramientas
que desee.
• Haga clic con el botón derecho del ratón (Windows) o mantenga presionada la tecla
Control y haga clic (Macintosh) en cualquiera de las barras de herramientas en el menú
contextual.
Nota: Para mostrar u ocultar la barra de herramientas Codificación en el inspector de
código (Ventana > Inspector de código), debe seleccionar la barra de herramientas
Codificación del menú emergente Ver opciones situado en la parte superior del inspector.
UTILIZACIÓN DE LA BARRA INSERTAR
La barra Insertar contiene botones para crear e insertar objetos
como tablas e imágenes. Los botones están organizados en
categorías.
Visualización del menú emergente de
un botón
❖ Haga clic en la flecha abajo, situada
junto al icono del botón.
VISUALIZACIÓN DE LAS CATEGORÍAS DE LA BARRA
INSERTAR EN FORMA DE MENÚ
❖ Haga clic con el botón derecho del ratón
(Windows) o haga clic mientras presiona la tecla
Control (Macintosh) en una ficha de categoría de la
barra Insertar y, a continuación, seleccione Mostrar
como menús.
VISUALIZACIÓN DE LAS CATEGORÍAS DE LA BARRA
INSERTAR EN FORMA DE FICHAS
❖ Haga clic en la flecha situada junto al nombre de
categoría en el extremo izquierdo de la barra Insertar
y, a continuación, seleccione Mostrar como fichas.
UTILIZACIÓN DE MENÚS CONTEXTUALES
Los menús contextuales proporcionan acceso rápido a los comandos y las propiedades
más útiles relacionados con la ventana o el objeto con el que esté trabajando. En los
menús contextuales sólo aparecen los comandos pertinentes para la selección actual.
1 Haga clic con el botón derecho del ratón (Windows) o haga clic mientras presiona la
tecla Control (Macintosh) en el objeto o ventana.
2 Seleccione un comando en el menú contextual
ACOPLAMIENTO DE UN GRUPO DE
PANELES A OTRO (ESPACIO DE TRABAJO
FLOTANTE) O A LA VENTANA INTEGRADA
(SÓLO EN WINDOWS)
❖ Arrastre el grupo de paneles por la
barra de sujeción hasta que su contorno
indique que está acoplado.
CÓMO ARRASTRAR UN GRUPO DE
PANELES FLOTANTE (DESACOPLADO) SIN
ACOPLARLO
❖ Arrastre el grupo de paneles por la
barra situada encima de su barra de título.
El grupo de paneles no se acopla mientras
no se arrastre por sus puntos de sujeción.
Cuando desee utilizar Dreamweaver para conectar con una carpeta remota, deberá
especificar la carpeta remota en la categoría Datos remotos del cuadro de diálogo
Definición del sitio. La carpeta remota que especifique (también conocida como
"directorio del servidor") deberá corresponder a la carpeta raíz local del sitio de
Dreamweaver. (La carpeta raíz local es la carpeta de nivel superior del sitio de
Dreamweaver.) Las carpetas remotas, al igual que las carpetas locales, pueden tener
cualquier nombre, aunque los proveedores de acceso a Internet suelen denominar las
carpetas remotas de nivel superior para cuentas de usuarios individuales public_html,
pub_html o algo similar. Si es usted el responsable de su propio servidor remoto y
puede asignar a la carpeta remota el nombre que desee, es recomendable que asigne
el mismo nombre a la carpeta raíz local y la carpeta remota.
Dreamweaver ofrece un entorno flexible para trabajar con varios documentos Web.
Además de documentos HTML, es posible crear y abrir una gran variedad de
documentos basados en texto, incluidos archivos ColdFusion Markup Language
(CFML), ASP, JavaScript y hojas de estilos en cascada (CSS). También admite archivos
de código fuente, como Visual Basic, .NET, C# y Java.
Dreamweaver proporciona varias opciones para crear un documento nuevo. Puede
crear cualquiera de los tipos de documento siguientes:
• Un nuevo documento o plantilla en blanco
• Un documento basado en uno de los diseños de página predefinidos que vienen con
Dreamweaver, incluidos más de 30
diseños de página basados en CSS
• Un documento basado en una de las plantillas existentes
También puede definir las preferencias del documento. Por ejemplo, si suele trabajar
con un tipo de documento, puede establecerlo como tipo de documento
predeterminado para las páginas nuevas que cree. Puede definir fácilmente las
propiedades del documento, como etiquetas meta, título del documento, colores de
fondo, así como otras propiedades de la página en la vista Diseño o en la vista Código.
Dreamweaver incluye un panel denominado Archivos que facilita la administración y
transferencia de archivos entre el sitio local y un servidor remoto. Al transferir archivos
entre sitios locales y remotos, mantiene estructuras de archivos y carpetas paralelas en
ambos sitios. Cuando se transfieren archivos entre sitios, Dreamweaver crea
automáticamente las carpetas necesarias si aún no existen en un sitio. También se
pueden sincronizar los archivos entre los sitios local y remoto; si es necesario,
Dreamweaver copia los archivos en ambos sentidos y elimina los no deseados.
UTILIZACIÓN DEL PANEL ARCHIVOS
El panel Archivos permite visualizar archivos y carpetas, saber si están asociados a un
sitio de Dreamweaver y realizar operaciones estándar de mantenimiento de archivos,
como abrir y mover archivos.
Nota: En versiones anteriores de Dreamweaver, el panel Archivos se denominaba panel
Sitio. Puede desplazar el panel archivos como desee y definir sus preferencias. Utilice
este panel para realizar las siguientes operaciones:
• Acceder a sitios, a un servidor y a unidades locales
• Visualizar archivos y carpetas
• Administrar archivos y carpetas en el panel Archivos
• Utilizar un mapa visual del sitio
SINCRONIZACIÓN DE LOS ARCHIVOS DE LOS SITIOS LOCAL Y REMOTO
Después de crear archivos en los sitios local y remoto, puede sincronizar los archivos de
ambos sitios.
Nota: Si el sitio remoto es un servidor FTP (en lugar de un servidor de red), utilice FTP
para sincronizar los archivos.
Antes de sincronizar los sitios, puede verificar qué archivos desea colocar, obtener,
eliminar u omitir. Dreamweaver
también confirma los archivos que se han actualizado después de completar la
sincronización.
ACTIVOS
Puede utilizar Adobe® Dreamweaver® CS3 para realizar un seguimiento y obtener vistas
previas de activos almacenados en el sitio, como imágenes, películas, colores, scripts y
vínculos. Además, puede arrastrar un activo para insertarlo directamente en una página
del documento actual.
Los activos pueden obtenerse de distintas fuentes. Por ejemplo, puede crear activos en
una aplicación como Adobe® Fireworks® o Adobe® Flash®, se los puede proporcionar un
compañero, los puede copiar de un CD de ilustraciones o copiarlos de un sitio Web de
gráficos.
Dreamweaver también proporciona acceso a dos tipos de activos especiales: las
bibliotecas y las plantillas. Ambos son
activos vinculados: al editar un elemento de biblioteca o una plantilla, Dreamweaver
actualiza todos los documentos que lo utilizan. Los elementos de biblioteca suelen
representar pequeños activos de diseño, como el logotipo o el copyright de un sitio. Para
controlar áreas de diseño de mayor tamaño, utilice una plantilla.
ELEMENTOS DE BIBLIOTECA
Una biblioteca es un archivo especial de Dreamweaver que contiene un conjunto de
activos individuales o copias de activos que puede colocar en las páginas Web. Los
activos de una biblioteca se denominan elementos de biblioteca. Entre los elementos
que puede almacenar en una biblioteca se encuentran imágenes, tablas, sonidos y
archivos Flash. Puede actualizar automáticamente todas las páginas que utilizan un
elemento de biblioteca cada vez que modifique el elemento.
Utilice el panel Activos (Ventana > Activos) para administrar los activos del sitio actual. En
el panel Activos se muestran los activos del sitio asociados al documento activo en la
ventana de documento.
Nota: Deberá definir un sitio local antes de ver los activos en el panel Activos.
El panel Activos ofrece dos formas de ver los activos:
LISTA SITIO Enumera todos los activos del sitio, incluidos los colores y los URL que se
utilizan en los documentos del sitio.
LISTA FAVORITOS Enumera únicamente los activos que haya elegido de forma explícita.
ADMINISTRACIÓN DE LOS ACTIVOS
FAVORITOS
La lista completa de todos los activos
reconocidos puede resultar poco
manejable en el caso de sitios grandes.
Puede añadir activos usados a menudo a la
lista Favoritos, agrupar activos
relacionados, asignarles alias para
recordar su función y localizarlos
rápidamente en el panel Activos.
ADICIÓN O ELIMINACIÓN DE ACTIVOS
FAVORITOS
Los activos se pueden añadir a la lista
Favoritos del panel Activos de diversas
formas.
Para añadir un color o un URL a la lista
Favoritos se requiere un paso adicional. No
se pueden añadir colores o URL nuevosa la
lista Sitio, pues ésta contiene únicamente
los activos que ya se están usando en el
sitio.
ADMINISTRACIÓN DE LOS ACTIVOS
FAVORITOS
La lista completa de todos los activos
reconocidos puede resultar poco
manejable en el caso de sitios grandes.
Puede añadir activos usados a menudo a la
lista Favoritos, agrupar activos
relacionados, asignarles alias para
recordar su función y localizarlos
rápidamente en el panel Activos.
ADICIÓN O ELIMINACIÓN DE ACTIVOS
FAVORITOS
Los activos se pueden añadir a la lista
Favoritos del panel Activos de diversas
formas.
Para añadir un color o un URL a la lista
Favoritos se requiere un paso adicional. No
se pueden añadir colores o URL nuevos a
la lista Sitio, pues ésta contiene
únicamente los activos que ya se están
usando en el sitio.
Adición de activos a la lista Favoritos
Siga uno de estos procedimientos:
• Seleccione uno o varios activos de la lista Sitio del panel Activos y, seguidamente,
haga clic en el botón Añadir a favoritos .
• Seleccione uno o más activos en la lista Sitio del panel Activos, haga clic con el botón
derecho (Windows) o mantenga presionada la tecla Control y haga clic (Macintosh) y
elija Añadir a Favoritos.
• Seleccione uno o más archivos del panel Archivos, haga clic con el botón derecho
(Windows) o mantenga presionada la tecla Control y haga clic (Macintosh) y elija Añadir
a Favoritos. Dreamweaver omite los archivos que no correspondan a una categoría del
panel Activos.
• Haga clic con el botón derecho (Windows) o mantenga presionada la tecla Control y
haga clic (Macintosh) en un elemento en la vista Diseño de la ventana de documento y
elija el comando del menú contextual para añadir el elemento a una categoría
Favoritos.
El menú contextual para texto contiene Añadir a colores favoritos o Añadir a URL
favoritos, en función de si el texto tiene un vínculo o no. Sólo puede añadir aquellos
elementos que coinciden con una de las categorías del panel Activos
ELIMINACIÓN DE ACTIVOS DE LA LISTA FAVORITOS
1 En el panel Activos, seleccione la opción Favoritos que
hallará en la parte superior del panel.
2 Seleccione uno o varios activos (o una carpeta) en la lista
Favoritos.
3 Haga clic en el botón Quitar de favoritos.
Los activos se eliminarán de la lista Favoritos, pero no de la
lista Sitio. Si elimina una carpeta Favoritos, se eliminarán
tanto la carpeta como su contenido
AGRUPACIÓN DE ACTIVOS EN UNA CARPETA FAVORITOS
Al colocar un activo en una carpeta Favoritos, no cambia la
ubicación del archivo del activo en el disco.
1 En el panel Activos, seleccione la opción Favoritos que
hallará en la parte superior del panel.
2 Haga clic en el botón Nueva carpeta de favoritos .
3 Escriba un nombre para la carpeta y presione la tecla Intro
(Windows) o Retorno (Macintosh).
4 Arrastre los activos a la carpeta
ACERCA DEL PANEL ESTILOS CSS
El panel Estilos CSS permite supervisar las reglas y
propiedades CSS que afectan al elemento de página
seleccionado (modo Actual) o todas las reglas y propiedades
que afectan al documento (modo Todo). Un botón situado
en la parte superior del panel permite cambiar entre estos
dos modos. El panel Estilos CSS también le permite
modificar propiedades CSS tanto enmodo Todo como en
modo Actual.
EL PANEL ESTILOS CSS EN MODO TODO
En modo Todo, el panel Estilos CSS muestra tres secciones: un panel
denominado Todas las reglas arriba y un panel denominado Propiedades
abajo. El panel Todas las reglas muestra una lista de reglas definidas en el
documento actual, así como las reglas definidas en las hojas de estilo
adjuntas al documento actual. El panel Propiedades le permite editar
propiedades CSS para cualquier regla seleccionada en el panel Todas las
reglas.
Un diseño de página CSS utiliza el formato de hojas de estilos en cascada, en
lugar de las tablas o marcos HTML tradicionales, para organizar el contenido
de un sitio Web. El elemento básico del diseño CSS es la etiqueta div, una
etiqueta HTML que, en la mayoría de los casos, actúa como contenedor de
texto, imágenes y otros elementos de página. Cuando crea un diseño CSS,
coloca etiquetas div en la página, añade contenido a las mismas y las sitúa en
distintos lugares. A diferencia de las celdas de tabla, que sólo pueden situarse
en algún lugar dentro de las filas y columnas de la tabla, las etiquetas div
aparecen en cualquier lugar de una página Web. Puede situar etiquetas div
de forma absoluta (especificando las coordenadas x e y) o de forma relativa
(especificando su distancia con respecto a otros elementos de la página). La
creación de diseños CSS desde cero puede ser una tarea difícil debido a la
gran cantidad de formas de hacerlo que existen. Puede crear un diseño CSS
sencillo de dos columnas estableciendo elementos flotantes, márgenes,
rellenos y otras propiedades CSS mediante un número casi infinito de
combinaciones. Además, el problema de la reproducción en distintos
navegadores hace que determinados diseños CSS se muestren correctamente
en algunos navegadores y no en otros. Dreamweaver facilita la creación de
páginas con diseños CSS con más de 30 diseños predefinidos que funcionan
en distintos navegadores. La utilización de los diseños CSS predefinidos que
vienen con Dreamweaver es la forma más fácil de crear una página con un
diseño CSS, pero también puede crear diseños CSS mediante los elementos
con posición absoluta (elementos PA) de Dreamweaver. En Dreamweaver, un
elemento PA es un elemento de página HTML (en concreto, una etiqueta div
o cualquier otra etiqueta) que tiene una posición absoluta asignada. Sin
embargo, la limitación de los elementos PA de Dreamweaver radica
precisamente en que tienen una posición absoluta, lo que hace que sus
posiciones nunca se ajusten a la página en función del tamaño del navegador
Puede crear diseños de página insertando manualmente etiquetas div y
aplicando a éstas estilos de posición CSS.
Una etiqueta div es una etiqueta que define las divisiones lógicas existentes
en el contenido de una página Web. Puede utilizar etiquetas div para centrar
bloques de contenido, crear efectos de columna y crear diferentes áreas de
color, entre otras posibilidades. Si no está familiarizado con la utilización de
etiquetas div y de hojas de estilos en cascada (CSS) para crear páginas Web,
puede crear un diseño CSS basado en uno de los diseños predefinidos que se
suministran con Dreamweaver. Si no se siente cómodo utilizando código CSS
pero sí con el uso de tablas, también puede probar a utilizar tablas.
Nota: Dreamweaver trata todas las etiquetas div con posición absoluta como
elementos PA (elementos con posición absoluta) aunque no haya creado
dichas etiquetas div con la herramienta de dibujo de Div PA
Una plantilla es un tipo especial 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.
Las plantillas permiten a los autores controlar qué elementos de la página
pueden editar los usuarios de la plantilla (como los redactores, los
diseñadores gráficos y otros desarrolladores Web). El autor de una plantilla
puede incluir varios tipos de regiones de plantilla en un documento
UNA REGIÓN EDITABLE
Una región no bloqueada de un
documento basado en plantilla, es decir,
una sección que el usuario de la plantilla
puede editar. El autor de una plantilla
puede especificar cualquier área de la
plantilla como editable. Para que una
plantilla sea efectiva, deberá contener al
menos una región editable. En caso
contrario, las páginas basadas en la
plantilla no se podrán editar.
UNA REGIÓN REPETIDA
Una sección del diseño del documento
que se establece de forma que el usuario
de la plantilla pueda añadir o eliminar
copias de la región en un documento
basado en la plantilla según resulte
oportuno. Por ejemplo, puede definir que
una fila de una tabla se repita. Las
secciones repetidas son editables para que
el usuario de la plantilla pueda Guía del
usuario
UNA REGIÓN OPCIONAL
Una sección de la plantilla en la que hay
contenido (como texto o una imagen) que
puede aparecer o no en un documento. En
la página basada en la plantilla, el usuario
de la plantilla suele controlar si el contenido
se mostrará
UN ATRIBUTO DE ETIQUETA EDITABLE
Permite desbloquear un atributo de
etiqueta de una plantilla de modo que el
atributo pueda editarse en una página
basada en plantilla. Por ejemplo, puede
“bloquear” qué imagen aparece en el
documento, pero dejar que el usuario de la
plantilla establezca alineación izquierda,
derecha o central.
En la vista Diseño, las regiones editables aparecen en la ventana de
documento rodeadas por contornos rectangulares del color de resaltado
predefinido. En la esquina superior izquierda de cada región aparece una
pequeña ficha, en la que se muestra el nombre de la región.
Puede identificar un archivo de plantilla observando la barra de título de
la ventana de documento. La barra de título de un archivo de plantilla
contiene la palabra <<Plantilla>> y la extensión del archivo es .dwt.
En la vista Diseño, las regiones editables de un documento basado en una plantilla
aparecen en la ventana de documento rodeadas por contornos rectangulares de
un color de resaltado predefinido. En la esquina superior izquierda de cada región
aparece una pequeña ficha, en la que se muestra el nombre de la región.
Además de los contornos de las regiones editables, toda la página aparece rodeada
por un contorno de otro color, con una ficha en la esquina superior derecha en la
que figura el nombre de la plantilla en la que se basa el documento. Este
rectángulo resaltado le recuerda que el documento está basado en una plantilla y
que no se puede cambiar nada que esté fuera de las regiones editables.
En la vista Código, las regiones editables de un documento derivado de una
plantilla aparecen en un color distinto del código existente en las regiones no
editables. Puede realizar cambios en el código que está en las regiones editables o
en los parámetros editables, pero no puede introducir nada en las regiones
bloqueadas El código HTML para una región editable tendría el siguiente aspecto:
<body bgcolor="#FFFFFF" leftmargin="0">
<table width="75%" border="1" cellspacing="0" cellpadding="0">
<tr bgcolor="#333366">
<td>Name</td>
<td><font color="#FFFFFF">Address</font></td>
<td><font color="#FFFFFF">Telephone Number</font></td>
</tr>
<!-- InstanceBeginEditable name="LocationList" -->
<tr>
<td>Enter name</td>
<td>Enter Address</td>
<td>Enter Telephone</td>
</tr>
<!-- InstanceEndEditable -->
</table>
</body>
.
Puede crear una plantilla a partir de un documento existente (por
ejemplo, un documento HTML, Macromedia ColdFusion o Microsoft
Active Server Pages) o a partir de un documento nuevo.
Una vez creada la plantilla, 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. Puede almacenar información adicional
sobre una plantilla (como el nombre de su autor, la fecha en que se
modificó por última vez o la explicación de algunas decisiones sobre su
diseño) en un archivo de Design Notes para la plantilla. Los documentos
basados en plantilla no heredan los archivos Design Notes de la plantilla.
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 Archivo > Guardar como plantilla.
• En la categoría Común de la barra Insertar, haga clic en el botón Plantillas y, a
continuación, seleccione Crear plantilla.
Nota: A menos que anteriormente haya seleccionado No volver a mostrar este
mensaje, recibirá una advertencia que indica que el documento que está
guardando no contiene regiones editables. Haga clic en Aceptar para guardar el
documento como plantilla o en Cancelar para cerrar el cuadro de diálogo sin crear
una 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 cuadro de
texto 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.
Nota: No saque las plantillas de la carpeta Templates ni guarde en ella archivos que
no sean plantillas. Tampoco debe sacar la carpeta Templates de su carpeta raíz
local. Si lo hace se producirán errores en las rutas de las plantillas
1 En el panel Activos (Ventana > Activos), seleccione la categoría Plantillas
situada en la parte izquierda del panel .
2 Haga clic en el botón Nueva plantilla que se encuentra en la parte
inferior del panel Activos . Se añadirá una plantilla nueva sin título a la
lista de plantillas del panel Activos.
3 Con la plantilla aún seleccionada, escriba un nombre y presione Intro
(Windows) o Retorno (Macintosh).
Dreamweaver crea una plantilla en blanco en el panel Activos y la carpeta
Templates.