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.