Introduccin a Dreamweaver MX 2004

Macromedia Dreamweaver MX 2004 es una completa herramienta de diseo Web utilizada

tanto por diseadores Web principiantes como profesionales. A continuacin se indican
algunas de las potentes caractersticas de Dreamweaver MX 2004.

CARACTERSTICA BENEFICIOS

Herramientas de diseo para
el aspecto artstico

Mejorar la experiencia del usuario final, crear sitios
basados en los estndares con CSS, y ahorrar tiempo con
la edicin de grficos en Dreamweaver
Integracin poderosa y
abierta.
Trabajar en un entorno abierto, incorpora archivos
externos y cdigo, y aumentar la integracin con las otras
herramientas de Macromedia Studio MX 2004
Diseo y entorno de
desarrollo racionalizado
Gestionar mejor las funciones bsicas, escribir cdigo
ms eficientemente, y encontrar las funciones ms rpido.

Aspectos bsicos de la interfaz de Dreamweaver

Cuando se inicia Dreamweaver por primera vez, se puede elegir el espacio de trabajo que se
desea utilizar en funcin del sistema operativo instalado en el equipo. En esta seccin se
describe el modo de configurar Dreamweaver MX para su uso en el desarrollo visual de
sitios Web.
Inicio de Dreamweaver
Cuando se instala Dreamweaver MX en equipos con sistemas operativos Microsoft
Windows, pueden elegirse estas opciones de formato para iniciarlo:
Diseador: Un espacio de trabajo todo-en-uno; con los paneles agrupados y anclados en la
derecha de la interfaz de trabajo, y con la vista de diseo como modo de vista inicial.
Codificador: Un espacio de trabajo con los paneles agrupados y anclados en la izquierda
de la interfaz de Dreamweaver, y con la vista de cdigo como modo de vista inicial..


Configuracin del espacio de trabajo en Windows
Nota: Para cambiar un espacio de trabajo despus de haberlo elegido, seleccione Men
Edicin >Preferencias y haga clic en Cambiar espacio de trabajo en la categora General.
En Macintosh slo est disponible un espacio de trabajo, por lo que no aparece este cuadro
de dilogo.

Pgina de Inicio
Cuando ejecuta Dreamweaver MX 2004, por defecto, muestra siempre la Pgina de Inicio.
Desde esta pgina, puede abrir elementos recientes con los que estuvo trabajando, crear
nuevas pginas, crear nuevos sitios, y crear elementos desde los ejemplos. Puede tomar una
visita rpida por la aplicacin y realizar un tutorial.
Puede desactivar la pgina de Inicio activando el casillero No volver a mostrar este
mensaje. En caso contrario, siempre que no tenga un archivo abierto, Dreamweaver
mostrar esta pgina.

Pgina de Inicio de Dreamweaver
Espacio de Trabajo de Diseador en Windows
En el espacio de trabajo para diseadores, todas las ventanas y paneles estn integradas
dentro de una ventana de aplicacin grande.



Espacio de Trabajo para Diseadores Solo en Windows
Elemento de la
interfaz
Descripcin
Barra Insertar Proporciona botones para insertar objetos en los documentos. El men
Insertar contiene los mismos objetos que la barra
Barra de
herramientas
Documento
Contiene botones y mens emergentes que proporcionan vistas a la
ventana de documento, adems de operaciones comunes, como obtener
una vista previa en un navegador.
Ventana del
Documento
Aparece al abrir una pgina nueva. Es la zona en la que usted trabaja
para disear su pgina
Grupos de
paneles
Conjuntos de paneles agrupados juntos y con un mismo encabezado.
Panel Archivos Muestra y permite gestionar loss archivos que forman parte de su sitio.
Funciona tambien de forma parecida al Explorador de Windows o al
Finder (Macintosh).
Inspector de
Propiedades
Permite ver y cambiar una variedad de propiedades en el objeto
seleccionado actualmente.
Selector de
etiquetas
Se localiza en la barra de de estado; parte inferior de la Ventana de
documento, y muestra las etiquetas HTML que preceden a la seleccin
actual. Puede hacer clic sobre una etiqueta para seleccionarla y
seleccionar tambin todos sus contenidos.

Espacio de Trabajo en Macintosh
En Macintosh, la interfaz tiene los mismos elementos, pero la disposicin es distinta. El
grupo de paneles no est integrado dentro de una ventana de aplicacin sencilla y grande.
Puede mover los grupos de paneles, la barra Insertar, el panel Archivos o el inspector de
propiedades a cualquier sitio de la pantalla. La interfaz inicial se parece a la que se muestra
a continuacin:

Creacin de un Sitio Web

Antes de comenzar a crear pginas Web, debera tener alguna idea de su contenido. El
desarrollo de pginas Web es similar al diseo de materiales impresos: en primer lugar se
desarrolla el concepto. Debe preguntarse o preguntar a su cliente algunas cuestiones
bsicas:
Por qu se necesita el sitio Web?
Qu intenta comunicar?
Quines son los visitantes potenciales de las pginas?
Qu desea que se lleven los visitantes tras la visita?

Tenga en cuenta la probabilidad de que los usuarios sean muy sofisticados, lo cual indicar
tambin la probabilidad de que dispongan de los navegadores ms recientes y de los
ltimos complementos. La pregunta relacionada con el navegador podra determinar si se
pueden utilizar hojas de estilos CSS o capas al crear las pginas.
Tambin debe desarrollar un esquema del sitio. Este esquema es similar al guin de un
proyecto multimedia o de una pelcula, y proporciona una idea del mbito del proyecto y
un punto de inicio para configurar la estructura de archivos necesaria. Recopile el texto y
los grficos para las pginas Web y ya estar listo para comenzar a utilizar Dreamweaver
MX y crear un sitio a partir de todas esas ideas.
Proceso de Desarrollo
El proceso de creacin de pginas Web incluye:
1. Crear una nueva pgina utilizando una pgina en blanco o usando una plantilla existente
2. Asignar un ttulo a la pgina.
3. Colocar texto, grficos, y vnculos dentro de la pgina.
4. Guardar la pgina.
5. Realizar una vista previa de la pgina en un navegador Web.

Crear una nueva pgina HTML
Para crear un Nuevo documento haga clic en HTML en la columna Crear Nuevo de la
Pgina de Inicio de Dreamweaver. Se abrir un documento HTML en blanco. Si la pgina
de Inicio de Dreamweaver no est visible o si tiene otro documento abierto, entonces elija
Men Archivo Nuevo o haga clic en la barra de herramientas estndar. Se le presentar un
cuadro de dilogo de Nuevo Documento, que le permite crear pginas en blanco o basadas
en elementos existentes.
La columna del medio en la pestaa General de este cuadro de dilogo cambia dependiendo
de lo seleccionado en la columna Categora. Por ejemplo, si selecciona Pgina Bsica como
Categora, la columna del medio muestra HTML, Plantilla HTML, y ms.
En este curso solo aprender a crear pginas bsicas HTML y pginas HTML usando
plantillas. .

Cuadro de Dilogo Nuevo Documento
Preferencias del Nuevo Documento
Las preferencias se pueden establecer mediante Men Edicin Preferencias (Windows o
Macintosh OS 9) o mediante Men Dreamweaver Preferencias (Macintosh OS X). En el
cuadro de dilogo Preferencias, seleccione Nuevo documento en la lista Categora situada a
la izquierda.
Existen tres opciones de preferencias que tal vez decida utilizar cuando cree nuevos
documentos:
Elija el tipo de documento predeterminado para nuevos documentos, por ejemplo, utilizar
una pgina HTML para las pginas Web estticas.
Omita el cuadro de dilogo Nuevo documento cuando utilice los mtodos abreviados de
teclado Control+N (Windows) o Comando+N (Macintosh)..
Hacer el documento acorde al estndar XHTML. XHTML (Extensible Hypertext Markup
Language) es la versin siguiente al HTML 4. Es un nuevo estndar del lenguaje HTML
que lo hace compatible con datos XML. El XHTML es un lenguaje ms estricto y por ello
asegura un cdigo HTML ms limpio. Ms an, el tamao de archivo del navegador puede
ser minimizado.


Preferencias de Nuevo Documento
Aadiendo un ttulo a la pgina
Agregue un ttulo a cada documento HTML. El ttulo, que se utiliza principalmente para
identificar el documento, se muestra en la barra de ttulo del navegador y como nombre del
marcador. Elija una frase corta que describa el objetivo del documento. El ttulo puede
tener cualquier longitud, pero puede recortarlo si no cabe en la barra de ttulo del
navegador. Dreamweaver utiliza Documento sin ttulo como texto predeterminado.
Introduzca el ttulo de la pgina en la barra de herramientas Documento. Para cambiar el
ttulo del documento:
1. Seleccione Documento sin ttulo en el cuadro de texto Ttulo y escriba el nombre de la
pgina.
2. Presione Intro (Windows) o Retorno (Macintosh), o bien haga clic en el documento
cuando haya terminado.

El ttulo que introduzca para el documento aparece en la barra de ttulo del documento
junto al nombre del archivo.
Nota: Si no ve la barra de herramientas, elija Men Ver Barras de herramientas
Documento

Caja de Texto Ttulo en la Ventana del Documento
Nota: Si la barra de ttulo del documento (o la barra de ttulo de Dreamweaver si el
documento est maximizado en Windows) indica Documento sin ttulo (nombre de
archivo.htm), no le ha asignado un ttulo al documento. Tambin ver Documento sin
ttulo en el rea de ttulo de la barra de herramientas Documento.
Cuando se inserta un ttulo a la pgina este se sita este ttulo entre las etiquetas
<title></title>.

Usando Vistas de Desarrollo
Dreamweaver tiene tres modos de vista para crear sus pginas
Vista de Diseo
Vista de Cdigo
Vista Dividir

La vista de Diseo le permite crear sus pginas Web visualmente, y la vista de Cdigo le
permite ver el HTML generado y modificarlo manualmente. La vista dividir le permite ver
juntos la vista de diseo y la vista de Cdigo simultneamente
Por ejemplo cuando le da un ttulo a su pgina en la barra de herramientas del documento,
ese texto es situado entre las etiquetas HTML <title></title>. Puede comprobar esto en la
ventana de Cdigo.
Puede elegir la vista deseada hacienda clic en los botones de Vista de la barra de
herramientas del documento.

Botones de Vista en la Barra de Herramientas del Documento

Nota: Para moverse con rapidez entre las vistas de Cdigo y Diseo presione Control +
guin (-) (Windows) o Comando + guin (-) (Macintosh).
Guardando las pginas
Guarde la pgina en blanco antes de proceder al desarrollo. De este modo, cuando importe
grficos u otros medios a la pgina, todas las referencias se crearn correctamente.

Como los equipos Unix distinguen entre maysculas y minsculas, es mejor utilizar
nombres en minscula para los archivos. Estas son algunas otras reglas que hay que tener
en cuenta:
No utilizar espacios en los nombres de archivos. Utilizar el guin bajo o el carcter guin
para simular un espacio que separa palabras
Use letras y nmeros, pero nunca caracteres especiales.
Comience el nombre de sus archivos con una letra, nunca con un nmero.

Estas mismas reglas tambin se aplican a los nombres de las carpetas. Adems, cree
nombres de carpetas cortos. Recuerde que el nombre de las carpetas se convierte en parte
del URL que los usuarios escriben para tener acceso a la pgina.
Para guardar los archivos, lleve a cabo una de estas operaciones:
Seleccione Archivo Guardar.

Utilice el mtodo abreviado de teclado para guardar un archivo: Control+S (Windows) o
Comando+S (Macintosh).
Haga clic en Guardar en la barra de herramientas Estndar.


Guardar archivos usando la barra de herramientas Estndar
Nota: Si no ve la barra de herramientas Estndar, elija Men Ver Barras de herramientas
Estndar.
Pginas Principales
Los sitios Web presentan el concepto de pgina principal. Una pgina principal es donde
todos los usuarios inician su recorrido por el sitio Web. Estas pginas predeterminadas no
tienen que ser especificadas especficamente en el URL, ya que los servidores Web las
detectan y muestran automticamente cuando se encuentran en el directorio principal del
sitio Web.
Los nombres de estas pginas iniciales varan de un servidor Web a otro. A continuacin
se incluyen algunos nombres de archivos habituales:
index.htm default.htm home.htm
index.html default.html home.html

Vista previa de las pginas
Cuando desarrolle las pginas Web, visualcelas en un navegador o, mejor an, en varios
navegadores. Dreamweaver tiene mtodos abreviados de teclado para visualizar las pginas
en dos navegadores distintos, denominados navegador principal y secundario.
Existen tres modos de seleccionar los navegadores para realizar la vista previa de sus
pginas:
Seleccione Archivo Vista Previa en el Navegador Editar Lista de Navegadores.
Haga clic en Vista previa en Explorador (el icono de globo terrqueo) de la barra de
herramientas Documento y, a continuacin, elija Editar lista de navegadores..
Elija Edicin Preferencias o Dreamweaver Preferencias en Macintosh OS X, y
seleccione Vista en Navegador en la lista de categoras de la izquierda.


Categora Vista Previa en Navegador en Preferencias
Archivos Temporales
Una preferencia para la vista previa de sus pginas es hacerlo usando archivos temporales.
Cuando utiliza esta opcin, Dreamweaver crear un archivo Nuevo y temporal cada vez que
realice la vista previa de sus pginas. Si no activa esta opcin, necesitar guardar sus
pginas cada vez que quiera realizar una vista previa de stas.
Cuando usted aade un navegador, puede especificar que este sea el navegador principal o
el secundario.
Cuando presiona en su teclado F12 su pgina se mostrar en el navegador designado
como principal..
Cuando presiona en su teclado Ctrl+F12 (Window) o Command+F12 (Macintosh), su
pgina se mostrar en el navegador designado como secundario.


Cuadro de dilogo Editar Navegador

Configurando las propiedades del documento

Las propiedades del documento son unos ajustes que se aplican en conjunto a la pgina. Por
ejemplo, el color de fondo de la pgina es uno de los que puede configurar para su pgina.
Para realizar los cambios a las propiedades de su pgina, elija Men Modificar
Propiedades de la Pgina.
Color de Fondo
El color de fondo por defecto de las pginas en Dreamweaver es el blanco. Puede cambiar
fcilmente el color de fondo de una pgina usando una paleta de colores preestablecida
conocida como la paleta Web-segura (Web-Safe o Web216). La paleta de colores Web-
segura contiene 216 colores que son visualizados correctamente en la mayor parte de los
navegadores.
Seleccione Aspecto en la lista de Categoras y despus haga clic en la caja de color de
fondo dentro del cuadro de dilogo Propiedades de la Pgina. Mueva el puntero con forma
de cuentagotas sobre las muestras de colores, y entonces realice clic para seleccionar el
color. Tambin puede mover el cuentagotas sobre un color de una imagen para seleccionar
ese color.

Paleta de color para el color de fondo
Color de texto predeterminado
Cuando usted cambia el color de fondo, puede tambin necesitar cambiar el color de texto
que se va a mostrar. Por ejemplo, no podr ver texto de color negro, que es el valor
predeterminado, si tambin selecciona el color de fondo de su pgina como negro.
Haga Clic en la caja Color del Texto para cambiar el color de texto predeterminado. Si
aplica un color de texto sobre la pgina, ste desplazar al color predeterminado.
Imagen de fondo
Una imagen de fondo suele ser un pequeo grfico que decora como un mosaico detrs
del contenido de sus pginas, mediante la repeticin de este a lo largo y ancho de la ventana
del navegador.
Seleccione el botn Examinar (Windows) o Elegir (Macintosh) que esta a la derecha del
cuadro de texto Imagen de Fondo y localice la imagen que usted necesite usar para el
fondo..
Nota: Puede configurar conjuntamente el color de fondo y la imagen de fondo para su
pgina. El color se mostrar mientras la imagen se descarga. Una vez descargada la imagen,
esta se superpone al color de fondo.

Resumen
Dreamweaver es una herramienta de diseo visual para el desarrollo de pginas.
En Windows, hay dos diferentes espacios de trabajo para el desarrollo que puede elegir
cuando inicie por primera vez Dreamweaver, que son: Espacio de Trabajo Diseador y
Espacio de Trabajo Codificador.
Antes de comenzar a crear pginas Web, cree un sitio local. Un sitio local es el directorio
raz de todos los archivos pertenecientes a un sitio Web .
Puede disear sus pginas en Vista de Diseo, manipular el cdigo HTML en la Vista de
Cdigo, y ver conjuntamente Diseo y Cdigo en la Vista Dividir..
Titule y guarde sus pginas inmediatamente.
Configure los navegadores para vista previa de modo que pueda utilizar F12 y
Control+F12 (Windows) o Comando+F12 (Macintosh) para obtener la vista previa de las
pginas a medida que se desarrollan.
Cambie las propiedades de la pgina para especificar un color de fono y una imagen de
fondo.

Adicin de contenidos a un sitio
Adicin de contenidos

Como diseador Web, una de sus tareas principales consiste en introducir texto en una
pgina y aplicarle formato para que sea legible para los usuarios. Despus tendr que
modificarlo a medida que cambie el contenido. Existen varios modos de aadir texto a la
pgina:
Escrbalo como lo hara en un procesador de textos
Cpielo y pguelo desde un documento de texto existente
Abra un archivo de texto directamente desde Dreamweaver.
Importar contenido de Microsoft Word
Importando archivos de texto
El contenido que recibe un diseador Web puede llegar en varios formatos. Por ejemplo,
en un archivo de texto normal (.txt) creado en el Bloc de notas (Windows) o en TextEdit
(Macintosh). Los archivos de texto se abren en la vista de cdigo en Dreamweaver. A
continuacin, debe copiar el texto en el portapapeles y despus pegarlo en su documento en
la vista de diseo.
Importar Texto
Existen varias formas de importar archivos de texto en su pgina. Usted puede:
Arrastrarlo desde el panel Archivos y sultelo en su pgina (slo en Windows con
Microsoft Word instalado)
Abrir el archivo de texto, copiarlo y pegarlo en su pgina en la vista de Diseo.

Cuando usted abre un archivo de texto, abra el archivo en vista de Cdigo. Puede usar
copiar/pegar para copiar los contenidos del archivo de texto, volver a la pgina Web en
vista de diseo y pegar el texto.
Puede utilizar los siguientes mtodos abreviados de teclado, para seleccionar, copiar y
pegar:

Accin Windows Macintosh
Seleccionar todo Ctrl-A Command-A
Copy Ctrl-C Command-C
Paste Ctrl-V Command-V

Importar contenido de Microsoft Word y Excel
Con Dreamweaver MX 2004, puede copiar contenido de Microsoft Word y Excel
directamente al portapapeles y despus pegue el contenido dentro de Dreamweaver.
Dreamweaver procesa la informacin para visualizarlo lo ms parecido como sea posible al
formato original. Las hojas de Excel son copiadas en tablas formateadas.
En Windows, si tiene instalados en su sistema Microsoft Word o Microsoft Excel, puede
tambin importar archivos de Word o Excel directamente dentro de Dreamweaver.
Los pasos para importar un archivo de Word o Excel a una pgina Web nueva o una
existente son:
1. Seleccione Archivo Importar Documento de Word/Excel.
2. En el cuadro de dilogo Abrir, elija el documento Word o Excel y despus realice clic en
Abrir.

Nota: Los submens Importar Documento de Word/Excel no estn habilitados si usted no
tiene Word o Excel instalados y no aparecen en sistemas Macintosh.
Limpieza de HTML de Microsoft Word
Microsoft Word le permite convertir un documento en un formato HTML al Guardarlo
como Pgina Web (.htm, .html).
Microsoft Word usa un HTML no-estndar en la pgina resultante. Puede utilizar
Dreamweaver para limpiar el HTML y as eliminar etiquetas especficas de Word.
Para limpiar HTML de Word, elija Men Comandos Limpiar HTML de Word.
El cuadro de dilogo Limpiar HTML de Word tiene dos pestaas, Bsico y Detallada.
Dreamweaver intenta determinar que versin de Microsoft Word fue usada para crear el
HTML. Asegrese de que esta la versin correcta en el men emergente.

Clean Up Word HTML dialog box
Por lo general, necesitar usar todas estas opciones como predeterminadas, entonces haga
clic en Aceptar para procesar el documento. Una lista con todo lo que fue eliminado de su
documento ser mostrada si la opcin Mostrar Registro al Terminar esta activada.
Note: Cuando utiliza la caracterstica de importacin de documentos de Word, disponible
en Windows, Dreamweaver realiza para usted la limpieza del HTML de Word.

Controlando la Estructura del Documento

Una vez que ha colocado el texto en la pgina, necesita utilizar ms tiempo para estructurar
la informacin. Puede estructurar el contenido usando:
Encabezados, para agrupar la informacin de forma lgica
Prrafos, para organizar la informacin bajo los encabezados.
Saltos de lnea, para mantener informacin relacionada en proximidad
Listas, para agrupar informacin dentro de listas con vietas o numeradas.
Reglas Horizontales, para dividir la informacin visualmente
Espacios Indivisibles, para ayudar a separar informacin con los espacios

Encabezados
Los encabezados se utilizan para separar las secciones principales del contenido, y permitir
al lector encontrar la informacin que busca. En HTML hay seis niveles de encabezado,
cada uno con un tamao distinto para distinguirlo en la pgina. Los distintos tamaos de la
fuente para los encabezados vienen determinados por el navegador, pero siempre oscilarn
entre el mayor (Encabezado 1) hasta el menor (Encabezado 6). Por lo general, los
encabezados se muestran en negrita y tienen un espacio de lnea incorporado tras el
encabezado.

Seis niveles de encabezados
Buen uso de los encabezados
Es recomendable el uso de los encabezados en orden, comenzando con un encabezado 1 y
movindonos al siguiente (Encabezado 2) para otros encabezados anidados dentro del tipo
1 y continuar as en orden. No se salte ningn encabezado si necesita un contenido bien
estructurado.
Nota: Para cambiar la fuente y el tamao del encabezado, aplique un estilo a esa etiqueta de
encabezado, mejor que elegir niveles de encabezados aleatorios. Los Estilos se tratarn en
una unidad posterior de este curso.
Utilizando el inspector de propiedades
Para aadir un encabezado a una lnea de texto, seleccione el texto y despus el nivel de
encabezado en el men emergente Formato del inspector de propiedades.

Men emergente Formato
No es posible aplicar un encabezado a una sola palabra o frase de un bloque. Por ello es
posible colocar el punto de insercin de texto en cualquier lugar del prrafo, ya que no tiene
que seleccionar todo el bloque.
Cuando se crea un encabezado se rodea al texto afectado con las etiquetas de encabezado
HTML que van desde: <h1></h1> hasta <h6></h6>.
Prrafos
Cada vez que presiona Intro (Windows) o Retorno (Macintosh) se crea un nuevo prrafo.
Los prrafos se distinguen por una cantidad fija de espacio por encima y por debajo del
texto. Cuando se muestra un prrafo en el navegador, el texto se ajusta en funcin del
tamao de la ventana del navegador. A medida que el usuario aumenta o disminuye el
tamao de la ventana, el texto vuelve a ajustarse al tamao de la ventana.

Prrafos en la pgina
Utilizando el inspector de propiedades
Para dar formato al texto como un prrafo, elija Prrafo en el men emergente Formato del
inspector de propiedades.

Formato de parrafo
Cuando se crean prrafos, Dreamweaver MX rodea el texto con etiquetas HTML de
prrafo: <p></p>.
Saltos de Lnea
Puede utilizar un salto de lnea para forzar un salto de lnea "duro" dentro del bloque de
texto. A diferencia de un prrafo el salto de lnea inserta una menor cantidad de espaciado
entre las lneas. Sin embargo, el salto de lnea es til para mantener cercana la informacin
relacionada y controlar el posicionamiento de la informacin en lneas distintas. Resulta
til, por ejemplo, para visualizar direcciones, lneas de cdigo, versos, etc.

Espaciado con saltos de lnea
Puede crear un salto de lnea de distintos modos:
Presione Mays.+Intro (Windows) o Mays.+Return (Macintosh).
Elija Men Insertar HTML Caracteres especiales Salto de Lnea.
Seleccione la categora Texto en la barra Insertar, haga clic en el men Caracteres y elija el
salto de lnea en el men emergente.


Salto de lnea en la barra insertar
Para borrar un salto de lnea en el texto, realice alguno de los siguientes mtodos:
Coloque la barra de insercin al final de la lnea y pulse Supr (Windows) o Del
(Macintosh).
Coloque la barra de insercin al principio de la lnea siguiente y pulse Retroceso
(Windows) o Eliminar (Macintosh).

La etiqueta HTML de un salto de lnea es <br>.
Alinear prrafos
Puede situar el cursor de su ratn en cualquier lugar dentro de un prrafo y alinear el
prrafo usando una de las siguientes opciones:
Alinear a la Izquierda (predeterminado)
Alinear al Centro
Alinear a la Derecha
Justificar

Elija el botn de alineacin en el Inspector de Propiedades..

Opciones para alinear

Creacin de Listas
Puede utilizar tres tipos distintos de listas en HTML:
Listas sin ordenar
Listas ordenadas
Listas de definicin

Listas sin ordenar
Las listas sin ordenar suelen ser llamadas listas con vietas, como la que se muestra a
continuacin.

Lista sin ordenar
Cada tem de la lista necesita estar en un prrafo separado para formatear la lista
apropiadamente. Para crear una lista sin ordenar, seleccione el texto a formatear, y realice
alguno de los siguientes pasos:
Elegir Men Texto Lista Lista sin Ordenar
Haga clic en el botn Lista sin Ordenar (parece una lista con vietas) en el Inspector de
propiedades.


Botn Lista sin Ordenar
Si esta insertando texto en una lista, presione el botn Intro(Windows) o Return
(Macintosh) para obtener otro tem de lista. Presione Intro (Windows) o Return
(Macintosh) dos veces para salir de la lista.
Para eliminar la lista sin ordenar del texto, seleccione el texto y despus elija Texto Lista
Ninguna, o vuelva a hacer clic en el botn Lista sin ordenar del Inspector de Propiedades.
Cambiando las propiedades de la lista
Es posible aplicar dos estilos de vieta diferentes a la lista sin ordenar:
Vieta (un crculo relleno)
Vieta cuadrada (un cuadrado relleno)

Para cambiar el estilo:
Site el punto de insercin en una lnea de la lista..
Haga clic en el botn Elemento de lista del inspector de propiedades.


Botn Elemento de lista
Nota: Si el botn Elemento de lista no est visible, haga clic en la flecha de ampliacin,
situada en la esquina inferior derecha del inspector de propiedades. Si el botn Elemento
de lista est atenuado, es porque ha seleccionado varias lneas en la lista.
Elija el estilo que necesita utilizar de Men emergente de Estilo en el cuadro de dilogo
Propiedades de Lista.

Propiedades de la Lista con Vietas
Al crear una lista sin ordenar se crea un conjunto de etiquetas que rodean la lista y cada uno
de los elementos de la lista: <ul><li>Elemento de la lista 1</li><li>Elemento de la lista
2</li> </ul>

Listas Ordenadas
Las listas ordenadas permiten numerar los elementos. Por ejemplo, se usara una lista
ordenada para las instrucciones paso a paso que debe seguir el usuario para llevar a cabo
una tarea. Se pueden utilizar nmeros o letras para indicar cada elemento de la lista.

Lista ordenada
Para crear una lista ordenada, seleccione el texto al que desea aplicar el formato y despus
lleve a cabo una de estas operaciones:
Elija Men Texto Lista Lista Ordenada.
Haga clic en Lista Ordenada del Inspector de Propiedades.


Botn Lista Ordenada
Para quitar la lista sin ordenar del texto, seleccione el texto y elija Men Texto Lista
Ninguno, o haga clic otra vez en el botn Lista ordenada en el inspector de propiedades.
Cambiar las propiedades de lista
Es posible aplicar cinco estilos distintos de numeracin a la lista ordenada:
Numeracin rabe (1, 2, 3) que es el estilo predeterminado
Nmeros romanos en minscula (i, ii, iii)
Nmeros romanos en mayscula (I, II, III)
Alfabeto en minscula (a, b, c)
Alfabeto en mayscula (A, B, C)



Para cambiar el estilo:
1. Site el punto de insercin en una lnea de la lista.
2. Haga clic en el botn Elemento de lista del inspector de propiedades.
3. En el men emergente Estilo del cuadro de dilogo Propiedades de lista, elija el estilo
que desee utilizar.


Propiedades de lista
HTML El aspecto de las etiquetas HTML de una lista ordenada es similar al de las listas sin
ordenar: <ol><li>Elemento de lista 1</li><li>Elemento de lista 2</li> </ol>
Listas de definicin
Una lista de definiciones consta de una serie de trminos y sus definiciones. No hay ningn
carcter inicial como en los tipos de listas anteriores. La palabra o el trmino que se va a
definir est justificado a la izquierda; la definicin est sangrada y en la siguiente lnea.
Para que funcione este formato, cada trmino y su definicin deben estar en un prrafo
independiente.

Lista de Definicin
Para crear una lista de definiciones, seleccione el trmino y la definicin y elija Texto Lista
Lista de definicin o bien, en la categora Texto de la barra Insertar, haga clic en Lista de
definicin.
Cuando se crea una lista de definiciones, se crea un conjunto de etiquetas para la lista, el
trmino y la definicin: <dl><dt>Este es el t&eacute;rmino</dt><dd>Esta es su
definici&oacute;n</dd> </dl>
Listas anidadas
Las listas se pueden anidar unas dentro de otras. Se puede utilizar el mismo tipo de lista, o
bien combinar una lista ordenada con otra sin ordenar. El botn Aplicar sangra al texto,
cuando se utiliza en una lista, crea automticamente una lista anidada. Se le aplica sangra
a los elementos seleccionados y muestran un tipo distinto de vieta.
Si el tipo de vieta es, por ejemplo, un crculo, la vieta anidada cambia a un cuadrado.
Puede cambiar el tipo de vieta en la lista anidada haciendo clic en el botn Elemento de
Lista del Inspector de Propiedades.
.

Listas anidadas
Sugerencias sobre listas
Para cambiar una lista con vietas a una lista numerada o viceversa, seleccione toda la
lista y despus aplique el otro formato de lista.
Para convertir una lista en texto normal, seleccione la lista y aplique de nuevo el tipo de
lista. Funciona como un conmutador para desactivar el formato de la lista.
Los elementos de lista estn separados de forma predeterminada por un slo espacio. Si
desea que el espacio entre las lneas sea mayor, inserte un salto de lnea al final de cada
lnea de la lista.

Regla Horizontal en una pgina
Para aadir una regla horizontal a la pgina, lleve a cabo una de estas operaciones:
Elija Men Insertar HTML Regla Horizontal
En la categora HTML de la barra Insertar, seleccione Regla horizontal


Regla Horizontal en la Barra Insertar
Utilizando el Inspector de propiedades
Para cambiar las propiedades de la regla horizontal, seleccinela y despus cambie las
opciones en el inspector de propiedades.

Propiedades de la Regla Horizontal
La siguiente tabla describe las opciones disponibles en las reglas horizontales.

Opciones Valor
Anchura
(An)

La anchura de la regla expresada en pxeles o como porcentaje de la ventana
del navegador.
Altura (Al) La altura (tamao o grosor) de la regla en pxeles.
Alinear

La ubicacin de la regla en la pgina. Las opciones de alineacin son:
Izquierda (la predeterminada), Centro o Derecha.
Clase Asignar un estilo de tipo clase CSS a la regla.
Sombreado Crea un aspecto tridimensional de la regla. Cuando se desactiva, la regla
aparece slida.

Una regla horizontal en HTML se crea mediante la etiqueta <hr>.
Espacio indivisible
Cuando los representa un navegador, mltiples espacios se condensan en un slo espacio.
Si desea introducir ms de un espacio, debe utilizar un espacio indivisible.
Hay dos modos de insertar un espacio indivisible:
Utilice el mtodo abreviado de teclado: Control+Mays+Espacio (Windows) u
Opcin+Espacio (Macintosh).
Elija Men Insertar Caracteres especiales Espacio indivisible.

Opcin de Multiples Espacios en Preferencias
Puede modificar sus preferencias para admitir mltiples espacios mientras escribe. Elija
Men Edicin Preferencias o Dreamweaver Preferencias (Macintosh OS X) y, en la
categora General del cuadro de dilogo Preferencias, seleccione Permitir mltiples
espacios consecutivos. Dreamweaver MX inserta un espacio indivisible cada vez que se
presiona la barra espaciadora.

Opcin de Mltiples espacios en Preferencias

Aadiendo Caracteres Especiales

Cuando se trabaja en Dreamweaver MX, por lo general usted escribe mediante el teclado.
Sin embargo, a veces se necesitan caracteres a los que no se tiene un acceso directo desde
el teclado o que no se pueden insertar en el documento como caracteres literales porque el
navegador los tratara errneamente como parte del cdigo HTML. Estos caracteres se
conocen como caracteres especiales.
Puede insertar caracteres especiales de tres modos:
Elija Men Insertar HTML Caracteres especiales y seleccione el carcter de la lista.
Seleccione la categora Texto de la barra Insertar y despus seleccione el carcter del
men emergente de caracteres.
Para otros caracteres especiales, seleccione Men Insertar HTML Caracteres especiales
Otros. En el cuadro de dilogo Insertar Otros Caracteres Especiales, haga clic en el carcter
deseado y despus en Aceptar.


Cuadro de dilogo Insertar otro carcter
Hay distintos cdigos para cada carcter especial, pero todos ellos comienzan con un signo
("&") y terminan con un punto y coma (";"). Por ejemplo, el cdigo para un espacio
indivisible es &nbsp;
Usando el Editor Rpido de Etiquetas
El Editor Rpido de Etiquetas (Quick Tag Editor, en ingls) se encuentra en el Inspector de
Propiedades. Utilizando este editor, puede insertar o editar etiquetas HTML en su pgina
mientras se encuentra en la vista de diseo. Esta caracterstica es muy til cuando es un
experto en cdigo HTML, y es utilizado para realizar la insercin rpida de etiquetas en el
cdigo.
Si necesita rodear un texto con una etiqueta, primero seleccione el texto y despus haga clic
en el botn del Editor Rpido de Etiquetas que se encuentra en el Inspector de Propiedades.

Editor rpido de etiquetas
Escriba la etiqueta HTML que necesita insertar dentro de signos menor que y mayor
que (< >) mostrados en el Editor Rpido.

Entrada en el editor rpido de etiquetas
Presione Intro o Return para colocar la etiqueta en la pgina. Si desea ver la etiqueta, tendr
que seleccionar la vista Dividir o Cdigo.

Insertando la fecha y la hora
Cuando se aade una fecha a una pgina, los lectores tienen la sensacin de que la
informacin a la que acceden es actual. Aadir una fecha, que se actualice cuando se
guarde el archivo, es muy sencillo.
Haga clic en Fecha en la categora Comn de la barra Insertar, o elija Men Insertar
Fecha.

Fecha y hora en la barra Insertar
Elija el formato deseado para la fecha y active Actualizar automticamente al guardar si
desea que la fecha se actualice en la pgina cada vez que guarde el documento.

Cuadro de dilogo Insertar Fecha
Si selecciona Actualizar automticamente al guardar, puede editar el formato de fecha
despus de insertarlo en el documento haciendo clic en el texto formateado y, a
continuacin, en Editar formato de fecha en el inspector de propiedades.
Nota: Cuando se selecciona Actualizar automticamente al guardar se inserta un
comentario en el cdigo. Este comentario es una etiqueta interna que hace que
Dreamweaver inserte una nueva fecha y hora al guardar el documento.




Aplicar Formato al Texto
Formateando Texto

Dreamweaver le permite fcilmente cambiar la fuente tipogrfica, su tamao, su color, y
otros atributos del texto en sus pginas. Realizando estos cambios en el texto resalta
contenido importante, permite a los usuarios revisar una pgina para encontrar la
informacin que necesitan, y hace la pgina ms atractiva.
Consideraciones Web
Considere lo siguiente:
Los usuarios son libres de cambiar el tamao de la ventana del navegador o cambiar el
tamao de la fuente y el color del texto.
Existe una diferencia significativa entre los tamaos de fuente en Windows y Macintosh.
Macintosh muestran el texto un 75 por ciento ms pequeo que el mismo tamao de texto
para Windows.

El contenido publicado, ya sea impreso o sobre una pgina Web, mostrar un estilo
consistente en cada pgina. El soporte de texto para la Web es muy primitivo en
comparacin a los documentos impresos. Sin embargo, puede obtener sustancialmente ms
control sobre el formato de sus pginas Web usando Hojas de Estilo en Cascada (CSS).
Formato de Bloques frente a Formato de Caracteres
Puede aplicar cambios al aspecto predeterminado del texto en sus pginas ya sea a bloques
enteros de contenido o a caracteres individuales y palabras. Un bloque es un grupo de
contenido como un prrafo o una lista.
Existen ciertas opciones de formato, como la alineacin del texto, que deben trabajar en
bloques enteros. .
Con el formato de caracteres puede aplicar un tratamiento distinto a la fuente a letras
individuales o a palabras, como puede ser convertirlas en negritas o cambiar la fuente.

Cambiando el Tipo de Fuente Tipogrfica
La fuente predeterminada para texto en las pginas esta configurada en el navegador del
usuario. Cambiar la fuente es aplicar formato de caracteres, que significa que puede
cambiar la fuente para la pgina entera o para el texto seleccionado en la pgina. Sin
embargo, la fuente que elija debe estar instalada en el sistema de los usuarios. No crea que
todas las Fuentes estn instaladas en otros sistemas.
Para cambiar la fuente del texto seleccionado, elija la fuente del men emergente de
Fuentes en el Inspector de Propiedades. El men emergente contiene una lista de
combinaciones de fuentes.

Men emergente de Fuentes
Estas combinaciones de Fuentes, se usan del modo siguiente:
Si la primera no esta disponible en el sistema del usuario, el navegador intenta usar la
segunda, y si no la encuentra lo intentar con la tercera.
Si ninguna de las fuentes estn disponibles en el sistema del usuario, el texto se muestra
en la fuente predeterminada del navegador.

Para eliminar un tipo de fuente del texto, seleccione el texto y despus elija Fuente
Predeterminada en el men emergente de Fuente del Inspector de Propiedades.
Cambiar una fuente genera un estilo CSS. Ver estos estilos en la seccin siguiente de esta
unidad.
Crear su propio conjunto de fuentes
Puede crear su propio conjunto de Fuentes eligiendo Editar Lista de Fuentes en el men
emergente de fuente del Inspector del Inspector de Propiedades. Generalmente, necesita
elegir dos o tres fuentes para sus conjuntos de Fuentes.
Como ultima eleccin en su lista, elija un tipo de fuente genrica: cursive, fantasy,
monospace, sans-serif, or serif, para el caso de que el usuario no tenga ninguna de las
fuentes especificadas instaladas en su sistema..

Cuadro de dilogo Editar Lista de Fuentes
Cambiando el tamao de la fuente
El tamao predeterminado para el texto esta determinado por el navegador. Puede cambiar
el tamao de la fuente del men emergente de Tamao en el Inspector de Propiedades.

Opciones de tamao de fuente

El tamao predeterminado para el texto esta determinado por el navegador. Puede cambiar el
tamao de la fuente del men emergente de Tamao en el Inspector de Propiedades.



Opciones de tamao de fuente

Cambiando el color de la fuente
Puede cambiar fcilmente el color de la fuente para el texto. Seleccione el texto y entonces
realice alguna de estas operaciones:
Haga clic en la caja de color de texto en el Inspector de Propiedades. En la paleta
emergente, utilice el puntero cuentagotas para seleccionar el color deseado.
Mueva el mencionado puntero con cuentagotas sobre un grfico o texto para capturar el
color de ese elemento.
Escriba el cdigo de color (en hexadecimal) en el campo de texto destinado al color de
texto.


Paleta emergente para el color de texto
Cambiando el estilo de texto
Puede aplicar negritas y cursivas en Dreamweaver para aadir nfasis o contraste al texto
de su documento.
Para aadir negritas o cursiva, seleccione el texto, y haga clic en los botones con la letra B
o I del Inspector de propiedades. Para eliminar ese estilo, haga clic en el botn de Nuevo.

Botones de negrita y cursiva
Cuando se aplican negritas, Dreamweaver rodea el texto con las etiquetas
<strong></strong>,y en el caso de cursivas con <em> </em>. Puede seleccionar una opcin
en la categora general de las Preferencias para usar en cambio <b></b> y <i></i>
respectivamente..
Cambiando la Alineacin del Texto
La alineacin del texto en Dreamweaver funciona igual que en los procesadores de texto.
Puede alinear un bloque de texto a la izquierda (predeterminado), centro, derecha, o
justificar el texto. Para alinear el texto, haga clic en el Inspector de Propiedades.

Botones de alineacin de texto
Cuando se aplica alineacin al texto se asigna un atributo a las etiquetas de prrafo
(<p></p>) o de encabezados (<hn></hn>). En caso contrario, Dreamweaver inserta una
etiqueta <div align=xxx>.

Introduccin a las Hojas de Estilo en Cascada

La especificacin Hojas de Estilo en Cascada (siglas CSS en ingles de Cascading Style
Sheets) para HTML, le permite definir el modo en el que ser mostrado el contenido de su
pgina. CSS ofrece ms flexibilidad y control de la apariencia de la pgina que el HTML
por s solo.
Por defecto, Dreamweaver utiliza Hojas de Estilo en Cascada (CSS) para formatear texto.
Cualquiera de los estilos que aplique utilizando el Inspector de Propiedades o los elementos
de men incrustan reglas de estilo CSS dentro de la etiqueta <head> de su documento.
Configuracin CSS
Para activar la configuracin CSS predeterminada, Elija Men Edicin Preferencias
(Windows) o Dreamweaver Preferencias (Macintosh) y seleccione la categora General,
Verifique que la opcin Utilizar CSS en lugar de etiquetas HTML esta activada.

Categora General en el cuadro de dilogo de Preferencias
Trminos CSS
Una regla de estilo, que es un grupo de propiedades de formato identificadas por un solo
nombre, controla el formato de un bloque de texto. Incluye la fuente, el tamao de texto, el
color de texto, el interlineado, entre otras opciones.
Una Hoja de Estilo es un grupo de estilos que definen el modo en el que se ven sus
pginas Web.

La ventaja de usar hojas de estilo es que cambiando un atributo de ese estilo cambia el
formato de inmediato a todo el texto controlado por ese estilo. Las Hojas de Estilo pueden
ser tambin ser usadas para afectar la posicin de la las imgenes y otros objetos HTML.
Localizacin de la definicin de los estilos CSS
Hay tres modos en que puede definir los estilos:
Utilizando una hoja de estilo aparte que esta vinculada una hoja de estilos externa.
Insertando directamente el estilo dentro de las pginas una hoja de estilo interna.
Aplicando un estilo directamente al fragmento de texto estilo en lnea.

Existen raras ocasiones en las que se usa estilos en lnea, y no se recomienda su uso.
Trataremos solo las hojas de estilos externas e internas.
Beneficios
Los beneficios del CSS incluyen:
Mantiene un aspecto consistente en todas las pginas a lo largo del sitio o seccin.
Permite aplicar tipos de formatos a prrafos y texto que no se puede hacer usando HTML.
Mantiene el diseo y la estructura de contenido separadas..Esto hace ms fcil la
actualizacin del sitio.
Hace ms fcil la reutilizacin del contenido en un contexto distinto, ofreciendo una hoja
de estilo alternativa.
Hace ms fcil mantener el sitio conservando todas las especificaciones de formato en un
archivo CSS.
Cumple con el estndar XHTML

Limitaciones
Las hojas de estilo funcionan en navegadores posteriores a la versin 4.0. Microsoft
Internet Explorer 3.0 reconoce algunos atributos de estilo. El soporte de las CSS varan
entre los Navegadores. Las versiones antiguas ignoran las hojas de estilo.
Fuentes y Estilos de Clase
Cuando utiliza el Inspector de propiedades para cambiar su texto y la opcin para uso de
CSS esta seleccionada en las preferencias. Dreamweaver crea una regla de estilo CSS.
Por ejemplo, al usar el Inspector de Propiedades para cambiar la fuente y el color de texto
genera un estilo que puede ver en el panel de estilos CSS.
Para acceder al panel de estilos CSS, elija Men Ventana Estilos CSS.

Los cambios de Fuente crean reglas de Estilos CSS
La regla de estilo resultante es un estilo de clase. Cuando esta regla slo se encuentra
dentro del documento, se llama estilo incrustado o interno.

En cualquier ocasin que aplique formato de fuente al texto, Dreamweaver crea una
etiqueta <style> en la seccin head del documento y aplica la regla de estilo al texto
rodeando y usando las etiquetas <span></span> para formato de caracteres, o utiliza el
atributo class de la etiqueta correspondiente al bloque, para formatear el bloque.
Nombrar Estilos de Clase
Cuando modifica texto usando el Inspector de Propiedades, Dreamweaver crea un estilo de
clase y le asigna nombres estilo1, .estilo2, etc. El nombre comienza por un punto que se
identifica como estilo de clase.
Puede necesitar renombrar el estilo para que tenga un nombre ms significativo. Por
ejemplo, si utiliza el estilo para llamar la atencin con el nombre de su empresa, puede
darle el nombre de rtulo empresa para poder identificarlo y usarlo a lo largo de su pgina o
pginas.
Como regla general, es mejor que asigne nombres a sus clases que sean acordes a su
propsito mejor que a su apariencia. La apariencia puede cambiar en el tiempo, mientras
que el propsito de la clase suele ser permanecer constante.
Para renombrar el estilo de clase:
Encuentre el estilo en el Panel de Estilos CSS
Haga clic con botn derecho (Windows) o Control-click (Macintosh)
Elija Cambiar el Nombre en el men contextual.


Opcin Cambiar nombre en Estilos CSS
Aplicando Estilos de Clase
Para asegurarse que todo su texto esta igualmente formateado, puede aplicar estilos en el
Inspector de Propiedades. Seleccione el texto, y entonces elija el estilo que necesite en el
men emergente Estilo. Si despus decide cambiar la definicin de ese estilo, ese formato
ser aplicado a todo texto que usa ese estilo.

Aplicar un estilo personalizado

Creando Estilos

Puede tambin crear sus propios estilos de clase usando el Panel de Estilos CSS. Haciendo
esto podemos acceder a opciones que no estn disponibles en el Inspector de Propiedades.
Puede crear un Nuevo estilo para el documento usando una de estas tres formas:
Seleccione Texto Estilos CSS Nuevo
Seleccione Men Ventana Estilos CSS para abrir el panel de estilos CSS. Haga clic en el
botn Nuevo Estilo CSS en el panel o elija Nuevo en el men de Opciones del Panel.


Panel de Estilos CSS
En el Inspector de Propiedades, elija Administrar Estilos del men emergente de Estilo y
despus haga clic en Nuevo para crear un Estilo Nuevo.


Administrar Estilos en el Inspector de Propiedades
Nuevos Estilos CSS
El cuadro de dilogo Nuevo Estilo CSS la permite crear tres tipos de Estilos:
Clase, usado cuando se necesita definir un estilo y aplicarlo a cualquier bloque de texto.
Etiqueta, usado cuando se necesita redefinir el modo en el que se muestra el texto que se
encuentra en una etiqueta HTML concreta.
Avanzada, usado cuando se necesita definir el formato de una combinacin de etiquetas o
para selectores contextuales.

Para crear un estilo de clase, asignar un nombre, seleccionar Clase como Tipo de Selector,
y seleccionar Solo este Documento para indicar que es un documento incrustado.

Creando un Estilo de Clase
Nota: Los nombres de Clase deben empezar con un punto y pueden combinar cualquier
combinacin de letras y nmeros. Si no comienza su estilo de clase con un periodo,
Dreamweaver lo aadir por usted.
Definir un nuevo estilo CSS
En el cuadro de dilogo Definicin del Estilo CSS, puede configurar varias opciones de
formato. En este ejemplo, el color de fondo para el texto se establece como amarillo
(#FFFF33).

Definicin de Estilo de Clase
El cuadro de dilogo Definicin de Estilo CSS muestra una variedad de opciones que
varan dependiendo de la Categora seleccionada. Se muestra a continuacin una breve
descripcin de las opciones en cada categora.

Categora Descripcin
Tipo Atributos de tipo de letra tales como la fuente, el tamao y el color.
Fondo Color o imagen de fondo de la etiqueta, adems de otras propiedades para el
fondo.
Bloque Alineamiento y sangra del texto, adems de otras propiedades para bloques
de texto.
Cuadro Mrgenes y relleno alrededor del texto.
Borde Permite establecer un borde alrededor de las etiquetas. Tenga en cuenta lo
siguiente:
Para que aparezcan los bordes, deber establecer el tamao, el color, el
ancho y el estilo de cada lado del borde que debe mostrarse.
Si desea que los bordes slo aparezcan en algunos lados, deber establecer
explcitamente el ancho con el valor cero para los lados que no deben tener
borde.

Lista Permite cambiar la vieta y su posicin. Las propiedades de lista se aplican
normalmente slo a listas y elementos de listas.
Posicin Permite establecer el lugar exacto de la pgina en el que debe aparecer el
texto. Las propiedades de colocacin son especialmente compatibles con las
capas y se utilizan normalmente con stas.
Extensiones
Salto de pgina fuerza un salto de pgina al imprimir, delante o detrs del
objeto controlado por el estilo. Esta opcin no es compatible con la versin
4.0 de ningn navegador. .
Cursor cambia la imagen del puntero cuando ste se encuentra sobre el
objeto controlado por el estilo. Slo Internet Explorer reconoce este
atributo.
Filtro aplica efectos especiales al objeto controlado por el estilo, incluidas
las opciones Blur (borroso) e Invertir. Elija un efecto en el men emergente.
Slo Internet Explorer reconoce este atributo.


Una vez que ha definido el estilo de clase, puede aplicarlo a cualquier seleccin de texto en
su documento.

Creando Selectores de Etiqueta
Los selectores de Etiqueta le permiten aplicar formato a cualquier etiqueta HTML de un
modo consistente. Por ejemplo, puede crear una regla para todos los encabezados 3 (H3) y
ese formato es automticamente aplicado a todos Encabezado 3 que exista en su
documento.
Se comienza abriendo el cuadro de dilogo Nuevo Estilo CSS como aprendi en la seccin
anterior, usando tanto el Inspector de Propiedades como el panel de Estilos CSS.

Nuevo Estilo CSS para H3
Elegir Etiqueta como Tipo de Selector. Despus elija una Etiqueta del men emergente de
Etiqueta o escriba el nombre de la etiqueta en el campo de texto. Seleccione Solo este
Documento para crear un estilo interno o incrustado.
Una vez que haga clic en Aceptar, el cuadro de dilogo Definicin de Estilo CSS se abre.
Puede establecer el formato para esta regla de estilo.
Aplicar el estilo
La diferencia entre un estilo de clase y un estilo de etiqueta es que no es necesario que lo
aplique manualmente al texto. Una vez que ha creado la regla de estilo, todo texto que se
encuentra dentro de esa etiqueta le ser aplicado el mismo formato.
Eliminar estilos de clases CSS
Si comenz el desarrollo de su pgina utilizando el Inspector de Propiedades, ha aplicado
por tanto estilos de clase. Si ms tarde decide utilizar hacerlo a nivel de etiquetas, puede
duplicar el estilo de clase como regla de etiqueta, y despus eliminar el estilo de clase que
incrust en su pgina Dreamweaver. Podr buscar para el atributo de clase de la etiqueta
deseada y eliminarlo de la etiqueta.
Utilizando Buscar y Reemplazar, esta operacin se simplifica.
Buscando en su documento
Para buscar texto en los documentos, en la vista de diseo elija Men Edicin Buscar y
reemplazar. Si se encuentra en la vista de cdigo, haga clic con el botn derecho
(Windows) o mientras presiona Control (Macintosh) y elija Buscar y reemplazar en el
men contextual.

Cuadro de Dilogo Buscar y Reemplazar
a. Opciones de bsqueda

En el cuadro de dilogo Buscar y reemplazar, elija una opcin del men emergente Buscar
en. Las opciones de que dispone son:
Texto Seleccionado
Documento actual
Documentos Abiertos
Carpeta
Archivos Seleccionados en el Sitio
Sitio local actual completo

En el men emergente Buscar, elija el tipo de bsqueda que necesite realizar:
Cdigo fuente (para cadenas de texto concretas contenidas en el cdigo)
Texto (para cadenas de texto contenidas en la ventana de documento)
Texto (avanzado) (para texto con o sin etiqueta HTML)
Etiqueta especfica (para etiquetas HTML con determinados atributos)

Adems, existen opciones de bsqueda avanzadas para ayudarle a realizar bsquedas
complejas:
Coincidir maysculas y minsculas: limita la bsqueda a aquellas palabras en que
coincida tambin en maysculas/minsculas.
Palabra completa: Limita la bsqueda de texto para que coincida con una o ms palabras.
Ignorar espacios en blanco: Trata todos los espacios en blanco como un solo espacio
(predeterminado).
Usar expresiones regulares: proporciona modelos para describir, combinaciones de
caracteres en el texto. Deber utilizar esta opcin, por ejemplo, para seleccionar frases que
comiencen por El o valores de atributos que contengan un nmero.

Opciones de Reemplazo
Tambin posee opciones para reemplazar el elemento que esta buscando:
Aadir o cambiar texto
Aadir o cambiar un valor de un atributo
Cambiar una etiqueta por otra
Quitar una etiqueta
Eliminar una etiqueta y su contenido

Guardando sus criterios de bsqueda
Cuando establece unos complejos criterios de bsqueda y reemplazo, puede necesitar
reutilizarlos. Puede guardar estos criterios haciendo clic en el icono del disquete en el
cuadro de dilogo Buscar y Reemplazar, y despus puede recuperarlos utilizando el icono
de carpeta.

Guardar Criterios de Bsqueda

Creando Estilos Avanzados
Los Estilos Avanzados son usados para controlar las etiquetas de los siguientes modos:
Especificar el estilo para parte de un bloque texto, como puede ser la primera letra de un
prrafo.
Especificar el estilo para el texto de un cierto estado, como puede ser el hipervnculo que
ya ha sido visitado.
Cambiar el aspecto del texto controlado por una combinacin de etiquetas.

Selectores
Cuando crea un Nuevo estilo y selecciona Avanzado como Tipo de Selector, tendr que
insertar un selector. Este selector puede ser alguno de los siguientes:
Selectores de Pseudo-elementos, para redefinir la primera letra o la primera lnea de un
bloque de texto.
Selectores de Combinacin:
Selectores Contextuales, usado para que se aplique a una etiqueta que esta anidada dentro
de otra etiqueta especifica.
Selectores de Grupo, para que un grupo de etiquetas tengan el mismo estilo.
Selectores de Pseudo-clases, para redefinir el modo en que se muestran los vnculos
cuando un usuario interacta con estos.
Selectores de ID, usado para que coincida la ID con el valor de id de un elemento (#title),
que puede ser aplicado a solo uno de los elementos de una pgina (el atributo id de las
etiquetas, generalmente se usa tambin para identificar un elemento en particular y hacer
referencia a este en el lenguaje de script).

Las Pseudo-clases se tratarn en la Unidad 6: Navegando por su Sitio. Los selectores de ID
estn fuera del mbito de este curso.
Usando Selectores de Pseudo-Elementos
Puede crear los elementos first-line y first-letter escribiendo informacin apropiada en la
campo de texto del Selector CSS:

Selector Descripcin Ejemplo
{etiqueta}:first-
line
Controla el formato de la primera lnea de texto para la
etiqueta especfica.

p:first-line
{etiqueta}:first-
letter
Controla el formato de la primera letra de texto para la
etiqueta especfica.

p:first-
letter

Nota: Los pseudo-elementos first-line y first-letter no son ampliamente soportado como las
pseudo-clases de vnculos y deben ser usadas con precaucin. Microsoft Internet Explorer
5.5+, Netscape 6+, y Opera 6+ soportan todos estos tipos de selectores, pero con algunas
variaciones en el su proceso para visualizado final.
Selectores de combinacin
Hay dos tipos de selectores de combinacin que puede crear escribiendo el nombre del
selector dentro del campo de texto Selector CSS:

Tipo de
Selector
Descripcin Ejemplo
Contextual Especifica una regla de estilo que se
aplica a una etiqueta solo cuando
aparece en el contexto de (anidada
dentro) de otra etiqueta especfica. Son
separadas las etiquetas por espacios
entre ellas.
En el ejemplo, la regla de estilo se
aplica solo a texto dentro de la
etiqueta <strong> que est dentro
de <p> y que a su vez este dentro
de la etiqueta <td>:
td p strong

Grupo Especifica una regla para que se aplique
a un grupo de etiquetas. Son separadas
las etiquetas por coma (,) entre ellas.
En este ejemplo, se aplica esta
regla a la etiqueta de prrafo, a las
de celda(<td>) y a los tem de
lista:
p,td,li

Nota: Usted tendr que usar selectores de grupo solo cuando se requiera que varias
etiquetas tengan exactamente el mismo estilo. CSS no permite mltiples reglas de Estilo
para una sola etiqueta HTML en unas hojas de estilo. Esta restriccin no se aplica a
selectores contextuales.

Exportar Definiciones de Estilos CSS
Ms an, todas las reglas de estilo que usted ha creado han sido incluidas en las pginas de
HTML. Los beneficios de usar CSS son an mayores cuando usted guarda que todas sus
reglas de estilo en un archivo de hojas de Estilo externo (un archivo con una extensin
.css). Usted puede vincular este archivo entonces a algunas o a todas las pginas en su
sitio.
Si ya tiene estilos definidos dentro de su pgina, Dreamweaver le permite exportar a un
archivo de Hoja de Estilos externo.
Puede exportar definiciones de estilo desde una pgina abierta usando uno de estos
mtodos:
Texto Estilos CSS Exportar
Haga clic con el botn derecho (Windows) o Control-click (Macintosh) en <estilo>del
panel Estilos CSS y elija Exportar.
Elija Exportar en el Men de Opciones del panel de Estilos CSS


Exportar en el Men de Opciones
Ser preguntado por la localizacin y el nombre del archivo .css que va a crear usted.

Adjuntando Hojas de Estilo Externas

Las Hojas de Estilo externas son archivos con la extensin .css que contienen solo reglas
de estilo. Estos archivos pueden ser creados con Dreamweaver, o puede escribir la regla de
estilo en un editor de texto. Puede adjuntar una o varias hojas de estilo a la pgina. Las
definiciones de estilo, excepto las clases, son aplicadas automticamente al documento.
Necesitar por tanto aplicar las estilos de clase o personalizados a prrafos o el texto
seleccionado.
La ventaja de utilizar hojas de estilos externas es que, si cambia una definicin de estilo en
la hoja de estilos externa, todas las pginas vinculadas a dicho archivo se actualizan para
reflejar los cambios.
Para adjuntar una hoja de estilos existente, abra la pgina a la que desea aadir la hoja de
estilos y haga clic en Adjuntar hoja de estilos, situada en la parte inferior del panel Estilos
CSS. .

Icono Adjuntar Hoja de Estilos
Tambin puede elegir Administrar hoja de estilos en el men emergente Estilos en el
Inspector de Propiedades y despus hacer clic en Adjuntar. .

Administrar Estilos en el Inspector de Propiedades
En el cuadro de dilogo Vincular hoja de estilos externa, haga clic en el botn Examinar,
localice el archivo de estilos externo y haga clic en Aceptar.

Cuadro de dilogo Vincular hoja de estilos externa
Una vez adjuntada la Hoja de estilo, ver el archivo enlistado en el panel de Estilos CSS.

Hoja de Estilos Vinculada
Vinculacin frente a Importacin
En el cuadro de dilogo Vincular hoja de estilos externa, para crear un vnculo entre el
documento y la hoja de estilo externa seleccione Vincular. Esto crea una etiqueta LINK
href en la zona head del cdigo HTML, y hace referencias a la URL donde la Hoja de
Estilos publicada esta localizada. Este mtodo es soportado por Microsoft Internet Explorer
y Netscape Navigator.
No puede usar una etiqueta LINK para aadir una referencia de una hoja de estilos a otra.
Si necesita anidar hojas de estilos, debe usar la importacin. Algunos (que no todos) los
navegadores reconocen la directiva @import dentro de las pginas (mejor que dentro de
hojas de estilos). Hay diferencias sutiles en cmo las propiedades en conflicto son resueltas
cuando se solapan las reglas que existen dentro de hojas de estilo externas con las que son
importadas a una pgina. Si lo que necesita es importar, en vez de Vincular, seleccione esta
opcin cuando Adjunte un Hoja de Estilos Externa.

Creando una nueva Hoja de Estilos
Puede crear una hoja de estilos externa desde el comienzo usando Dreamweaver, en vez de
exportar los archivos internos.

Creando una Hoja de Estilos Externa
Para crear una Hoja de Estilos externa:
1. En el cuadro de dilogo Nuevo estilo CSS, seleccione el botn de opcin Nuevo archivo
de hoja de estilos para crear una hoja de estilos externa
2. En el cuadro de dilogo Guardar archivo de hoja de estilos como, localice la carpeta en
la que desea guardar el archivo y luego escriba el nombre para el archivo de hoja de estilos
externa.
3. Haga clic en Guardar.
Nota: Dreamweaver MX aade automticamente al nombre del archivo la extensin .css,
extensin que resulta imprescindible para que la hoja de estilos funcione correctamente.

Ahora esta preparado para aadir reglas de estilos en el cuadro de dilogo Definicin de
Estilos CSS.

Cuadro de dilogo Definicin de estilos CSS

Editando Hojas de Estilos

Una vez que cree una hoja de estilos, podr aadir o cambiar estilos fcilmente. Al editar
una hoja de estilos que controla el texto de un documento o del sitio, cambia
inmediatamente el formato de todo el texto.
El panel Estilos CSS muestra los estilos actuales incrustados o vinculados al documento
actual. Puede utilizar el panel Estilos CSS para ver sus estilos y editarlos realizando una de
estas operaciones:
Haga clic con el botn derecho del ratn (Windows) o presione Control y haga clic
(Macintosh) en el estilo y elija Editar.
Seleccione el estilo y luego haga clic en el botn Editar hoja de estilos (representado por
un lpiz) situado en la parte inferior del panel Estilos CSS.

Cambie el estilo de la forma deseada en el cuadro de dilogo Definicin de estilos CSS y
haga clic en Aceptar.
Utilizando el Inspector de Etiquetas
Puede tambin utilizar el Inspector de Etiquetas para editar un estilo. Si usted hace doble
clic en un estilo del panel Estilos CSS, esa regla de estilo se muestra en el Inspector de
Etiquetas. El titulo del inspector de etiquetas se cambia a Regla etiqueta donde etiqueta
muestra el nombre de la etiqueta o clase que esta editando.
Por ejemplo, si realiza doble clic en la definicin de una etiqueta <h3> en el panel Estilos
CSS, el inspector de etiquetas puede mostrar lo siguiente:

Inspector de Etiqueta: Regla h3
Utilizando el Inspector de Etiquetas, se tiene completo control sobre cada opcin que puede
establecer para el estilo. Haga clic en la columna de la derecha para seleccionar valores
vlidos o para insertarlo manualmente.
Editando la Hoja de Estilos CSS
En lugar de editar cada estilo individualmente, puede editar la hoja de estilos. Seleccione el
nombre de la hoja de estilos (archivo .css) y luego realice una de las siguientes operaciones:
Haga clic con el botn derecho del ratn (Windows) o presione Control y haga clic
(Macintosh) en el estilo y elija Editar.
Seleccione el estilo y luego haga clic en el botn Editar hoja de estilos (representado por
un lpiz) situado en la parte inferior del panel Estilos CSS. .

El cuadro de dilogo Hoja de Estilos se abre con una lista de todas las reglas de estilo que
estn en la hoja de estilos Desde este cuadro de dilogo, usted podr:
Adjuntar una hoja de estilos
Crear un Nuevo estilo
Editar un estilo
Cambiar el nombre a un estilo
Duplicar un estilo
Eliminar un estilo


Edit Style Sheet
Una vez que finalice, sus cambios son guardados en un archivo de estilos externo.
Cualquier pgina que est vinculada con esta hoja de estilos se actualiza con estos cambios.

Editando Archivos CSS manualmente
Si est familiarizado con el formato CSS, puede abrir el archivo CSS desde el panel Sitio
para editarlo. El archivo se abre en la vista de cdigo, en la que podr realizar los cambios
que desee:

Vista de Cdigo mostrando una Hoja de Estilos externa

Orden de Cascada y Herencia de Estilos
Las reglas de estilos CSS pueden aplicarse al contenido de una pgina de tres formas:
Vinculando un archivo .css independiente a la pgina un estilo externo
Incrustando una hoja de estilos en la pgina una hoja de estilos interna
Applying an inline style (class) to text on the page

El orden de los estilos en cascada determina el estilo que aparece en la pgina cuando se
aplican varias reglas de estilo.
Si tiene una hoja de estilos externa vinculada al documento, sus estilos se aplican a todo el
documento. Si hay ms de un estilo aplicado a la misma etiqueta, existe un orden para su
aplicacin.
El orden de prioridad es el siguiente:
Estilos en lnea
Estilo Interno
Estilos externos

Nota: Como ya hemos mencionado anteriormente, los estilos en lnea slo son necesarios
en raras ocasiones y no se abordan en este curso.
Ejemplo
Supongamos que, en una hoja de estilos externa vinculada a una pgina, existe la siguiente
regla para los prrafos:

p {font-family: sans-serif;
color: blue}
En la misma pgina, hay una hoja de estilos incrustada con su propia regla para los
prrafos:

p {font-size: 14pt;
color: green}
Un prrafo de la pgina tendr el siguiente estilo:
Fuente sans-serif (especificada en la hoja de estilos externa)
Tamao de fuente de 14 puntos (especificado en la hoja de estilos incrustada)
Color verde (el valor especificado en la hoja de estilos incrustada tiene prioridad sobre el
valor de la hoja de estilos externa).

Ejemplo de herencia
Supongamos que ha definido los siguientes estilos:

p {color: green;
font-weight: normal;
font-family: Arial}
em {font-weight: bold;
color: blue}
.codeRed {color: red;
font-style: italic}
Supongamos que la pgina contiene el siguiente texto y cdigo HTML :

<p>In case of emergency, <em class=codeRed>walk</em> to the nearest exit.</p>
La palabra walk se mostrar con la fuente Arial (suponiendo que el equipo cliente
disponga de dicha fuente) en negrita y cursiva, y tendr color rojo.
El motivo de que se obtenga este resultado es la herencia. La etiqueta <em> est anidada
en una etiqueta <p>, por lo que hereda las propiedades de estilo de <p>, aunque su propio
estilo puede aadirse o sustituir a los de la etiqueta <p>. (En este caso, el estilo <em>
sustituye a las propiedades de color y grosor de fuente, por lo que slo hereda la familia de
fuentes Arial).
Las clases personalizadas heredan el estilo de la etiqueta de la misma forma. En este caso,
codeRed walk hereda la propiedad de familia de fuentes de la etiqueta <p> y la propiedad
de grosor de fuente de la etiqueta <em>, pero sustituye la propiedad de color con su propio
valor y tambin aade una propiedad de estilo de fuente.
El orden de prioridad en lo que a herencia se refiere es el siguiente:
Las propiedades de clase personalizada tienen prioridad sobre las propiedades de estilo
para la etiqueta
Las propiedades de etiqueta anidada tienen prioridad sobre aqullas de la etiqueta padre

Algunas propiedades nunca se heredan. Puede consultar la Referencia CSS, incluida con
Dreamweaver, para averiguar si se hereda o no una propiedad concreta.
Nota: En la mayora de los casos, no tendr que preocuparse por la herencia o la ausencia
de sta, ya que las especificaciones CSS estn especialmente bien diseadas en este sentido:
normalmente ocurre exactamente lo que se desea que ocurra.

Grficos en Pginas Web
Los grficos le dan vida, inters y funcionalidad a las pginas Web. Existen muchos tipos,
pero hay tres tipos principales que son compatibles en la Web:
GIF
JPEG
PNG

Conseguir el tipo de grfico correcto con el tamao y resolucin apropiados es todo un arte.
Utilice grficos con cierto criterio y, cuando sea posible, elija grficos pequeos con un
nmero mnimo de colores. Los archivos de pequeo tamao mantienen el tiempo de carga
en unos valores mnimos y consiguen mantener felices a los usuarios.
GIF
El formato GIF:
Es el ms comn en la Web.
Se utilizan en imgenes de lneas y en imgenes con colores slidos.
Pueden contener zonas transparentes y se pueden utilizar para archivos de animacin.
Se guardan en modo de color de 8 bits, lo que significa que slo se pueden representar
256 colores.

JPEG
El formato JPEG:
Puede tener un nmero ilimitado de colores y est indicado para fotografas o imgenes
que utilicen gradientes de color.
Utilizan algoritmos de compresin que reducen el tamao del archivo. La calidad de las
imgenes se reduce a medida que se comprimen, y aparecen distorsionadas y
emborronadas si se comprimen demasiado. El ndice de compresin ptima para un tamao
de archivo mnimo con una aceptable degradacin de la calidad de la imagen variar de
una imagen a otra.

Por ejemplo, una foto de un cielo azul con nubes aparece posterizada cuando se guarda
como GIF. Toda la gama de colores azules sern mapeadas con muy pocos colores. El
JPEG, en cambio, guarda la imagen en un modo de 24-bits, manteniendo todos los colores.

PNG
El formato Portable Network Graphic (PNG) El formato PNG admite un nmero ilimitado
de colores. Mediante la reduccin de la profundidad del color se puede optimizar el tamao
del archivo sin degradar la calidad de la imagen. :
Se cre con fin de superar algunas de las deficiencias de los formatos GIF y JPEG.
Admite un nmero ilimitado de colores.
Se puede optimizar el tamao del archivo mediante la reduccin de la profundidad del
color sin degradar la calidad de la imagen.
Es admitido solo por los ms recientes navegadores: Internet Explorer 4 y superior, y
Netscape 6 y superior.

Macromedia Fireworks utiliza el formato PNG como formato nativo de archivo para los
grficos. Cuando se crean grficos con Fireworks, normalmente las imgenes se exportan
como JPEG o como GIF cuando se desean colocar en una pgina Web.

Colocar grficos en la pgina
Hay cuatro modos distintos de insertar imgenes en la pgina Web:
Utilizando la categora Comn en la barra Insertar.
Eligiendo Men Insertar Imagen
Arrastrar o insertar desde el panel Activos del sitio
Arrastrar imgenes desde el panel Sitio


Ubicacin de imgenes
Cuando se inserta una imagen en una pgina Web, Dreamweaver determina dnde
encontrar esa imagen cuando se solicita la pgina por medio de un servidor Web. Para
especificar su ubicacin puede usar tanto:
Ruta relativa al documento
Ruta Relativa a la raz del sitio.

Con las referencias relativas al documento, Dreamweaver construye la ruta a la imagen
basada en la ubicacin relativa del documento HTML respecto al archivo de imagen.
Con las referencias relativas a la raz del sitio, la ruta se construye hacia la imagen en
funcin de la ubicacin relativa del documento HTML con respecto a la raz del sitio.
En este curso slo se van a utilizar rutas relativas al documento para las imgenes. Guarde
su pgina Web antes de importar imgenes para que se pueda calcular una ruta relativa al
documento. Si no ha guardado la pgina, Dreamweaver MX le avisa cuando vaya a
importar una imagen y corrige el nombre de la ruta cuando guarda el archivo.
Ajustes de accesibilidad
Cuando creamos pginas con accesibilidad, necesita asociar informacin, como pueden ser
etiquetas o descripciones, con los objetos de su pgina Web para que sean accesibles por
todos los usuarios.
Puede activar un cuadro de dilogo para las imgenes en la Categora Accesibilidad de las
Preferencias.

Preferencias de Accesibilidad
Activando el casillero Imgenes, Dreamweaver le preguntar por la informacin que se
requiere por los estndares de accesibilidad para las imgenes.
Utilizando la barra Insertar
Para insertar una imagen por medio de la barra Insertar, haga clic en el lugar de la pgina
donde desea insertar la imagen. A continuacin, en la categora Comn de la barra Insertar,
haga clic en Imagen.

Insertar imagen
Tanto si utiliza la barra Insertar como si selecciona Men Insertar Imagen, se abre el
cuadro de dilogo Seleccionar origen de imagen donde puede acceder a la imagen que
desea utilizar en la pgina. Deje el valor Relativa a: en Documento (valor predeterminado)
para utilizar en la imagen una ruta relativa al documento.

Cuadro de dilogo Seleccionar origen de imagen
En este ejemplo el sistema de archivos locales contiene el archivo de imagen.
Si tiene activada la configuracin de accesibilidad, se abrir otro cuadro de dilogo para
que introduzca el Texto Alternativo y la Descripcin Larga..

Atributos de accesibilidad de la etiqueta imagen
Utilizando Activos
El panel Activos muestra distintos tipos de medios y elementos del sitio, como se muestra
en la siguiente imagen. Puede ver todos los activos del sitio desde un nico lugar y despus
aadir fcilmente el contenido a la pgina directamente desde el panel. Si no ve este panel,
elija Men Ventana Activos o presione F11.

Panel de activos mostrando las categoras
Insertando una imagen del panel de Activos
Todas las imgenes del sitio actual se muestran en la categora Imgenes de la lista Sitio del
panel Activos. Cuando selecciona una imagen en el panel, aparece una vista previa de la
misma en la parte superior del panel.
Para aadir una imagen a la pgina
1. Seleccione la vista previa de la imagen o el nombre del archivo.
2. Arrastre la imagen a la pgina o haga clic en Insertar.

Si agrega una imagen al sitio, haga clic en Actualizar lista del sitio para actualizar la
imagen en el panel Activos.
Aadiendo a imgenes favoritas
El desplazamiento por la lista de imgenes del panel Activos puede llegar a ser tedioso si su
sitio tiene muchas imgenes. Si tiene imgenes que se utilizan en todo el sitio, puede
aadirlas a la lista Favoritos para poder acceder a ellas fcilmente.
Para aadir a favoritas:
Haga clic en el panel de Archivos con el botn derecho (Windows) o mientras presiona la
tecla Control (Macintosh) y elija Aadir a imgenes favoritas en el men contextual.
Desde la lista Sitio del panel Activos, seleccione la imagen y haga clic en Aadir a
favoritos en la parte inferior derecha del panel, o bien elija Aadir a favoritos desde el
men Opciones situado en la parte superior derecha del panel Activos.


Aadir a imgenes favoritas

Utilizacin de carpetas de Favoritas
Puede organizar sus activos favoritos en carpetas para facilitar la localizacin de archivos.
Para crear una nueva carpeta Favoritos, haga clic en Favoritos en el panel Activos y
despus lleve a cabo una de estas operaciones:
En el men Opciones del panel Activos, elija Nueva carpeta de favoritos.
En la mitad inferior de la vista Favoritos, haga clic con el botn derecho del ratn
(Windows) o mientras presiona la tecla Control (Macintosh) y seleccione Nueva carpeta de
favoritos en el men contextual.

Para mover activos a una carpeta, aada primero la imagen a Favoritos y despus arrstrela
desde ah hasta una carpeta. Haga clic en el signo ms (Windows) o en el tringulo
(Macintosh) para ver el contenido de la carpeta.

Carpetas en imgenes favoritas
Aadir imgenes desde el Panel Archivos
Tambin puede arrastrar imgenes a la pgina desde el panel Sitio. Asegrese de guardar su
pgina para que se pueda calcular una ruta relativa al documento. Cuando se utiliza el panel
Sitio no aparece la vista previa de la imagen como lo hace en el panel Activos, pero puede
ver la estructura de carpetas de su sitio.

Modificando Propiedades de la Imagen
Puede modificar propiedades de una imagen para llevar a cabo lo siguiente:
Cambiar el tamao de una imagen
Ajustar texto alrededor de la imagen
Modificar el espacio y el borde de una imagen
Alinear las imgenes con el texto
Establecer texto alternativo

Cambiando el tamao de una imagen
Puede utilizar el Inspector de Propiedades para cambiar el tamao de la imagen. Cambie la
anchura (An) o altura (Al) de las imgenes utilizando la caja de texto correspondiente.
Una vez que cambie cualquiera de los valores, ya sea ancho o alto, ver una flecha circular
entre los valores An y Al en el Inspector de Propiedades. Si hace clic a este icono,
Dreamweaver restablece estos valores a los de su tamao original.
Nota: No se recomienda que cambia el tamao de las imgenes en Dreamweaver ya que
podra distorsionarlas. Si necesita cambiar el tamao, entonces utilice mejor Fireworks.

Propiedades ancho y alto de la imagen
Alineando imgenes en la pgina
Las imgenes de la pgina se pueden alinear a la izquierda (valor predeterminado), al
centro o a la derecha del mismo modo que se alinea el texto. Seleccione la imagen y haga
clic en uno de los botones de alineamiento del inspector de propiedades.

Botones de alineacin para imgenes
Nota: El texto se ajusta alrededor de las imgenes alineadas a la izquierda o a la derecha
segn se describe en la siguiente seccin, pero no alrededor de las imgenes alineadas al
centro.
Ajuste del texto alrededor de las imgenes
Para ajustar el texto alrededor de una imagen fcilmente, cambie el alineamiento de la
imagen. Las opciones para ajustar varias lneas de texto son:
Izquierda
Derecha


Men emergente alinear respecto a imagen
Cuando selecciona Derecha en el men emergente Alinear, se coloca un punto de fijacin
de imagen en el lugar donde se ha insertado la imagen. Este smbolo indica la etiqueta
HTML de la imagen.
Puede mover el punto de fijacin hasta un nuevo emplazamiento en el texto, pero el punto
debe estar situado al comienzo del prrafo para que el ajuste del texto funcione
correctamente. El texto se ajusta con la parte inferior de la imagen y despus vuelve al
margen izquierdo de la pgina.
Nota: Si no aparece el punto de fijacin, elija Ver Ayudas visuales Elementos invisibles.

Cambiando espacio y borde
Cuando se utiliza el men emergente Alinear para ajustar texto alrededor de los grficos,
tiene la opcin de ajustar tambin el espacio alrededor de la imagen. Mediante el inspector
de propiedades se pueden cambiar los siguientes atributos sobre el espaciado y el borde.

Opcin Descripcin
Espacio
V
Este parmetro indica al navegador cuntos pxeles debe dejar en el eje vertical
(superior e inferior) de la imagen.
Espacio
H
Este parmetro indica al navegador cuntos pxeles debe dejar en los lados
horizontales (izquierdo y derecho) de la imagen.
Borde El ancho en pxeles del borde que se va incluir alrededor de la imagen. El color
del borde se determina mediante el color predeterminado del texto que se
define en Propiedades de la pgina.

Otras opciones de alineacin
Cuando slo tiene una nica lnea de texto junto a una imagen, tiene varias opciones para
alinear el texto con la imagen:
Lnea de base: alinea la parte inferior de la imagen con la lnea de base de la lnea de
texto.
Superior: alinea la imagen con la parte superior del elemento ms alto de la lnea.
Medio: alinea la lnea de base de la lnea de texto con el centro de la imagen.
Inferior: idntico a Lnea de base.
Texto superior: alinea la imagen con la parte superior del texto ms alto de la lnea
(normalmente es igual a Superior, pero no siempre.
Medio absoluta: alinea el centro de la lnea texto con el centro de la imagen.
Inferior absoluta: alinea la parte inferior de la imagen con la parte inferior de la lnea de
texto.


El siguiente diagrama muestra imgenes alineadas de diversos modos.

Comparacin entre opciones de alineacin de imagen
Estableciendo el texto alternativo
El texto alternativo especifica el que aparecer en lugar de la imagen en los navegadores
que slo admiten texto o en aquellos configurados para no descargar las imgenes. En
algunos navegadores, este texto tambin aparece al situar el puntero sobre la imagen.
Seleccione la imagen y despus escriba el texto en el cuadro de texto Alt del inspector de
propiedades.

Accesibilidad
Las directrices sobre accesibilidad exigen establecer el texto Alt. para todas las imgenes y
eso es una prctica aconsejada para asegurarse de que aquellos usuarios que no puedan ver
sus imgenes por la razn que sea, tengan al menos una descripcin de esta.
Para usuarios con deficiencias visuales que usan sintetizadores de voz con navegadores que
slo admiten texto, el texto se reproduce en voz alta

Editando Imgenes
Dreamweaver le permite realizar operaciones bsicas de edicin de imagen directamente
dentro de su interfaz. Dreamweaver incluye la capacidad de autora de imagen de
Macromedia Fireworks MX 2004. Con Fireworks puede crear, editar, y animar grficos
Web usando un conjunto completo de herramientas de mapa de bits y de vectores.
Edicin de imgenes en Dreamweaver
Dreamweaver le permite realizar las siguientes operaciones de edicin bsica de imgenes
en imgenes GIF y JPEG dentro de la misma aplicacin:
Recorte permite reducir el rea de la imagen.
Nuevo muestreo de imagen aade o quita pxeles en archivos de imagen JPEG y GIF cuyo
tamao se ha cambiado a fin de que se parezcan lo mximo posible a la imagen original. Al
muestrear de nuevo una imagen, se reduce el tamao del archivo de imagen, lo cual mejora
el rendimiento de la descarga.
Brillo/Contraste modifica el contraste o el brillo de los pxeles de la imagen. Esto afecta a
los resaltados, sombras y medios tonos de la imagen. Normalmente, la funcin
Brillo/Contraste se utiliza para corregir imgenes que son demasiado oscuras o demasiado
claras.
Perfilar ajusta el enfoque de una imagen mediante el aumento del contraste de los bordes
de dentro de la imagen. Cuando se explora una imagen o se realiza una foto digital, la
accin predeterminada de la mayora del software de captura de imgenes consiste en
suavizar los bordes de los objetos que aparecen en la imagen. Esto evita que se pierdan
detalles minsculos en los pxeles de los que se componen las imgenes digitales. Sin
embargo, para mostrar estos detalles en los archivos de imagen digital, a menudo es
necesario perfilar la imagen, con lo que aumenta el contraste de los bordes y la imagen
aparece ms definida.

Todas estas opciones estn disponibles en el Inspector de Propiedades.

Opciones de edicin de imgenes en Dreamweaver

Despus de realizar cualquier cambio a la imagen, Dreamweaver le advertir en un
mensaje que se cambiar el archivo en el disco. Puede suprimir este mensaje activando la
opcin No mostrar de nuevo este mensaje.

Advertencia sobre cambios en la imagen
Edicin de Imgenes Roundtrip con Fireworks
Puede ejecutar Macromedia Fireworks MX directamente desde el inspector de propiedades
para modificar y optimizar una imagen. Esto permite utilizar controles de exportacin para
optimizar las imgenes, proporcionndoles una interactividad avanzada, y exportarlas a
Dreamweaver de nuevo. Esta funcin se conoce como edicin Roundtrip (de ida y vuelta).
Configurando preferencias de edicin
Para utilizar las funciones de edicin Roundtrip entre Fireworks y Dreamweaver, debe
tener ambas aplicaciones instaladas en su equipo, y Fireworks debe estar configurado como
su editor de imgenes predeterminado para los archivos PNG. Para comprobar si Fireworks
est configurado como el editor de imgenes de los archivos PNG, seleccione Men
Edicin Preferencias (Windows) o Dreamweaver Preferencias (Macintosh). En la lista
Categora, seleccione Tipos de archivo/editores, seleccione la extensin .png. Si no esta
establecido que su editor primario es Fireworks, modifquelo para que sea el Editor
Primario de archivos .png.

Estableciendo el editor de archivos PNG
Optimizar una imagen
Mientras trabaja con Dreamweaver MX, tal vez tenga que optimizar un grfico que haya
colocado en la pgina. Tal vez haya heredado una pgina de un colaborador con una
imagen demasiado grande o que no est optimizada correctamente.
Puede optimizar imgenes con Fireworks directamente en Dreamweaver. Haga clic en la
imagen con el botn derecho del ratn (Windows) o mientras presiona la tecla Control
(Macintosh) y seleccione Optimizar en Fireworks en el men contextual.
Si se abre el cuadro de dilogo Buscar origen, puede buscar la versin PNG original del
archivo o bien editar la existente.

Cuadro de dilogo buscar origen
Se abre Fireworks, pero en un modo especial. El cuadro de dilogo Optimizar imagen
permite cambiar el formato de la imagen, la calidad de las imgenes JPEG o la paleta de
las imgenes GIF. La imagen aparecer en la ventana de vista previa conforme modifique
los parmetros.
Cuando termine de cambiar la configuracin, haga clic en Actualizar. El archivo se exporta
y la imagen se actualiza en su pgina de Dreamweaver.

Cuadro de dilogo Optimizar Imagen
Aadiendo Pelculas de Flash
Macromedia Flash MX 2004 es una atractiva aplicacin para aadir grficos y
animaciones vectoriales a su pgina. Un grfico vectorial es el que utiliza frmulas
geomtricas para representar imgenes. Por lo general, los grficos son ms pequeos que
las imgenes de mapas de bits, por lo que se descargan rpidamente
Puede insertar pelculas Flash desde cualquiera de estos lugares:
Men o barra Insertar
Panel Activos
Panel Archivos

Coloque el cursor en el lugar de la pgina donde desea que aparezca la pelcula Flash y
utilice uno de estos mtodos para insertar la pelcula Flash en la pgina.
Barra Insertar
Haga clic en Media de la Categora Comn de la barra Insertar, y entonces elija Flash del
men emergente.

Men emergente Media en la Barra Insertar
Para hacerlo usando los mens, elija Men Insertar Media Flash.
Ambas operaciones abren el cuadro de dilogo Seleccionar archivo. En el cuadro de
dilogo Seleccionar archivo, elija el archivo de Flash con extensin .swf y, a continuacin,
haga clic en Aceptar.

Cuadro de dilogo Seleccionar Archivo
Nota: Una pelcula Flash tiene la extensin .swf (pronunciado swif) al final del nombre del
archivo. Un archivo Flash con la extensin .fla no se ha publicado en Flash y no se puede
importar en Dreamweaver.
La pelcula Flash aparece en la pgina como un cuadro de color gris. Cuando se selecciona
el marcador de posicin de Flash, el inspector de propiedades muestra los parmetros que
se pueden configurar en la pelcula. Haga clic en Reproducir en el inspector de propiedades
para reproducir la pelcula.

Reproduciendo una pelcula de Flash en la vista de diseo
Panel Activos
Seleccione el icono Flash situado a la izquierda del panel Activos. Seleccione la pelcula
Flash en la lista y despus haga clic en Insertar. Tambin puede arrastrar la pelcula Flash
desde el panel hasta la pgina.

Categora flash en el panel de activos
Panel Archivos
Para insertar una pelcula Flash desde el panel Archivos, seleccione la pelcula y arrstrela
hasta la pgina.

Pelculas Flash en el panel de archivos
Resumen

Los navegadores Web admiten dos tipos habituales de archivos de imagen: GIF y JPEG.
Los archivos PNG tambin son compatibles, pero no son tan comunes.
El formato GIF est indicado principalmente para imgenes con un uso limitado del color.
El formato JPEG puede tener colores ilimitados y est indicado principalmente para
fotografas.
Para colocar imgenes en sus pginas Web puede utilizar la barra Insertar, el panel
Activos, y puede arrastrarlas desde el panel Archivos, o bien, utilizar el men Insertar.
El inspector de propiedades permite cambiar las propiedades de la imagen relacionadas
con el alineamiento, el espaciado, el borde y el texto alternativo.
Puede editar imgenes en Fireworks desde el mismo Dreamweaver.
Macromedia Flash MX 2004 crea texto, botones y pelculas vectoriales que puede aadir
a su pgina.

Navegando por su Sitio
Entender la navegacin por un sitio
Una vez que ha determinado las metas de su sitio Web, el pblico objetivo, y las
necesidades de datos, esta listo para conceptualizar el esquema de navegacin en el sitio. La
navegacin del sitio describe cmo sus pginas Web se relacionan entre ellas la una con la
otra. Especficamente muestra como viajan los usuarios por su sitio cuando ellos realizan
clic sobre los vnculos e interactan con las interfaces de la aplicacin. La navegacin se
implementa por:
Una barra de navegacin, que puede estar hecha con texto, o imgenes que actan como
vnculos de hipertexto.
Una serie de vnculos de hipertexto incrustado en sus pginas Web.

Vnculos de hipertexto
El hipertexto ha sido el principal concepto que ha llevado a la invencin de la World Wide
Web, que no es ni ms ni menos que una ingente cantidad de contenido conectado a travs
de un gran nmero de vnculos de hipertexto. Los vnculos de hipertexto:
Se representan a menudo en una pgina mediante texto subrayado (aunque los usuarios
pueden desactivar esta opcin en sus navegadores)
Pueden llevar al usuario a otro documento dentro del mismo sitio Web o a una pgina
de otro sitio Web.
Se usan en la navegacin global del sitio, donde un conjunto vnculos son creados dentro
de una barra de navegacin.

El ejemplo de abajo muestra hipervnculos (es el texto subrayado):

Documento con vnculos
Tipos de Vnculos
Los vnculos que se utilizan en texto en grficos para navegar a otras pginas se
denominan vnculos de hipertexto. Hay varios tipos de vnculos que se pueden crear con
texto o con un grfico:
Vnculos a otras pginas dentro del mismo sitio.
Vnculos a otros sitios.
Vnculos a un lugar con nombre dentro de la misma pgina.
Vnculos para enviar un mensaje de e-mail

Vinculacin de otros archivos en su sitio
Existen varios modos de crear vnculos a documentos en el mismo sitio:
Sealando el archivo mediante el icono de sealizacin de archivos Localizando el
archivo mediante el icono de carpeta en el inspector de propiedades
Escribiendo la ruta y el nombre del archivo en el cuadro de texto Vnculo del inspector de
propiedades


Ruta de los archivos
Se puede establecer un vnculo a un archivo dentro del mismo sitio de uno de estos dos
modos:
Ruta relativa al documento.
Ruta relativa a la raz del sitio.

En este curso slo se describen las rutas relativas al documento.
Los vnculos relativos a documentos sealan desde una pgina dentro de un sitio a otra
pgina del mismo sitio. La vinculacin relativa es el mtodo ms adecuado para los
vnculos locales en la mayora de los sitios Web. Como estas pginas pueden estar en
directorios distintos, el nombre correcto de ruta relativa debe apuntar a un archivo.
Guarde siempre antes de crear una ruta relativa al documento; el nombre de la ruta no es
vlido sin un punto de inicio definitivo.
Si crea un vnculo con una ruta relativa al documento antes de guardar el documento,
Dreamweaver usar temporalmente una ruta absoluta que comienza por file:// hasta que el
archivo sea guardado. Cuando guarde su documento, Dreamweaver convertir la ruta en
una ruta relativa.
Jerarqua de carpetas relativas
La tabla siguiente muestra la nomenclatura usada para resolver una ruta en la jerarqua de
carpetas:

Nomenclatura Significado
../ Un directorio por encima del directorio actual
nombredirectorio/ Nombre del subdirectorio llamado nombredirectorio por debajo del
directorio actual

Por ejemplo, supongamos que tiene un sitio con esta estructura:

Estructura de directorios en un sitio
Para establecer un vnculo desde contents.html hasta otros archivos:
Para establecer un vnculo desde contents.html hasta hours.html, la ruta del archivo es:
hours.html.
Para establecer un vnculo con tips.html, utilice la ruta relativa: resources/tips.html.
Para establecer un vnculo con index.html, utilice la ruta relativa: ../index.html.
Para establecer un vnculo con catalog.html, utilice la ruta relativa:
../products/catalog.html.

Vinculando archivos del sitio
El panel Archivos proporciona una lista de todos los archivos del sitio y es un modo
sencillo de aadir vnculos a la pgina. En el panel Archivos se pueden ver todos los
archivos, por lo que basta con sealar el archivo que desea establecer como vnculo.
Seleccione el texto que necesita para su vnculo y despus use el icono de sealizacin de
archivos en el Inspector de Propiedades para sealar el archivo a vincular en el Panel de
Archivos.

Usando el sealizador de archivos para vincular
Nota: Si el archivo que desea para el vnculo se encuentra dentro de una carpeta del panel
Sitio, detngase sobre la carpeta hasta que se abra y despus seale el archivo.
Vinculando mediante seleccin de archivo
Otro modo de crear un vnculo es mediante el icono de carpeta del inspector de
propiedades. Seleccione el texto del documento que desea convertir en vnculo y despus
haga clic en el icono de carpeta.

Icono carpeta para vincular archivos
Nota: Tambin puede seleccionar el texto del vnculo y despus elegir Modificar Crear
vnculo. Se abre el mismo cuadro de dilogo Seleccionar archivo que cuando se hace clic
en el icono de carpeta..
En el cuadro de dilogo Seleccionar archivo, busque el archivo para el vnculo.

Seleccionando una archivo para vincularlo
Cuando se crea un vnculo a un archivo, Dreamweaver MX crea una etiqueta de punto de
fijacin:<a href="directorio_relativo/file.htm">Texto del vnculo</a>
Actualizar vnculos
Cuando se crea un vnculo a una pgina, el nombre de la ruta de ese vnculo se incrusta
en el cdigo HTML. Si sita un archivo con vnculos en otra carpeta fuera de
Dreamweaver, la ruta del vnculo puede ser distinta y el vnculo no funcionara.
Utilice el panel Archivos para mover archivos. Al mover un archivo, Dreamweaver MX
actualiza los vnculos y grficos correspondientes en la pgina para mantener la ruta
adecuada.
Si mueve los archivos con el Explorador de Windows o Finder de Macintosh,
Dreamweaver MX no tiene forma de mantener los vnculos. Tendr entonces que actualizar
esas pginas manualmente.

Nota: Dreamweaver MX tiene una utilidad Verificador de vnculos para buscar los
vnculos rotos en su documento o sitio, pero de todos modos tendr que restablecer cada
vnculo roto del documento de forma manual. La verificacin de vnculos se describe en la
Unidad 10.
Cambiando el color de los vnculos
Utilice las propiedades de la pgina para cambiar los colores predeterminados de los
vnculos. Cuando cambie los colores de los vnculos tendr que considerar lo siguiente:
No elija colores que puedan confundir a sus visitantes. Si usa el mismo color para el
vnculo normal y el vnculo visitado, sus visitantes podran pensar que ellos ya han visitado
todas las pginas de su sitio y no exploraran ms en su sitio Web.
Los colores de los vnculos deben contrastar con el color de fondo de la pgina para
preservar su legibilidad..

Elija Men Modificar Propiedades de la Pgina para cambiar los colores de los vnculos.
Haga clic la caja de color para cada tipo de vnculo y elija un color de la paleta.

Paleta de colores para los vnculos
Estados de los vnculos
Un vnculo puede tener tres estados. En la siguiente tabla se muestran tales estados. Cada
estado de vnculo tiene un color predeterminado distinto en el navegador.

Tipo de
vnculo
Descripcin
Vnculos Color inicial de un vnculo, antes de hacer clic en l. El color normal
predeterminado del navegador para los vnculos es azul.
Vnculos
Visitados
Color al que cambia el vnculo cuando el usuario hace clic en l. El color
predeterminado es prpura.
Vnculos
Activos
Color al que cambia el vnculo si un usuario mantiene presionado el botn
del ratn despus de hacer clic en l. El color predeterminado es rojo

Nota: El color del vnculo activo destacaba ms cuando se necesitaba un menor tiempo de
respuesta para indicar los vnculos en los que se haca clic. Puede que algunos navegadores
no admitan este atributo.
Utilizando selectores CSS de pseudo-clases
Cuando cambia los colores por defecto de los estados de un vnculo, Dreamweaver crea
selectores CSS de pseudo-clases. Puede modificar los colores predeterminados usando el
panel CSS. Seleccione Avanzado en el cuadro de dilogo Nuevo Estilo CSS. En el men
emergente Selector puede elegir entre los cuatro estados::
a:link
a:visited
a:hover
a:active


Opciones de vnculo
Vnculos a otros sitios Web
Para crear un vnculo mediante el inspector de propiedades, seleccione el texto o el grfico
del vnculo y despus escriba el URL o el nombre de ruta en el cuadro de texto Vnculo.
En este ejemplo, el vnculo se utiliza para conectarle a un sitio Web distinto.

URL en el campo de texto Vnculo
Recuerde que el URL en el cuadro de texto Vnculo debe comenzar por http://. Los
vnculos con sitios externos se consideran vnculos absolutos.
Una vez creado el vnculo en una pgina del sitio, estar disponible en el men emergente
Vnculo. Seleccione el texto y despus elija el vnculo en el men emergente.


Men emergente de Vnculo
Cuando se crea un vnculo a un sitio,Dreamweaver MX crea una etiqueta de punto de
fijacin: <a href="http://www.site.com">Texto del vnculo</a>
Destino de los vnculos
Cuando se establece un vnculo con una pgina, la pgina vinculada sustituye a la pgina
actual del navegador. Tal vez desee mostrar la pgina del navegador en una ubicacin o
ventana nueva. Si los vnculos externos abren una nueva ventana del navegador, la pgina
permanece en la ventana original.
Para abrir una pgina en una nueva ventana de navegador, elija _blank en el men
emergente Destino del inspector de propiedades. (Los destinos distintos a _blank slo
funcionan cuando se crean marcos en la pgina, lo cual esta fuera del mbito de este
curso).

Men emergente Destino
Nota: Tenga cuidado a la hora de aadir destinos a nuevas ventanas del navegador abiertas.
Las nuevas ventanas incrementan las necesidades de RAM del sistema del usuario a
medida que se abre cada ventana. El usuario tambin se puede confundir si la nueva
ventana se abre sobre la existente
Vnculos a anclajes con nombre
Cuando los usuarios hacen clic en un vnculo, se muestra la parte superior de la pgina
vinculada. Si un documento es extenso o tiene muchos apartados, tal vez desee crear un
vnculo que lleve al usuario a un lugar concreto del documento. As evita tener que
desplazarse por el documento. Para ello, debe crear una posicin con nombre, un anclaje
con nombre, al que pueda hacer referencia como vnculo.
Crear un anclaje con nombre
Un anclaje con nombre consta de dos partes:
Una entidad con nombre (el anclaje con nombre) en el lugar de la pgina HTML donde
desea que llegue el visitante
Un vnculo a ese anclaje con nombre.

Un anclaje se puede colocar en cualquier punto de una pgina Web. Este punto especifica el
lugar donde llevar el vnculo dentro del documento.
Coloque el punto de insercin al principio de la seccin donde desea llevar al usuario y elija
Men Insertar Anclaje con nombre, o haga clic en el botn Anclaje con nombre de la
categora Comn de la barra Insertar. Escriba el nombre de su anclaje en el campo de texto
Nombre de Anclaje del cuadro de dilogo Anclaje con nombre.

Cuadro de dilogo anclaje con nombre
Los puntos de fijacin con nombre distinguen entre maysculas y minsculas y no pueden
estar repetidos en la pgina. Los nombres slo pueden contener letras y nmeros, no se
permiten espacios ni caracteres especiales.
Nota: Si coloca un punto de fijacin al final de un encabezado, algunos navegadores (por
ejemplo, Internet Explorer en Macintosh) muestran el contenido tras el encabezado, no el
propio encabezado
Activar elementos invisibles
Los puntos de fijacin que se colocan en la pgina son elementos invisibles. Dreamweaver
MX le avisa si no tiene activados los elementos invisibles al insertar un punto de fijacin.

Advertencia sobre elementos invisibles
Nota: Si est activada la opcin para no mostrar el mensaje, no aparecer esta advertencia.
Para ver los puntos de fijacin, seleccione Men Ver Ayudas visuales Elementos
invisibles. Una vez activados los elementos invisibles, aparecer un icono de color
amarillo junto al texto elegido como punto de fijacin.

Iconos anclajes con nombre
Vinculando al anclaje con nombre
Una vez que ha aadido un punto de fijacin a la pgina Web, puede utilizar ese punto de
fijacin en un vnculo. Seleccione el texto que desea establecer como vnculo. En el cuadro
de texto Vnculo del inspector de propiedades, introduzca un signo de nmero y despus el
nombre del punto de fijacin. No aada espacios detrs del signo de nmero.

Vincular a anclaje con nombre
Icono sealar archivo
Tambin puede crear un vnculo comn anclaje con nombre si arrastra el icono de
sealizacin de archivos del inspector de propiedades hasta el anclaje con nombre en la
pgina:

Vnculando a un anclaje con nombre con el icono Sealizador de Archivos
Anclajes en otras pginas
Para crear un vnculo a un punto de fijacin en otra pgina, cree el vnculo a la pgina
como de costumbre y despus adjunte el nombre del punto de fijacin al final del nombre
de la pgina, como en trips.htm#hawaii..
Cuando se crea un vnculo au n punto de fijacin de otra pgina, Dreamweaver MX aade
tras el nombre de archivo una etiqueta de punto de fijacin : <a
href="directorio_relativo/archivo.htm#anclaje">Texto vinculado</a>
Si el punto de fijacin est en la misma pgina que el vnculo, la etiqueta tiene este
aspecto:
<a href="#anclaje">Texto vinculado</a>

Aadir vnculos de e-mail
Aadir un vnculo de correo electrnico a la pgina es un modo de proporcionar a los
usuarios un mtodo para ponerse en contacto con alguien para comentar la informacin
proporcionada en el sitio Web. El vnculo de correo electrnico abre una nueva ventana de
mensaje en el programa de correo asociado al navegador del usuario..
Crear un vnculo de correo electrnico
Puede aadir un vnculo de correo electrnico al texto existente en la pgina o bien utilizar
el cuadro de dilogo para aadir el texto y el vnculo.
Si hay texto, seleccinelo y, en la categora Comn de la barra Insertar, haga clic en
Vnculo de correo electrnico o bien seleccione Men Insertar Vnculo de correo
electrnico.

Botn Vnculo de correo electrnico en la barra Insertar
En el cuadro de dilogo Vnculo de correo electrnico, el texto seleccionado aparece en el
campo Texto. Escriba la informacin sobre el correo electrnico en el cuadro de texto
Correo electrnico. Puede dejar el texto tal cual o realizar las modificaciones necesarias.

Cuadro de dilogo Vnculo de Correo electrnico
Si no existe el texto para el vnculo de correo electrnico, coloque el punto de insercin en
el lugar donde desea que aparezca el vnculo y despus elija Men Insertar Vnculo de
correo electrnico. Escriba el texto deseado en el campo Texto y despus escriba la
informacin sobre el correo electrnico en el cuadro de texto Correo electrnico.
.
Cuando se crea un vnculo de correo electrnico, Dreamweaver crea una etiqueta de anclaje
utilizando la opcin HREF mailto: <a href=mailto:info@spinningwheel.com>
info@spinningwheel.com </a>

Vnculos en imgenes

Para aadir un vnculo a un grfico, seleccione el grfico en la pgina y utilice las opciones
Vnculo del inspector de propiedades para sealar el archivo o bien seleccionar el archivo
desde un cuadro de dilogo. El usuario puede hacer clic en cualquier parte de la imagen
para ir a esa pgina vinculada.
Cuando se crea un vnculo en una imagen se coloca una etiqueta de punto de fijacin al
principio y al final de la etiqueta de imagen: <a href=http://www.macromedia.com
alt=macromedia image><img src="mm.gif"></a>.
Mapas de imagen
Si tiene una imagen con varias zonas para trasladar al usuario a distintos destinos, debe
crear un mapa de imagen.

Por ejemplo, suponga que tiene un mapa del mundo y que desea crear un vnculo en cada
pas. Utilice un mapa de imagen para distinguir los distintos contornos de cada pas y
despus asigne un vnculo diferente a cada contorno.
Las zonas de vnculo sobre un mapa de imagen se conocen como zonas interactivas. Una
zona interactiva de un mapa de imagen puede tener una de estas tres formas: un rectngulo,
un crculo o un polgono.
Para crear un mapa de imagen se utilizan las herramientas de mapa del inspector de
propiedades. Para ver las herramientas de mapa, seleccione la imagen y ample el inspector
de propiedades.

Herramientas de zonas interactivas en el Inspector de Propiedades
En el cuadro de texto Mapa, asigne un nombre exclusivo a cada mapa de imagen de la
pgina. A continuacin, elija una de las herramientas de zona interactiva y delimite la zona
interactiva en la imagen.

Rectngulos y valos
Las herramientas Zona interactiva rectangular y oval, funcionan de forma similar a las
herramientas de las aplicaciones de diseo; arrstrela por la zona para dibujar la forma con
zona interactiva. Si desea mover o cambiar el tamao, seleccione la herramienta Puntero
para efectuar cambios.

Zona interactiva rectangular en la imagen
Polgonos
La herramienta Zona interactiva poligonal funciona de forma distinta.
Haga clic alrededor de la forma en la imagen, continuando en una direccin. Cada clic
crea un punto en la zona interactiva.
Cada punto se conecta por medio de una lnea con el punto anterior.
Tras el tercer clic, aparecer la forma rellena de la zona interactiva.
Contine haciendo clic hasta que consiga la forma deseada.


Zona interactiva de Polgono en la imagen
Si desea mover la zona interactiva, seleccione la herramienta Puntero de zona interactiva,
coloque el puntero en el interior de la zona interactiva y despus arrstrela hasta la nueva
ubicacin. Si desea mover un punto de la zona interactiva, mueva el punto con la
herramienta Puntero.
Cuando termine la zona interactiva, el inspector de propiedades cambia y muestra las
opciones de la zona interactiva. Aqu puede introducir el vnculo de la zona interactiva y el
texto alternativo que aparece cuando el usuario mueve el puntero por esa zona.

Vnculo de la zona interactiva
Crear una barra de navegacin
Dreamweaver le permite crear una barra de navegacin para sus sitios Web utilizando el
objeto Barra de navegacin. Una barra de navegacin consiste en una imagen (o conjunto
de estas) que muestran cambios basados en la interaccin con el usuario.
Por ejemplo, la barra de navegacin podra contener un conjunto de imgenes con texto de
navegacin que cambian cuando un usuario sita el ratn sobre la imagen de la barra de
navegacin, como se muestra en el siguiente ejemplo:

Barra de navegacin
Insertando una barra de navegacin
Cuando inserta una barra de navegacin, se asignan los nombres a los elementos de
navegacin y se seleccionan las imgenes para usarlas con estos. Puede insertar una barra
de navegacin de cualquiera de estas dos maneras:
Elija Insertar Objetos de Imagen Barra de Navegacin.
En la categora comn de la barra Insertar, elija en el men emergente de imgenes la
opcin Barra de Navegacin.

El cuadro de dilogo Insertar Barra de Navegacin aparece entonces.

Insertar Barra de Navegacin
Cada elemento corresponde a un botn con una presentacin de hasta cuatro estados. La
nica imagen requerida obligatoriamente es la Imagen arriba. Las imgenes de los otros
estados son opcionales..
La Imagen arriba representa el estado en el que la barra de navegacin se muestra por
primera vez, cuando no se ha hecho clic en el elemento de men o el cursor no pasa por
encima de ste..
La Imagen sobre muestra el estado en el que se muestra la imagen cuando el usuario pasa
el puntero del ratn sobre la imagen. displays.
La Imagen abajo se muestra despus de que el usuario ha hecho clic en la imagen.
El estado Sobre mientras imagen abajo se muestra cuando el usuario pasa el puntero del
ratn por encima de una imagen es estado Abajo.

Los nombres de los elementos aparecen en la Lista de Elementos de la barra de
navegacin. Utilice los botones con flechas para organizar el orden de estos elementos en
la barra de navegacin. Haga clic en el botn con el signo de sumar (+) para aadir
elementos a la barra de navegacin.
En el cuadro de texto Al hacerse clic, ir a URL haga clic en el botn examinar para
seleccionar un archivo vinculado que desee abrir y despus seleccione en el men
emergente la localizacin donde desea que se abra el archivo. Seleccione alguno de las
siguientes localizaciones:
Ventana principal, para abrirlo en la misma ventana que la barra.
Un marco en el que abrir el archivo, si la barra de navegacin se encuentra en un conjunto
de marcos.

Tambin se puede configurar adicionalmente:

Configuracin Efecto
Carga Previa de
Imgenes
Seleccionar para descargar las imgenes cuando se carga la pgina.
Si no elige esta opcin el usuario puede experimentar un retardo en
el efecto rollover; cuando pasa el cursor por encima de la imagen.
Show "Imagen
abajo" inicialmente
Seleccione para mostrar el elemento seleccionado en el estado abajo;
cuando la pgina se muestra; en vez de mostrar el estado Arriba
inicialmente.
Cuando selecciona esta opcin, un asterisco aparece detrs del
elemento: en la lista de elementos de la barra de navegacin.
Insertar Elija para insertar los elementos de la barra de navegacin
horizontalmente o verticalmente en el documento..
Utilizar Tablas Seleccionar para insertar los elementos de barra de navegacin
dispuestos en una tabla.

Consideraciones de accesibilidad
Existen una serie de consideraciones a tener en cuenta para mantener la navegacin de su
sitio accesible:
Asegrese siempre que las imgenes destinadas a la navegacin poseen definido un texto
alternativo para los lectores de pantalla.
No usen elementos de navegacin que requieran de rutinas de javascript para que puedan
funcionar correctamente.

Crear un men de salto

Un men de salto es un men emergente que contiene vnculos con otras pginas del sitio
o con otros sitios Web. Un ejemplo de men de salto se muestra a continuacin:

Men de salto
Para insertar un men de salto, puede hacerlo tanto desde los mens (Men Insertar
Formulario Men de Salto) carcomo desde la barra Insertar (Categora Formulario, clic en
el botn Men de Salto).

Men de salto
El cuadro de dilogo Insertar Men de Salto aparece.

Cuadro de dilogo Insertar men de salto
Introduzca el texto que desea se muestre para la opcin de men y la URL a la deber ir
cuando se seleccione esa opcin. La opcin Abrir URL en: es aplicable slo cuando esta
usando marcos en su aplicacin.
El men de salto puede inmediatamente desplazarse a la pgina deseada cuando el usuario
elija una opcin del men. Como alternativa, puede insertar un botn Ir para que los
usuarios hagan clic despus de elegir una de las opciones y as se desplacen a la pgina
deseada.
Resumen
Un vnculo es un texto o un grfico que usuario presiona para: mostrar una pgina del
sitio que esta visitando; mostrar una pgina de otro sitio Web; o para saltar a una seccin de
la pgina actual.
El inspector de propiedades es usado para escribir un vnculo, elegir un vnculo creado
previamente, navegar hasta un archivo que vincular, o arrastrar el icono sealizador de
archivos a un archivo del panel de Archivos.
Puede vincular a una seccin de un documento usando anclajes con nombre.
Los vnculos de e-mail permiten a los usuarios enviar e-mail desde el software cliente de
e-mail predeterminado.
Puede crear un vnculo dentro de una imagen.
Las zonas interactivas permiten a los usuarios navegar a diferentes pginas dependiendo
de la zona de la imagen en la que se haga clic.
La barra de navegacin se usa para crear una barra de herramientas de navegacin que
visualmente cambia dependiendo de la accin del usuario con el ratn.

Diseando la disposicin de la pgina
Creando contenedores
Puede comenzar el diseo de su pgina Web creando un conjunto de contenedores lgicos.
Estos contenedores son regiones de la pgina que contienen los objetos del sitio. Por
ejemplo, los contenedores pueden incluir las siguientes regiones:
Regin de encabezado
Regin del Logotipo de la Empresa
Regin de la Barra de Herramientas de Navegacin
Regin del Contenido
Regin del pie de pgina

Dentro de los contenidos puede necesitar separar la pgina en otras regiones adicionales. En
el diseo de abajo, nosotros separaremos la pgina en estas regiones o contenedores:

Ejemplo de diseo de disposicin
Controlando la disposicin
Con Dreamweaver, existen varios modos en el que puede controlar la disposicin de sus
pginas:
Utilizar tablas para crear cada contenedor.
Utilizar capas para crear cada contenedor.

Estructurando la disposicin de la pgina con tablas

Las tablas le dan control sobre la disposicin de su pgina y la situacin de su contenido.
Las tablas estn pensadas para mostrar informacin de forma muy organizada. Tienen dos
usos principales. Las tablas le permiten:

Mostrar informacin en filas y columnas, de forma bastante parecida a una hoja de
clculo
Controlar la disposicin de una pgina Web con algunos controles sobre la ubicacin del
texto y los grficos.

Crear una tabla
Puede crear una tabla en Dreamweaver MX mediante la categora Comn de la barra
Insertar o bien mediante los mens Insertar Tabla.

Botn Insertar Tabla
En el cuadro de dilogo Insertar tabla, introduzca los parmetros deseados para la tabla.
Estos parmetros se pueden modificar despus de insertar la tabla en la pgina.
.

Cuadro de dilogo Insertar Tabla
Propiedades de la tabla
Las propiedades de las tablas y sus valores se describen a continuacin:

Opcin Valor
Filas Nmero de filas que desea tener en la tabla. Siempre puede aadir o
quitar filas posteriormente.
Columnas Nmero de columnas que desea tener en la tabla. Siempre puede aadir o
quitarlas posteriormente.
Ancho de Tabla Ancho de la tabla en la pgina, especificado en pxeles o en porcentaje.
Borde Ancho en pxeles del borde alrededor de cada celda de la tabla.
Relleno de
celda
Margen en pxeles alrededor del contenido de cada celda.
Espacio entre
celdas
Espacio en pxeles entre cada celda.
Encabezado Permite crear los encabezados de tabla a la izquierda, arriba, ambos lados
o ninguno.
Texto Muestra un titulo de la tabla que se muestra fuera de esta.
Alineacin de
texto
Especifica donde aparecer alineado el texto anterior (ttulo) con
respecto a la tabla
Resumen Muestra una descripcin de la tabla. Los lectores de pantalla leen este
resumen, pero el texto no aparece en el navegador del usuario.

Cuando se inserta una tabla se emplean las siguientes etiquetas HTML:
<tabla></tabla> define la tabla en su conjunto
<tr></tr> define una fila de la tabla
<td></td> define una celda de datos de la tabla
<th></th> define una celda de encabezado de la tabla
Seleccionar elementos de tabla
Despus de crear la tabla, tiene la opcin de cambiar las propiedades de toda la tabla, de
una celda concreta o de un grupo de celdas. Hay varias formas de seleccionar celdas en
Dreamweaver:
Arrastre el puntero sobre una fila
Arrastre el puntero sobre una columna
Haga clic mientras mantiene presionada la tecla Mays o la tecla Ctrl (Windows), o bien
la tecla Comando (Macintosh) para seleccionar varias columnas y filas
Sitese a la izquierda de una fila, o sobre una columna, y seleccione la fila o la columna
con la flecha de seleccin

Una vez realizada la seleccin, las propiedades que cambie se aplican a todas las celdas
seleccionadas.
Edicin de tablas usando el Modo Ampliado
Dreamweaver MX 2004 aadi la posibilidad de ver su tabla en un modo ampliado para
editarla con mayor facilidad. Puede iniciar su modo expandido en la categora Diseo de la
barra Insertar. Una vez activado, recibir un mensaje de advertencia para comenzar,
mensaje que podr desactivar para cuando vuelva a usar el modo ampliado de nuevo.

Comenzar con el modo ampliado de edicin de tablas
Como se describe en el cuadro de dilogo, este modo no muestra las tablas como se veran
en un navegador. El modo ampliado para tablas aade de forma temporal relleno de celda y
espacio entre celdas a todas las tablas del documento, e incrementa los bordes de tabla para
hacer su edicin ms fcil. Este modo le permite seleccionar elementos en las tablas o situar
con precisin un punto de insercin.
Por ejemplo, puede ampliar una tabla para situar un punto de insercin a la izquierda o
derecha de una imagen sin que inadvertidamente seleccione la imagen o la celda de tabla.

Sin el modo ampliado para tablas

Con el modo ampliado para tablas
Una vez que ha realizado su seleccin, o hubiere situado su punto de insercin, puede
volver al modo estndar o de diseo para continuar la edicin. Algunas operaciones
visuales, como el cambio de tamao, no mostrarn los resultados esperados en el modo
ampliado de edicin.
Nota Si desactiva los indicadores de ancho para las tablas, puede volver a activarlos
seleccionando Men Ver Ayudas Visuales Anchos de tabla

Configurando las propiedades de la celda
Una vez seleccionada la celda o el grupo de celdas, puede cambiar las propiedades del
grupo con el inspector de propiedades. A continuacin, se muestra el inspector de
propiedades de la celda de una tabla:

Propiedades de celda
La tabla describe las propiedades que se aplican a las celdas y filas de una tabla:

Opcin Valor
Alineamiento horizontal
(Horiz)
Alinea el contenido de la celda a la izquierda
(predeterminado), al centro o a la derecha.
Alineamiento Vertical
(Vert)
Alinea el contenido de la celda hacia la parte inferior, al centro
(predeterminado) o hacia la parte superior de la celda.
Ancho (W) Establece el ancho mnimo de la celda en pxeles (la celda
automticamente se amplia si el ancho del contenido supera el
ancho mnimo)
Alto (H) Establece la altura mnima de la celda en pxeles (la celda se
ampliar automticamente si la altura del contenido supera la
altura mnima)
Imagen de fondo (cuadro
de texto Fnd)
Establece una imagen de fondo en una celda, una fila o una
tabla
Color de fondo (cuadro
de texto Fnd)
Establece un color de fondo en una celda, una fila o una tabla
Color de Borde (Brdr) Establece un color para el borde de la tabla. Si el borde de la
tabla se establece en 0, no se aplicar el color de borde en las
celdas de la tabla.
Combinar celdas Transforma varias celdas en una sola.
Dividir Celdas Divide las celdas en varias celdas en horizontal o vertical( para
una celda solo )
No ajustar (No aj.) Evita el ajuste de lneas del contenido de una celda, una fila o
una tabla. .
Encabezado(Enc) Crea un encabezado en una o varias celdas. Los encabezados
son en negrita y centrados.

Editar filas
Las operaciones que puede realizar para modificar filas y columnas seran:
Aadir
Borrar
Combinar
Dividir

Aadir filas y columnas
Una vez creada la tabla, puede aadir una fila o una columna. Puede hacerlo de cualquiera
de las siguientes formas:
Haga clic en la ltima celda de una fila y presione la tecla Tab. Se aade una nueva fila al
final de la tabla.
Seleccione Modificar Tabla Insertar fila. Se aadir una fila nueva antes de la fila
seleccionada.
Haga clic en la tabla con el botn derecho del ratn (Windows) o mientras presiona la
tecla Control (Macintosh) y elija Tabla Insertar fila en el men contextual. Se aadir una
fila nueva antes de la fila seleccionada.

Para especificar que se inserten filas por encima o por debajo de la fila actual, elija Men
Modificar Tabla Insertar filas o columnas. El cuadro de dilogo resultante permite controlar
el emplazamiento de las nuevas filas y columnas.

Cuadro de dilogo insertar Filas o Columnas
Borrar una fila
Puede quitar filas de la tabla si resalta la fila y despus lleva a cabo una de estas
operaciones:
Seleccione Men Modificar Tabla Eliminar fila
Haga clic en la tabla con el botn derecho (Windows) o mientras presiona la tecla Control
(Macintosh) y elija Tabla Eliminar fila en el men contextual. .

Combinacin de filas y columnas
Despus de resaltar las celdas que desea combinar, lleve a cabo una de estas operaciones:
Haga clic en Combinar celdas en el inspector de propiedades.
Elija Men Modificar Tabla Combinar celdas

Divisin de filas y columnas
Despus de resaltar la celda que desea dividir, lleve a cabo una de estas operaciones:
Haga clic en Dividir celdas en el inspector de propiedades.
Elija Men Modificar Tabla Dividir celdas

Se devuelve el nmero de celdas al original si han sido combinadas previamente, o bien
permite dividir una celda en un nmero determinado de filas o columnas.
Ordenar Tablas
Puede realizar una ordenacin sencilla de la tabla ordenando los contenidos de una sola
columna, o bien, una ordenacin ms compleja ordenando los contenidos de dos columnas.
Nota: Las tablas que contienen celdas combinadas no se pueden ordenar.
Para ordenar una tabla, seleccinela y elija Men Comandos Ordenar tabla. En el cuadro
de dilogo Ordenar tabla, elija la columna que se va a ordenar y el modo de ordenacin. Si
desea aadir una segunda columna, seleccione la columna en el men emergente
Despus por. La configuracin predeterminada no ordena la primera fila de la tabla. .

Cuadro de dilogo Ordenar Tabla
Importar Datos de Tabla
Si el contenido que tiene almacenado est en una hoja de clculo, en una tabla de
Microsoft Word o en un archivo de texto separado por comas, Dreamweaver permite
importar esa informacin en la pgina Web fcilmente.

Para importar los datos de tabla, lleve a cabo una de estas operaciones::
Elija Men Archivo Importar Datos de Tabla
Elija Men Insertar Objetos de Tabla Importar Datos de Tabla

En el cuadro de dilogo Importar datos de tabla, elija el archivo que desea importar, el
delimitador del archivo y los parmetros que desea utilizar en la tabla.

Cuadro de dilogo Importar Datos de Tabla
Nota: Tambin puede exportar datos en datos de tabla desde el Men Archivo Exportar
Tabla.
Usando el Modo de Diseo con Tablas
En Dreamweaver MX, puede crear o ver tablas en la pgina de uno de estos modos:

Estndar
Diseo
Ampliado

Cuando se utiliza el comando Insertar tabla, se crea una tabla en la vista estndar.
La vista de Diseo trabaja como programas de diseo que dibujan ciertos contenedores en
la pgina y los rellenan con texto o grfico. Puede cambiar el tamao de los contenedores, y
puede situarlos en cualquier lugar de la pgina.
Para usar tabla para la disposicin, seleccione Vista de Diseo en la Categora Diseo de la
barra Insertar. Podr ver un mensaje que le indica que va a trabajar con este modo y puede
elegir no ver este mensaje de nuevo.

Comenzar con el modo de diseo
La barra Insertar tiene dos opciones que puede usar en vista de Diseo:
Dibujar una tabla de Diseo
Dibujar una celda de Diseo


Categora Diseo en la Barra Insertar
Usando la cuadrcula
Puede necesitar mostrar la cuadrcula dentro del modo de Diseo para que le ayude
visualmente a alinear y colocar tablas de diseo. Para activar la cuadrcula elija Men Ver
Cuadrcula Mostrar Cuadrcula. Para cambiar las opciones de la Cuadrcula elija Men Ver
Cuadrcula Configuracin de la Cuadrcula. Elija Ajustar a Cuadrcula para hacer que los
elementos de la pgina se ajusten mientras los mueve. Elija Puntos si lo que necesita es ver
lneas punteadas en vez de lneas slidas.

Configuracin de la cuadrcula
Para mostrar las reglas, elija Men Ver Reglas Mostrar. Las reglas aparecen en la parte
superior y a la izquierda de la pgina, con marcas en pxeles, pulgadas o centmetros.
Dibujando una celda de diseo
Cuando trabaja en la Vista Diseo de edicin de tablas, puede aadir Celdas de Diseo o
Tablas de Diseo a su pgina.
Para dibujar una celda de diseo asegrese de que este en el modo de edicin de Diseo y
despus:
Haga clic en el botn Dibujar celda de diseo en la categora Diseo de la barra Insertar. El
puntero del ratn se convierte en una cruz.
Coloque el puntero en el lugar de la pgina donde desea que aparezca la celda y arrstrelo
para dibujarla.

Nota: Para dibujar varias celdas sin tener que hacer clic en Dibujar celda de disposicin
ms de una vez, mantenga presionada la tecla ctrl. (Windows) o Comando (Macintosh)
mientras dibuja la primera celda. Puede seguir dibujando celdas nuevas hasta que
seleccione una celda que desee mover o modificar
Se dibuja automticamente una tabla que contiene la celda. La tabla se dibuja con el mismo
ancho que la ventana del documento, pero puede cambiar luego su tamao a cualquier otro.
Las Tablas de diseo aparecen con una barra por la parte superior de la tabla. Esta barra
hace fcil la identificacin. La parte inferior contiene los anchos de las celdas y de la tabla.

Celdas de Tabla en la Modo Diseo de Edicin de Tablas
Cdigos de Color
La codificacin por colores permite trabajar fcilmente con la tabla:
La tabla aparece en verde (predeterminado)
El contorno de la celda es de color azul (predeterminado)
Cuando se mueve el puntero sobre el borde de una celda, ste cambia a rojo para indicar
la celda sobre la que se encuentra.(predeterminado)

Nota: Puede cambiar los colores predeterminados de tabla en la Categora Diseo de
Preferencias.
Moviendo o cambiando de tamao las celdas
Para mover o cambiar el tamao de una celda, siga estos pasos:
1. Haga clic en el borde rojo para seleccionar la celda.
2. Arrastre los selectores que aparecen para cambiar el tamao de la celda
3. Arrastre el borde de la celda (no el selector) para mover la celda.

Nota: Las celdas no pueden solaparse.
Puede utilizar las teclas de flecha para mover la celda seleccionada de pxel en pxel.
Mantenga presionada la tecla mays. y utilice las teclas de flecha para moverla de 10 en 10
pxeles.
Nota: Tambin puede pulsar la tecla Control (Windows) o Comando (Macintosh) y hacer
clic dentro de una celda para mostrar los selectores de cambio de tamao.
Tablas anidadas
Puede dibujar una tabla dentro de otra tabla para crear una tabla anidada. Una vez creada la
tabla, lleve a cabo las siguientes operaciones para anidar una tabla dentro de otra existente:
1. Haga clic en el botn Dibujar tabla de diseo en la categora Diseo de la barra Insertar y
el puntero se convertir en cruz.
2. Desplace el puntero hasta una zona gris dentro de la tabla existente y arrstrelo para
crear la tabla anidada.


Tablas anidadas
La vista de disposicin permite dibujar una tabla dentro de otra tabla, pero no dentro de
una celda concreta de la tabla.
Nota: La tabla aparece con un fondo gris, mientras que la celda aparece con un fondo
blanco. Si intenta dibujar una tabla dentro de una celda (dentro de una zona blanca),
Dreamweaver muestra el smbolo universal No indicando que no se no puede dibujar una
tabla dentro de una celda. Se trata de una restriccin de Dreamweaver, no de HTML. Si
necesita insertar una tabla dentro de una celda, debe cambiar al modo estndar para
poder insertarla.
Usando capas para la disposicin
Las capas son una caracterstica del HTML Dinmico soportada por los navegadores de
versin 4.0 o superiores. Son contenedores rectangulares de contenido HTML que puede
situar en una posicin exacta de la ventana del navegador. Las capas pueden contener:
Texto
Imgenes
Tablas
Otras Capas.

Cualquier cosa que puede colocar en un documento HTML puede ser insertado dentro de
una capa.
Soporte por los Navegadores Web
En otras herramientas de desarrollo, puede haber visto como se le llaman divs, una
indicacin de que las capas son creadas con la etiqueta an <div>. Las siguientes versiones
de navegador soportan las capas creadas con la etiqueta <div>:
Internet Explorer 4.0 y superior
Netscape Navigator 4.0 y superior

Las versiones Navigator 4.x tambin admiten capas creadas mediante las etiquetas no
estndar LAYER e ILAYER. No obstante, Netscape no incorpor esa compatibilidad en
las versiones posteriores del navegador, por lo que no se recomienda el uso de dichas
etiquetas.
Las versiones anteriores a la 4.0 de Internet Explorer y Netscape Navigator muestran los
contenidos que estn dentro de las capas pero no posicionan la capa. Los contenidos de la
capa aparecen en el punto de la pgina donde se encuentra el cdigo; por ejemplo, si el
cdigo de la capa est al comienzo de la pgina, entonces los contenidos de esta capa
aparecern al comienzo de la pgina en aquellos navegadores que no soportan el uso de
capas.
Creando capas
Elija la categora Diseo de la barra Insertar. Debe tener activada la vista Estndar para
crear capas. Entonces puede hacer cualquiera de lo siguiente:
Haga clic en Dibujar Capa en la categora Diseo de la barra Insertar y despus dibuje una
capa arrastrando con el ratn, del mismo modo que dibuja rectngulos en un programa de
dibujo.
Elija Men Insertar Capa para situar una capa en la pgina, utilizando el ancho y alto que
esta configurado en las Preferencias. .


Opcin Dibujar Capa en la categora Diseo de la barra Insertar
El resultado en vista diseo es una sencilla caja:

Capa Nueva
Nota: Puede crear capas de manera consecutiva. Mantenga pulsado la tecla Control
(Windows) o Command (Macintosh) mientras dibuja sus capas. Podr entonces continuar
dibujando capas mientras tenga pulsada la tecla Control o Command .
Despus de crear una capa puede agregarle contenido simplemente colocando el punto de
insercin dentro de la capa, despus puede agregar contenido del mismo modo que lo hace
en la pgina.
Seleccionando una capa
Debe seleccionar una capa para poder realizar cambios en ella. Existen varias formas de
seleccionar una capa:
Haga clic en el manejador de la capa que aparece en la esquina superior izquierda despus
de hacer clic dentro de la capa.
Presione Ctrl+Mays (Windows) o Comando+Mays (Macintosh) y haga clic dentro de la
capa.
Haga clic en cualquier borde de la capa.
Haga clic en cualquier lugar del borde de la capa.

Una vez que ha seleccionado la capa, ver la capa seleccionada con manejadores de cambio
de tamao.

Usando el panel de capas
El panel Capas ofrece una representacin grfica de las capas en la pgina. Puede utilizarlo
para seleccionar una capa, asignar un nombre a una capa, cambiar la visibilidad de la capa,
cambiar el orden de apilamiento o seleccionar mltiples capas en la pgina. Conforme cree
capas, la ltima que cree se situar sobre todas las dems.
Para acceder al panel de capas, elija Men Ventana Capas o presione la tecla F2.

Panel de capas
Manipular las propiedades de la capa
Una vez que una capa esta creada y seleccionada, puede modificar distintas propiedades de
la capa en el Inspector de Propiedades. Puede, por ejemplo:
Cambiar de nombre una capa asignndole un Nuevo nombre en el valor ID de capa del
Inspector de Propiedades. Dreamweaver asigna nombres automticos a las capas (layer1,
layer2, etc), pero puede necesitar asignarle un nombre ms significativo y nico. No
utilice espacios o caracteres especiales.
Posicionar una capa arrastrndola por la pantalla, o situarla de forma precisa
especificando los valores de Iz (izquierda) y Sup(Superior).
Cambiar de tamao una capa arrastrando los manejadores de cambio de tamao o
ajustando los valores de An (Anchura) y Al (Altura).
Aadir un color de fondo para la capa eligiendo un color de la caja de color Col. Fondo.


Configurando propiedades de la capa
Usando el comportamiento Reparacin cambio de tamao de Netscape
Netscape (versin 4.7) tiene un problema con el texto de las capas cuando se cambia el
tamao de la ventana del navegador: la capa cambia de forma cuando cambia el tamao de
la ventana del navegador. Si utiliza capas para controlar el diseo de la pgina, no le
parecer adecuado el resultado que ofrece Netscape cuando el usuario cambia el tamao de
la ventana del navegador.
De forma predeterminada, cuando inserta alguna capa, se agrega un cdigo javascript que
repara este problema.
Puede resolver el problema eligiendo Men Comandos Agregar/Quitar reparacin de
cambio de tamao de Netscape. Tambin puede eliminar este cdigo Javascript del mismo
modo.
Nota: Puede cambiar sus preferencias para insertar la reparacin del cdigo cuando inserte
una capa. Elija Men Edicin Preferencias o Dreamweaver Preferencias en Macintosh OS
X, seleccione la categora Capas y elija Compatibilidad con Netscape 4.
Ocultar y mostrar capas
Puede cambiar la visibilidad de una capa.. Por defecto, las capas son visibles en la ventana
del navegador. Puede, por ejemplo, hacer una capa invisible para mostrarla posteriormente
en respuesta a la interaccin con el usuario. Puede hacer que aparezca, por ejemplo, un
submen cuando un usuario haga clic en un elemento del men.

Puede cambiar la visibilidad de una capa en respuesta a una accin del usuario mediante el
uso de un comportamiento.
Comprender los comportamientos
Los comportamientos permiten aadir interactividad a las pginas. Hacen posible que la
pgina cambie de alguna forma en respuesta a una accin del usuario. Dreamweaver MX
aade cdigo JavaScript en diversas partes de la pgina para que funcionen los
comportamientos.
El uso de scripts (normalmente JavaScript) para manipular la apariencia de objetos HTML
se denomina HTML dinmico o DHTML.
Entre los comportamientos ms utilizados figuran los siguientes:
Validacin de los datos introducidos por un usuario en un campo de formulario.
Apertura de una pgina en una nueva ventana del navegador
Cambio de una imagen por otra (efecto de sustitucin o rollover)
Visualizacin de mensajes y mens emergentes
Conversin de un men de formulario en un men de navegacin compacto
Visualizacin de texto que inicialmente se encuentra oculto

Compatibilidad con los navegadores Web
Netscape y Microsoft incorporaron DHTML casi simultneamente cuando publicaron la
versin 4.0 de sus respectivos navegadores. El tratamiento dado por Netscape y Microsoft
al DHTML es distinto, por lo que ha sido difcil lograr efectos DHTML compatibles con
todos los navegadores. Al utilizar los comportamientos DHTML incorporados en
Dreamweaver, la compatibilidad con los distintos navegadores se resuelve
automticamente.

Ocultar las capas en la vista de diseo
Puede ocultar una capa ya en el navegador y en la vista de diseo de Dreamweaver,
ajustando la propiedad visibilidad en el panel Capas.
Haga clic en la columna de la izquierda del nombre de la capa para cambiar su visibilidad.
Si el ojo est abierto, significa que la capa es visible.
Si el ojo est cerrado, la capa es invisible.
Si no hay ningn icono, la capa padre determina la visibilidad de la capa. Esto es vlido
para capas anidadas.
Para cambiar la visibilidad de todas las capas al mismo tiempo, haga clic en el icono de
ojo situado en la parte superior de la columna.


Panel capas
Una capa invisible no se mostrar en la vista de diseo. Utilice el panel de capas para
mantener estas capas ocultas y seleccionarlas.
Nota: Utilice la categora Capas en Preferencias para establecer la visibilidad
predeterminada para las nuevas capas.
Aadir el comportamiento Mostrar/Ocultar Capas
La accin Mostrar-Ocultar capas muestra u oculta una o varias capas en respuesta a una
accin del usuario. Puede emplear esta opcin para mostrar informacin acerca de un
objeto de la pgina cuando el usuario pasa el puntero sobre l o hace clic en un botn.
Para aadir la accin Mostrar-Ocultar capas:
1. Seleccione el elemento para la accin (por ejemplo una imagen o un vnculo). Tambin
puede hacerlo seleccionando la etiqueta <body>
2. En el grupo de paneles etiquetas, haga clic en el panel Comportamientos o elija Men
Ventana Comportamientos Seleccione Mostrar-Ocultar capas del men emergente
Acciones.
3. Seleccione la capa de la lista Capas con nombre en el cuadro de dilogo Mostrar-Ocultar
capas. Haga clic en Mostrar u Ocultar. Haga clic en Aceptar.


Cuadro de dilogo Mostrar-Ocultar Capas
Lanzando el comportamiento
Despus de aadir un comportamiento a un objeto, necesitar especificar un evento que
dispare la accin del comportamiento. El evento predeterminado asignado por
Dreamweaver puede no ser el deseado para conseguir sus propsitos. Por esa razn, puede
cambiar un evento, seleccionndolo en el panel de Comportamientos y eligiendo un nuevo
evento en el men emergente de Eventos que aparecer.

Eventos para Mostrar/Ocultar Capas

Convertir Tablas a Capas

Puede utilizar Dreamweaver para convertir un diseo creado con tablas a otro que use
capas. Para hacerlo utilice el cuadro de dilogo Convertir Tablas a Capas que puede abrir
eligiendo Men Modificar Convertir Tablas a Capas.

Cuadro de dilogo Convertir Tablas a capas
Las opciones para convertir tablas a capas incluyen:
Evitar solapamiento de capas limita las posiciones de las capas cuando se crean, mueven y
cambian de tamao para evitar que se solapen.
Mostrar el panel de capas, muestra el panel de capas.
Mostrar cuadrcula y Ajustar a cuadrcula permiten utilizar una cuadrcula para facilitar la
colocacin de las capas.

Las tablas se convertirn en capas. Las celdas vacas no se convierten en capas a menos que
tengan colores de fondo.
Nota: los elementos de la pgina que estaban situados fuera de las tablas tambin se
colocarn en capas.

Convertir Capas en Tablas
Las capas son problemticas para los sitios Web que deben cumplir con las lneas gua de
Accesibilidad. Si desea ofrecer una versin alternativa con tablas de su sitio Web, puede
convertir sus capas a tablas.
Para hacer esto utilice el cuadro de dilogo Convertir Capas a Tablas eligiendo Men
Modificar Convertir Capas a Tablas. Aparecer el siguiente cuadro de dilogo:

Convertir capas en tablas
Las opciones de Diseo de Tabla incluyen:
Ms preciso, crea una celda para cada capa, junto con las celdas adicionales necesarias
para conservar el espacio entre capas..
Mnimo: Contrae celdas vacas que se son de ancho menos que los pxeles especificados y
las capas deben alinearse si se sitan a menos de la distancia especificada en pxeles.
Utilizar GIF transparentes rellena la ltima fila de la tabla con GIF transparentes. De este
modo se garantiza que la tabla aparezca con las mismas anchuras de columnas en todos los
navegadores. Cuando esta opcin est activada, no se puede editar la tabla resultante
arrastrando sus columnas. Cuando la opcin est desactivada, la tabla resultante no
contendr GIF transparentes, pero los anchos de las columnas pueden variar segn el
navegador.
Centrar en pgina centra la tabla resultante en la pgina..

Las Opciones de herramientas de diseo incluyen:
Prevenir solapamiento de capas
Mostrar panel de capas
Mostrar cuadrcula
Ajustar a cuadrcula

Resumen
Las Tablas pueden ser usadas para mostrar datos en un formato parecido a hoja de clculo
o para organizar la disposicin del texto y grficos sobre la pgina.
Puede importar datos de hojas de clculo, una tabla de Microsoft Word, un archivo de
texto separado por comas, o separado por tabulador, y Dreamweaver los importar dentro
de un formato de tabla.
La vista Diseo de Tabla puede ser utilizada para disear su pgina usando tablas;
dibujando en este modo celdas de disposicin en la pgina fcilmente.
El modo de tablas Ampliada puede ser usado para seleccionar fcilmente los contenidos
que se encuentran en las celdas.
Las capas puede ser usadas como alternativa para crear contenedores para elementos
HTML de su sitio Web..
Puede mostrar y ocultar capas en respuesta a los eventos del usurio, como por ejemplo: un
clic del ratn.

Usando la Biblioteca y las Plantillas
Elementos de la Biblioteca del sitio
Un elemento de biblioteca es un archivo especial de Dreamweaver MX que contiene una
coleccin de elementos de pgina (como texto o grficos) que pueden aadirse fcilmente
a cualquier pgina del sitio actual. No son pginas HTML en s, sino elementos de pgina
reutilizables. Cuando necesite modificar el diseo de la pgina con elementos de Biblioteca
o lo agregue a nuevas pginas, solo necesitar editar el elemento de Biblioteca en vez de
las pginas individualmente.
Los elementos de Biblioteca:
Son reutilizables y actualizables en un lugar.
Son ideales para contenidos como encabezados de pgina, pies de pgina o barras de
navegacin.
Estn completamente bloqueados y no pueden ser editados en las pginas en las que se
usan.

Crear elementos de Biblioteca
Puede crear un elemento de biblioteca partiendo de cero, o puede crear uno seleccionado
los contenidos de una pgina.
La Biblioteca se encuentra en el panel de Activos. Haga clic en la Categora Biblioteca del
panel de Activos y despus haga clic en el botn Nuevo Elemento de Biblioteca en la parte
inferior del panel Activos.

Creado un Nuevo elemento de Biblioteca
Puede tambin seleccionar objetos, y despus elegir Men Modificar Biblioteca Agregar
Objetos a Biblioteca, o arrastre los objetos seleccionados de la ventana del Documento a la
mitad inferior del panel de Activos (con categora Biblioteca seleccionada) para crear un
nuevo elemento de Biblioteca.
Nuevos elementos de Biblioteca
El nuevo elemento se aade a la lista con el nombre Untitled. Despus, puede cambiar el
nombre del elemento para que refleje su contenido.
Una vez que seleccione contenido y cree un elemento de Biblioteca, el contenido es
resaltado en el color configurado en las preferencias (el color predeterminado es el
Amarillo) para expresar que es un elemento de biblioteca y no puede ser modificado en la
pgina.
Nota: Si tiene un estilo aplicado al contenido que esta convirtiendo en elemento de
Biblioteca, ver un mensaje de alerta advirtiendo que la seleccin podra no tener el mismo
aspecto en otros documentos porque las especificaciones del estilo no se incluyen con
elementos de biblioteca. Para asegurarse de que el estilo es incluido, utilice hojas de estilos
externas y recuerde vincular en todos los documentos que usen los estilos.
Localizacin de almacenamiento
Los elementos de biblioteca (con extensin .lbi) se guardan en la carpeta Library y se
almacenan en la carpeta del sitio. Dreamweaver MX aade la carpeta Library a la carpeta
del sitio si todava no existe. La carpeta Library siempre debe estar al nivel de la raz.
Visualizando elementos de la Biblioteca
Para ver los elementos de biblioteca existentes en su sitio, haga clic en la categora
Biblioteca del panel Activos y despus seleccione el elemento en la lista. En la parte
superior del panel Activos aparecer una vista previa del elemento seleccionado.

Elementos de Biblioteca en el panel de Activos
Colocando los elementos de la biblioteca en la pgina
Para colocar un elemento de biblioteca en una pgina puede seleccionar ele elemento de
biblioteca a insertar y hacer clic en el botn insertar de la parte inferior izquierda del panel
de activos, pero tambin puede arrastrarlo desde el panel de activos a la pgina.
El contenido de la biblioteca aparece en la pgina, resaltado en amarillo. No puede
modificar directamente nada que forme parte del elemento en la pgina del documento.

Elemento de Biblioteca resaltado
Modificar los elementos de la biblioteca
Para modificar un elemento de biblioteca, seleccinelo en la lista de elementos de la
categora Biblioteca en el panel Activos y, a continuacin, haga clic en Editar. El elemento
de biblioteca se abre en una ventana de documento donde puede realizar los cambios.

Editar un elemento de Biblioteca
Como alternativa, puede seleccionar el elemento de biblioteca en la pgina y utilizar el
Inspector de Propiedades para ver las propiedades del elemento. La opcin Origen muestra
el nombre del elemento de Biblioteca. Haga clic en Abrir para editar el elemento de
Biblioteca.
Actualizaciones inmediatas
Cuando guarda el elemento de biblioteca, Dreamweaver MX comprueba todos los
documentos que utilizan dicho elemento y pregunta si desea actualizar los archivos. Se
actualizan y se guardan todos los archivos que contienen el elemento de biblioteca y que
no estn abiertos en ese momento. Los archivos que estn abiertos se actualizan, pero no se
guardan.

Cuadro de dilogo Actualizar Elementos de Biblioteca
Si pulsa actualizar, aparecer el cuadro de dilogo Actualizar Pginas donde puede elegir
que y donde actualizar.

Cuadro de dilogo Actualizar Pginas
Actualizaciones aplazadas
Un sitio grande con muchos archivos podra necesitar algn tiempo para actualizar todos
los archivos y tal vez decida actualizarlos cuando tenga tiempo libre.
Para actualizar el sitio con el nuevo elemento de biblioteca:
1. Seleccione el elemento en el panel Activos.
2. Haga clic con el botn derecho (Windows) o mientras presiona la tecla Control
(Macintosh) y elija Actualizar sitio en el men contextual.
3. Si slo desea actualizar la pgina actual, elija Actualizar pgina actual en el men
contextual.

Separando elementos del original
Si desea evitar que se actualice un caso concreto de un elemento de biblioteca, puede
separar el elemento de la biblioteca seleccionando el elemento y haciendo clic Separar del
Original en el Inspector de Propiedades.

Botn Separar Del Original
Nota: Tambin puede hacer clic dentro del elemento en la pgina con el botn derecho del
ratn (Windows) o mientras mantiene presionada la tecla Control (Macintosh) y despus
elegir Separar del original en el men contextual.
Recibir una advertencia que le informar de que el contenido separado no estar ms
vinculado al documento del original.

Advertencia al separar un elemento del original
Si desea insertar un elemento de biblioteca que esta separado, mantenga pulsado Control
(Windows) o Option (Macintosh) y arrastre el elemento de biblioteca desde el panel de
activos al documento.
Volver a crear elementos de la Biblioteca
Si borra un elemento de biblioteca del panel Activos, puede volver a crearlo a partir de los
documentos que utilizaban ese elemento. Seleccione el elemento en el documento y
despus haga clic en Volver a crear, en el inspector de propiedades.

Volver a crear elementos de Biblioteca
Crear Plantillas del Sitio
Cuando el sitio es grande o hay varias pginas que comparten un diseo comn, tal vez
desee crear una plantilla. Una plantilla es una pgina inicial que contiene los elementos de
diseo para cada pgina de su sitio. Puede crear plantillas y despus usar esas plantillas
para crear las pginas de su sitio. Para ser tiles, las plantillas pueden contener:
Completo diseo de la pgina con colores, disposicin, y una hoja de estilo externa.
Elementos de navegacin comn para todas las pginas de su sitio.
Regiones de la pgina comunes, como puede ser un pie de pgina.

Con una plantilla puede actualizar el aspecto del sitio, cambiando varias pginas en pocos
minutos.
Regiones de las Plantillas
Las plantillas suelen tener cualquier tipo de las siguientes regiones:
Regiones Editables, donde los desarrolladores y proveedores de contenidos colocan los
contenidos del sitio.
Regionales Opcionales, que pueden mostrarse o no basndose en una condicin.
Regiones repetidas que puede mostrar varios elementos, como podra ser un conjunto de
noticias.

Cualquier otro contenido en la pgina que no sea una de estas regiones se considera
bloqueado. Por ejemplo, si tiene una seccin de navegacin en la pgina, con grficos para
los vnculos, puede definirlos en la plantilla y despus bloquearlos en la pgina. Si
cambian los vnculos, basta con realizar el cambio en la plantilla y se actualizan todas las
pginas diseadas con la plantilla.
Crear Plantillas
Las plantillas que se crean aparecen en la lista del panel Activos. Puede crear una plantilla
desde el principio o bien utilizar una pgina HTML existente y guardarla como plantilla.
Para crear una plantilla a partir una pgina HTML existente, elija Men Archivo Guardar
como plantilla y asigne un nombre a la plantilla.
Para crear un nueva plantilla:
Haga clic en la categora Plantillas en el panel Activos.
Haga clic en el botn Nueva plantilla situado en la parte inferior del panel o bien, en el
men Opciones del panel Activos situado en la parte superior derecha del panel, elija
Nueva plantilla.
Asigne un nombre a la plantilla


Aadir una nueva plantilla
Haga clic en Editar para modificar las regiones de la plantilla.

Localizacin del almacenamiento
Los archivos de plantillas (con extensin .dwt) se guardan en la carpeta Templates y se
almacenan en la carpeta del sitio. Dreamweaver MX aade la carpeta Templates a la
carpeta del sitio si todava no existe. La carpeta Templates siempre debe estar al nivel de la
raz.
Definir Regiones Editables
Por definicin, todas las regiones de una plantilla estn bloqueadas a menos que se creen
regiones editables. Puede cambiar tanto las regiones editables como las regiones
bloqueadas de una plantilla. En una pgina creada a partir de una plantilla, slo se pueden
cambiar las regiones editables.
Para crear una regin editable:
Seleccione la zona de la pgina que desea designar como editable.
Elegir Men Insertar Objetos de Plantilla Regin editable.
En el cuadro de dilogo Nueva regin editable, introduzca un nombre exclusivo para la
regin. No utilice caracteres especiales en el nombre de la regin.


Nueva Regin Editable
Una zona resaltada dentro de la regin muestra el nombre de la regin. Si no pyuede ver los
nombres de las regiones, elija Men Ver ayudas Visuales Elementos Invisibles.

Regin editable en la pgina
Nota: Tambin puede hacer clic con el botn derecho del ratn (Windows) o manteniendo
presionada la tecla Control (Macintosh) en la zona y elegir Plantillas Nueva regin editable
en el men contextual Como alternativa puede elegir Regin Editable en el men de
plantillas de la categora comn en la barra Insertar.
Nota: No puede disear una sola regin editable usando varias celdas de tabla. Si necesita
que varias celdas sean editables, entonces deber hacer toda la tabla editable, o crear una
zona editable para cada celda. Si intenta seleccionar varias celdas dentro de una tabla para
hacerlas editables, la tabla completa se convertir en regin editable.
Eliminar Regiones Editables
Puede eliminar una regin editable en una plantilla y de esa manera bloquear esa regin
para todas las pginas basadas en la plantilla. Seleccione la regin y despus Men
Modificar Plantillas Quitar Formato de Plantilla.
Si elimina una regin editable de la plantilla con la que se han construido otras pginas, esa
regin se convierte al contenido original de la Plantilla. Podr tener la opcin de almacenar
el contenido desplazado en otra regin.

Cdigos de color
Puede cambiar tanto el color de las regiones resaltadas como el color de las zonas
bloqueadas. El color de la regin editable aparece en la propia plantilla y en los
documentos basados en ella; el color de la regin bloqueada aparece solamente en los
documentos basados en la plantilla. Elija Men Edicin Preferencias o Dreamweaver
Preferencias (Macintosh OS X) y seleccione la categora Resaltado.

Preferencias de resaltado para las regiones editables de Plantillas
Usar Plantillas
Despus de crear la plantilla puede comenzar a crear las pginas basadas en ella. Las
nicas zonas de la pgina que se pueden cambiar son las partes definidas como editables.
Para crear un nuevo documento basado en una plantilla:
1. Elija Men Archivo Nuevo.
2. Haga clic en la ficha Plantillas del cuadro de dilogo Nuevo documento. (El nombre del
cuadro de dilogo cambia a Nuevo desde plantilla).
3. Seleccione de la lista la plantilla que desea utilizar.
4. Haga clic en crear.


Nuevo Archivo usando plantillas
Utilizando este mtodo le permite usar una plantilla de cualquier sitio definido. Para buscar
una plantilla slo en el sitio actual, seleccinela en la categora Plantilla del panel Activos
y, a continuacin, en el men Opcin del panel Activos, elija Nueva de plantilla.

Nuevo archivo usando plantillas en el men de opciones
Nota: Tambin puede arrastrar una plantilla desde el panel Activos sobre un nuevo
documento en blanco para aplicarla.
Modificar Plantillas
El ahorro real de tiempo se produce cuando hay que aplicar cambios a todas las pginas
que se crearon con la plantilla. Sin plantillas, habra que modificar cada pgina; con
plantillas, basta con modificar una y se actualizan todas las pginas creadas con ella.
Al guardar cambios en la plantilla, el cuadro de dilogo Actualizar archivos de plantilla
muestra una lista de todos los archivos creados a partir de esta plantilla.

Actualizar archivos de plantilla
Al hacer clic en Actualizar, esos archivos se actualizan con los cambios. Tras realizar las
actualizaciones, aparece una lista de cambios en el cuadro de dilogo Actualizar pginas.
Haga clic en Cerrar para salir.

Cuadro de dilogo Actualizar Pginas
Nota: Para guardar cambios en una plantilla, utilice el comando Guardar. Si utiliza el
comando Guardar como plantilla, vuelve a crearse la plantilla y esta nueva plantilla no se
adjunta a las pginas existentes..
Aplicar una Plantilla a una pgina existente
Una vez creada la plantilla, puede aplicarla a otras pginas para actualizar y cambiar
rpidamente su diseo. Cuando se aplica una plantilla, Dreamweaver intenta establecer una
correspondencia entre el contenido existente y las regiones de la plantilla.
Para aplicar una plantilla a una pgina:
1. Abra la pgina a la que desea aplicar la plantilla.
2. Seleccione la plantilla que desea utilizar en el panel Activos y despus haga clic en el
botn Aplicar de la parte inferior del panel.

Tambin puede arrastrar la plantilla a la pgina o bien hacer clic en la plantilla con el botn
derecho del ratn (Windows) o manteniendo presionada la tecla Control (Macintosh) y
hacer clic en Aplicar, en el men contextual.

Aplicando una Plantilla
Nombres de regiones no coincidentes
Si Dreamweaver MX no puede establecer la correspondencia del contenido, aparece un
cuadro de dilogo que permite hacerlo de forma manual. .

Nombres de regiones no coincidentes: asignacin de contenido a las regiones
Resumen

La Biblioteca es una coleccin de elementos de pgina que pueden ser reutilizados
fcilmente en mltiples pginas.
Los tems (elementos) de la Biblioteca pueden ser modificados y los cambios se aplican a
todas aquellas pginas que utilicen los elementos de Biblioteca modificados.
Una plantilla puede ser utilizada para aplicar el mismo diseo a un sitio completo o un
conjunto de pginas de su sitio Web.
Las plantillas contienen regiones editables y bloqueadas.
Las regiones editables pueden ser modificadas en cualquier documento que use la
plantilla.
Las regiones bloqueadas no pueden ser modificados en aquellos documentos que usen la
plantilla.
Las plantillas pueden ser usadas para crear nuevas pginas y que puedan ser aplicadas a
las pginas existentes.
Crear Formularios
Conocer los Formularios
Los formularios son partes esenciales de los sitios Web ms profesionales, ya que ofrecen
el nico modo, en HTML, para que los usuarios enven datos al sitio. Los formularios se
utilizan para diversos fines, entre los que se encuentran::
Pedidos de productos
Registro de Usuarios
Especificacin de los criterios de bsqueda en una base de datos
Administracin de bases de datos en sistemas de Intranet y Extranet

Los formularios incluyen diversos objetos que permiten a los usuarios introducir datos o
seleccionar opciones, adems de un botn Enviar para el envo de los datos al servidor.
Crear un formulario
Para aadir un formulario, primero se inserta una etiqueta de formulario en la pgina. El
formulario incluir objetos en los que los usuarios introducen informacin, y especificar
lo que debe hacerse con los datos.
Para insertar un formulario, elija Men Insertar FormularioFormulario o, en la categora
Formularios de la barra Insertar, haga clic en el botn Formulario.


Botn Formulario en la barra Insertar
Las lneas de puntos en rojo definen visualmente el rea del formulario en la ventana
Documento. Debe colocar todos los elementos del formulario dentro de la zona de puntos
en rojo. Las lneas de puntos se amplan conforme se coloca contenido en el rea del
formulario.

Lneas punteadas rodeando el rea del formulario
Propiedades de Formulario
Para seleccionar el formulario puede:
Hacer clic sobre la lnea punteada roja
Haga clic en cualquier parte dentro del rea del formulario y despus haga clic en <form>
en el selector de etiquetas.

Nota: Cuando se insertan formularios en la vista de diseo de Dreamweaver se crean
automticamente un nombre de formulario y un atributo ID para la etiqueta de formulario.
El nombre y atributo ID del formulario generado en primer lugar es form1, por lo que el
selector de etiquetas mostrar la etiqueta form y su ID precedida de un signo #, de este
modo <form#form1>. Si crea ms formularios se incrementar el numero final de la ID, por
ejemplo form2, form3 y as sucesivamente.

Selector de etiquetas: seleccionando el formulario
El inspector de propiedades muestra las propiedades del formulario.

Propiedades de formulario

Las propiedades de formulario se describen a continuacin:

Propiedad Descripcin
Nombre del
formulario
Se utiliza para la validacin del formulario con JavaScript. El nombre
debe ser nico en la pgina.
Accin Ruta a la pgina o el script que procesa el formulario.
Mtodo Determina el modo de transmitir los datos del formulario al servidor.
Enctype Especifica el tipo de codificacin MIME de los datos enviados.
Destino Especifique la ventana en la que se muestran los datos devueltos por la
aplicacin que procesa el formulario.
Clase Selector de Clase CSS usado para aplicar un formato de diseo al
formulario.

Usando Objetos de Formulario
Los objetos se utilizan para que el usuario pueda introducir datos en el formulario. Puede
permitir que los usuarios introduzcan datos o efecten selecciones de las siguientes formas:
Campos de texto para introducir caracteres alfanumricos
Casillas de verificacin para seleccionar varias opciones
Botones de opcin para seleccionar una opcin entre varias
Listas/mens para seleccionar varias opciones en una lista de desplazamiento o una
nica opcin en un men emergente
Botones para llevar a cabo una accin

Hay otros tipos de objetos de formulario, pero stos son los ms utilizados.
Los objetos de formulario se pueden insertar a travs del men Insertar Formulario, y
despus elegir uno de los objetos del submen. Tambin puede seleccionar la categora
Formularios de la barra Insertar y despus hacer clic en uno de los botones del panel.

Categora Formularios en la barra Insertar
Campos de Texto
Puede permitir que los usuarios introduzcan texto en uno de estos elementos:
Texto lneas individuales de texto como un nombre o una direccin de e-mail
rea de texto varias lneas de texto, por ejemplo, un comentario.
Contrasea tipo especial de texto donde el texto que se introduce se sustituye por
asteriscos o vietas a medida que el usuario escribe en el

Campo de texto, contrasea y rea de texto en un formulario
Puede insertar un objeto de campo de texto mediante el men Insertar Formulario Campo
de Texto o bien, en la categora Formularios de la barra Insertar, haciendo clic en el botn
Campo de texto.

Campo de texto en la barra Insertar
Tambin puede elegir Insertar Formulario rea de Texto para crear un objeto de texto
multilnea.
Use el inspector de propiedades para cambiar las propiedades del campo.

Propiedades de campo de texto
La siguiente tabla muestra otras propiedades para el objeto de texto.

Propiedad Descripcin
Campo de Texto El nombre para el campo de texto
Ancho Car. Nmero mximo de caracteres visibles en el campo
Car. mx. (Campos de
Texto y Contrasea)
Nmero mximo de caracteres que puede escribir el usuario en el
campo
Tipo
Una lnea
Varias lneas
Contrasea

Clase Selector de clase CSS para aplicar formato de diseo al campo de
texto
Val. Inicial Texto predeterminado que aparece en el campo cuando se carga
la pgina
Lneas Num. (rea de
texto)
Nmero mximo de lneas visibles de texto
Ajuste (rea de texto)
Predeterminado (predeterminado por el navegador)
Desactivado (el texto de desplaza hacia la izquierda a menos
que el usuario presione Intro o Retorno)
Virtual (las lneas de texto se ajustan a la ventana del
navegador; los datos enviados no contienen saltos de lnea)
Fsico (las lneas de texto se ajustan a la ventana, los cdigos de
control de salto de lnea estn incrustados en el texto enviado
como puntos de ajuste)


Sugerencias de uso de campos de texto en formularios
Las siguientes propiedades pueden ser crticas para el proceso de los datos:
Nombre del campo: si los datos se van a enviar a una base de datos, el nombre de los
campos debe coincidir con el nombre del campo de la base de datos..
Car. mx: si los datos se van a enviar a una base de datos, el valor de la propiedad Car.
mx debe coincidir con la longitud del campo correspondiente en la base de datos. .
Campos de contrasea: la contrasea se oculta nicamente en la ventana del navegador.
Cuando se enva el formulario, la contrasea se transmite en texto normal y puede ser
interceptada. Cuando se teme por la seguridad, como en los sitios de comercio
electrnico, la informacin debe enviarse a travs de SSL (Secure Sockets Layer).

Cuando se crean objetos de campo de texto, Dreamweaver MX utiliza las siguientes
etiquetas HTML::
Texto: <input type=text>
rea de texto: <textarea name="textarea"></textarea>
Contrasea: <input type=password>
Casillas de Verificacin
Las casillas de verificacin permiten que los usuarios seleccionen una o varias opciones de
un grupo de opciones relacionadas. El usuario puede activar o desactivar una casilla de
verificacin.

Ejemplos de Casillas de Verificacin
Para insertar un objeto de casilla de verificacin, seleccione Insertar Formulario Casilla de
Verificacin o bien, en la categora Formularios de la barra Insertar, haga clic en el botn
Casilla de verificacin.

Casilla de Verificacin en la barra Insertar
Dreamweaver proporciona un nombre predeterminado y exclusivo, el cual puede modificar
en el inspector de propiedades. Este nombre debe ser exclusivo entre los objetos de
formulario de la pgina.

Propiedades de la Casilla de Verificacin
Las dems propiedades son las siguientes:

Propiedad Descripcin
Nombre de
casilla
Un nombre para la casilla de verificacin.
Valor Activado Valor enviado si se selecciona la casilla de verificacin
Estado inicial
Activada (la casilla de verificacin est activada inicialmente)
Desactivado (la casilla de verificacin no est activada)

Clase Selector de clase CSS para aplicar formato de diseo al objeto de
formulario

Sugerencias de uso de casillas de verificacin
Las siguientes propiedades podran ser crticas para el proceso de los datos:
Valor activado: en muchos casos, una aplicacin realiza pruebas para ver si la casilla
estaba activada, pero tal vez espere un valor concreto.
Si se utilizan varias casillas de verificacin conjuntamente para permitir varias respuestas
en cuestionarios y otras preguntas, las casillas de verificacin de ese grupo deben tener el
mismo nombre, pero distintos valores activados.

La creacin de una casilla de verificacin genera la etiqueta HTML: <input
type=checkbox>
Botones de Opcin
Los botones de opcin se utilizan cuando el usuario debe seleccionar una de las opciones
de un grupo de opciones. Generalmente, los botones de opcin se utilizan en grupos. Si
slo hay un botn, no hay forma de que el usuario anule la seleccin de la opcin. Si el
usuario selecciona un botn de opcin, los dems botones de opcin del grupo se
desactivan automticamente.

Ejemplo de botones de opcin
Para insertar un objeto de botn de opcin, seleccione Men Insertar Formulario Botn de
opcin o bien, en la categora Formularios de la barra Insertar, haga clic en Botn de
opcin.

Botn de Opcin en la Barra Insertar
Dreamweaver proporciona un nombre predeterminado y exclusivo, que conviene que
modifique. Los botones de opcin del mismo grupo deben tener el mismo nombre, o no
funcionarn correctamente.

Propiedades del Botn de Opcin
Las dems propiedades del botn de opcin son las siguientes:

Propiedad Descripcin
Botn de opcin Nombre del grupo de botones de opcin.
Valor Activado Valor enviado si se selecciona el botn de opcin
Estado Inicial
Activada (el botn de opcin est activado inicialmente)
Desactivado (el botn de opcin no est activado inicialmente)

Clase Selector de clase CSS para aplicar formato al objeto

Grupo de botones de Opcin
Tambin puede insertar un grupo de botones de opcin si selecciona Men Insertar
Formulario Grupo de opcin o bien, en la categora Formularios de la barra Insertar, haga
clic en Grupo de opcin.

Grupo de Botones de Opcin en la barra Insertar
En el cuadro de dilogo Grupo de opciones, escriba el nombre del grupo de botones de
opcin y despus introduzca la etiqueta y el valor de cada botn. Elija entre saltos de
pgina o tablas para separar los botones de opcin. Si desea que los botones estn en la
misma lnea, elija saltos de lnea y despus quite los saltos de la pgina.

Cuadro de dilogo de Grupo de botones de opcin
La creacin de un botn de opcin genera la etiqueta HTML: <input type=radio>
Campo Lista/men
Una lista/men permite a los usuarios elegir de una lista de desplazamiento o de un men.
El men limita a los usuarios a una seleccin, pero pueden elegir una o ms opciones de
una lista si presionan la tecla Control mientras hacen clic en varios elementos. (Se trata de
una opcin del navegador, pero tanto Netscape Navigator como Microsoft Internet
Explorer utilizan Control en las plataformas Windows y Macintosh.)

Ejemplo de eleccin en Men
Para insertar un objeto de lista/men, seleccione Insertar Formulario Lista/men o bien, en
la categora Formularios de la barra Insertar, haga clic en el icono Lista/men.

Lista/Men en la barra Insertar
Dreamweaver inserta un objeto de men en el formulario. El inspector de propiedades
permite cambiar el objeto de men a una lista.
El cuadro de texto situado a la izquierda del inspector de propiedades contiene el nombre
de la lista/men. Dreamweaver proporciona un nombre predeterminado y exclusivo, que
conviene que modifique.

Propiedades Lista/Men
Para cambiar de un men a una lista, seleccione Lista en la opcin Tipo. Las dems
propiedades son las siguientes:

Propiedad Descripcin
Tipo Indica si se trata de una lista o de un men
Altura (slo Listas) Elementos mostrados simultneamente
Selecciones (slo
Listas)
Si se activa Permitir mltiples selecciones, el usuario podr efectuar
varias selecciones en la Lista
Seleccionado
Inicialmente
El elemento seleccionado estar activado cuando se abra la pgina
Note: Slo se puede elegir inicialmente un elemento de lista/men en
los mens y listas que no permiten mltiples selecciones
Clase Selector de clase CSS para aplicar formato al objeto

Valores de Lista
Para aadir elementos a la lista o al men, haga clic en el botn Valores de lista del
inspector de propiedades. En el cuadro de dilogo Listar valores, introduzca la etiqueta que
desea mostrar al usuario y el valor que se enva si el usuario selecciona esa opcin.
Utilice los botones ms (+) y menos (-) para aadir o quitar elementos, y las flechas arriba
y abajo para mover el elemento seleccionado hacia arriba o hacia abajo en la lista.

Cuadro de dilogo Valores de Lista
Sugerencias para el uso de listas
Cuando utilice listas que permiten mltiples selecciones, indique algo que sugiera que se
pueden seleccionar varios elementos e instrucciones sobre cmo realizar varias
selecciones. Si la lista contiene menos de cinco elementos, utilice casillas de verificacin
en lugar de un men o una lista. .
La creacin de una lista/men genera las etiquetas HTML: <select name="selname">
<option value=value>display</option> </select>
Botones
Los botones se utilizan para enviar formularios o para restablecer todos los campos a sus
valores iniciales, como se muestra en el siguiente formulario.

Formulario con botones
Para insertar un objeto de botn, seleccione Insertar Formulario Botn, o bien, en la
categora Formularios de la barra Insertar, haga clic en el objeto Botn.

Botn de Formulario en la barra Insertar
El cuadro de texto situado a la izquierda del inspector de propiedades contiene el nombre
del botn. Dreamweaver proporciona un nombre predeterminado, el cual puede modificar.

Propiedades del Botn

Las dems propiedades son las siguientes:

Propiedad Descripcin
Etiqueta Etiqueta de texto que aparece en el botn
Accin
Enviar formulario
Restablecer formulario
Ninguno (los botones sin accin se utilizan para establecer vnculos con otros
documentos o para ejecutar comandos JavaScript)

Clase Selector de clase CSS para aplicar formato al objeto

Sugerencias para el uso de botones
Las siguientes propiedades podran ser crticas para el proceso y el uso de los datos:
Algunas aplicaciones de proceso de datos comprueban la existencia de un nombre de
botn asociado al botn Enviar para asegurarse de que se ha enviado el formulario.
Pregunte al programador de la aplicacin o consulte la documentacin si su botn Enviar
debe tener un nombre concreto.
A la hora de enviar formularios, muchos usuarios hacen clic por error en los botones
Restablecer, lo que provoca que se pierdan los datos introducidos, situacin sta que puede
llegar a ser frustrante. Por lo tanto, tal vez sea conveniente que prescinda del botn
Restablecer a menos que considere que va a ser til para el usuario. Si finalmente decide
utilizar un botn Restablecer, asegrese de que la etiqueta del mismo es clara e intente
colocarlo en la pgina de modo que las posibilidades de que un usuario haga clic en l por
error sean mnimas.

Cuando se aaden botones se genera una de las siguientes etiquetas HTML: <input
type="submit" name="Enviar" value="Submit">
<input type="reset" name="Restablecer" value="Reset">
<input type="button" name="Botn" value="Button">

Procesar formularios
Una vez que aade los objetos de formulario a la pgina, debe configurar los parmetros en
el formulario para recopilar los datos una vez que el usuario hace clic en el botn Enviar.
Tal vez decida procesar los datos de las siguientes formas:
Grabarlos en una base de datos.
Utilizarlos para proporcionar parmetros de bsqueda en una base de datos.
Enviarlos como un correo electrnico.
Realizar clculos (como el pago de un prstamo) en funcin de los datos y devolver el
resultado al usuario.

Accin del formulario
Un formulario HTML siempre va acompaado de una accin, que es una de las
propiedades del formulario.
La accin especifica un URL que procesa el formulario. El URL puede sealar a:
Una direccin de correo electrnico, en cuyo caso los datos del formulario se envan en un
mensaje de correo electrnico a una direccin especificada, y el navegador vuelve a cargar
la pgina de formulario.
Una pgina de aplicacin del lado del servidor, como una pgina ColdFusion o JSP, que
procesa los datos del formulario, utilizndolos quizs para buscar o actualizar una tabla de
base de datos y despus devolver los resultados al navegador como HTML.
Un programa CGI (Common Gateway Interface), escrito en un lenguaje como Perl o Java,
que procese los datos del mismo modo que lo hace la pgina de aplicacin del lado del
servidor y que despus redireccione la solicitud a otra pgina HTML que se va a devolver
al navegador.

Nota: En este curso no se trata la programacin del lado del servidor por lo tanto, esta
unidad no describe el proceso real de los datos. Si le interesa aprender ms sobre la
creacin de aplicaciones Web que puedan procesar datos de formularios, este tema
relacionado con distintos servidores de aplicaciones se trata en la formacin dirigida a
instructores de Macromedia. Si desea obtener ms informacin sobre estos cursos, visite
http://www.macromedia.com/training.
.
Datos de Formulario y mtodos
Cuando se enva el formulario, los datos del mismo se aaden de forma predeterminada al
URL y se envan a la pgina de accin. A continuacin se muestra un ejemplo de datos de
formulario en un URL:

URL mostrando datos de formulario
El atributo Mtodo del formulario determina el modo de enviar los datos del formulario al
servidor. Los valores posibles son:
GET - el valor predeterminado para HTML los datos del formulario se envan en la
cadena de consulta del URL, como en este ejemplo:
http://www.site.com/action.cgi?name=Jane&age=33 Donde las dos entradas de formulario
son name=Jane y age=33 y se envan a action.cgi para procesarlas.
POST los datos se envan en el encabezado de HTML, que es invisible al usuario

El mtodo que escoja depender de lo que espere la pgina de accin. Si trabaja con un
desarrollador de aplicaciones que gestiona el procesamiento del lado del servidor,
pregntele el mtodo que debe utilizarse.
El mtodo se establece en el inspector de propiedades del formulario seleccionado. Si
selecciona Predeterminado, el mtodo se establece en GET.

Men emergente de mtodos de envio de Formulario
Ajustar el foco en un formulario
Cuando se muestra un formulario en el navegador, el punto de insercin no se coloca
automticamente en el primer objeto del formulario. Esta funcionalidad es una cortesa
hacia los usuarios, y les evita tener que hacer clic en el campo (o desplazarse con el
tabulador) antes de escribir. Establecer el punto de insercin se conoce como establecer el
foco. Puede aadir un pequeo cdigo JavaScript al formulario para establecer el foco en
el primer campo, facilitando a los usuarios la tarea de rellenar el formulario.
Aadir JavaScript
Para aadir cdigo JavaScript para establecer el foco en el primer campo del formulario, se
necesita el nombre del formulario y el nombre del campo. Dreamweaver MX aade un
nombre predeterminado al formulario, o bien puede cambiar el nombre por otro ms
descriptivo. Seleccione el formulario y despus busque el nombre en el inspector de
propiedades.

Nombre del formulario en en el Inspector de Propiedades
La sentencia JavaScript necesaria es:

window.document.formname.fieldname.focus()
Donde formname y fieldname sonlos nombres reales de los elementos de la pgina.
Focus() es un comando JavaScript integrado para los campos de formulario.
Desea ejecutar el cdigo JavaScript en cuanto se carga la pgina. Para ello, utilice el evento
onLoad, que puede especificarse como un atributo de la etiqueta <body>. Entonces, para
establecer el foco en el campo deseado debe cambiar a la vista de cdigo o a la vista de
cdigo y diseo y editar la etiqueta <body> para aadir el atributo onload:

<body onLoad=window.document.formname.fieldname.focus()>
Si la etiqueta <body> tiene otros atributos, la adicin de este otro no les afectar.

Resumen

Los formularios son el nico mecanismo en HTML para la entrada de datos por parte de
los usuarios.
Un formulario consta de un contenedor de formulario que tiene distintos objetos de
formulario dentro de este.
El formulario y los campos de formulario pueden insertarse usando el Men Insertar o la
Categora Formularios de la barra Insertar.
Uno de los objetos de formulario debe ser un botn de envio que permita a los usuarios
presionarlo para enviar los datos del formulario.
La propiedad Accin de Formulario debe ser una URL a la que se enviarn los datos, y
suele ser una direccin de email o una pgina de aplicacin del lado de servidor.
Los datos de Formulario puede ser enviados utilizando los mtodos POST o GET.

Comprobacin, mantenimiento y carga
Comprobando su sitio

Una vez que haya acabado de crear las pginas del sitio, deber comprobar todos los
archivos localmente para asegurarse de que todos los vnculos funcionan y de que no faltan
archivos.
Debera comprobar lo siguiente:
Comprobar la accesibilidad
Comprobar la compatibilidad con los navegadores.
Comprobar que los vnculos no estn rotos.
Comprobar que se han cumplido las especificaciones de codificacin correctas.
Revisar la ortografa.

Comprobando la accesibilidad
La comprobacin de accesibilidad genera un informe detallado de conflictos entre su
contenido y las lneas gua de la Seccin 508 de la ley de USA de rehabilitacin de
1998(1998 Rehabilitation Act). Puede validar la accesibilidad del documento actual,
archivos seleccionados o el sitio completo.
Para comprobar la pgina actual, elija Men Archivo Comprobar Pgina Comprobar
Accesibilidad
El grupo de paneles Resultados mostrar entonces cualquier advertencia o errores de
accesibilidad. Haga clic en Ms info., para abrir el panel de Referencias y que muestre la
lnea gua relevante. Tambin se resalta en Vista de cdigo la lnea de cdigo que genera el
error o advertencia.

Problemas de accesibilidad en el grupo de paneles Resultados

Comprobando los vnculos
Los vnculos rotos son extremadamente molestos para los usuarios. Aunque Dreamweaver
MX es muy adecuado para reparar vnculos cuando se modifican los archivos del sitio,
deber comprobarlos antes de cargar las pginas en el servidor.
Puede comprobar los vnculos del documento actual, de una carpeta del sitio o del sitio
completo. Dreamweaver slo comprueba los vnculos con otros documentos del sitio. Los
vnculos externos se enumeran pero no se comprueban.
Documento actual
Para comprobar los vnculos del documento actual:
1. Guarde el archivo.
2. Elija Men Archivo Comprobar pgina Comprobar Vnculos, o presione las teclas
Mays.+ F8 de su teclado.

El informe aparece en el panel Verificador de Vnculos del grupo de paneles Resultados.

Comprobar Vnculos Vnculos Rotos
Dreamweaver genera varios informes sobre los vnculos existentes en la pgina.
Seleccione un informe del men emergente Mostrar para ver otro informe. Las opciones de
informes son::
Vnculos rotos
Vnculos externos
Archivos hurfanos

Los archivos hurfanos son aquellos para los que no existe ningn vnculo en ninguna otra
pgina del sitio. Algunos de estos archivos pueden ser activos tales como archivos de
origen de Fireworks (png) que desee mantener en el sitio. Otros podran ser archivos
obsoletos que probablemente desee eliminar antes de cargar los archivos en el servidor.
Comprobacin del sitio
Para comprobar los vnculos del sitio elija Men Sitio Comprobar vnculos en todo el sitio.
Para comprobar los vnculos de una carpeta o archivo seleccionado del sitio, seleccione la
carpeta o los archivos en el panel Sitio. Haga clic en uno de los archivos seleccionados con
el botn derecho del ratn (Windows) o mientras presiona Control (Macintosh) y elija
Comprobar vnculos Archivos/carpetas seleccionados del men contextual. El informe
aparece en el panel Verificador de vnculos del grupo de paneles Resultados.
Reparando vnculos rotos
Puede reparar los vnculos rotos en el panel Verificador de vnculos o abrir los archivos
desde la lista y reparar los vnculos en el Inspector de Propiedades.
Para reparar los vnculos desde el panel Verificador de vnculos:
1. Seleccione el archivo de la columna Vnculos rotos. Aparecer un icono de carpeta junto
al vnculo roto.
2. Haga clic en el icono de carpeta y localice el archivo correcto para el vnculo.


Archivo seleccionado en la columna vnculos rotos
Si hay otras referencias al mismo archivo que tambin estn rotas, Dreamweaver le
preguntar si desea repararlas.



Cuadro de dilogo Reparar otros Vnculos
Tambin puede hacer doble clic en el archivo desde la columna Archivos en el panel
Verificador de vnculos. Dreamweaver abre el documento y selecciona el vnculo o la
imagen de la pgina con una referencia rota. Seguidamente podr reparar el vnculo en el
inspector de propiedades.
Comprobando la compatibilidad con navegadores Web
Debe prever los navegadores de que dispondrn los usuarios teniendo en cuenta el objetivo
del sitio y qu sabe acerca de ellos.
Los sitios de intranets son normalmente los ms sencillos, ya que lo ms probable es que
exista un navegador estndar para toda la organizacin.
Puede hacer suposiciones sobre los usuarios, incluso para los sitios de acceso pblico, con
bastantes posibilidades de acertar. Por ejemplo, si el sitio proporciona noticias y vende
productos relacionados con el desarrollo Web, es de suponer que los usuarios dispondrn
de versiones actualizadas de Internet Explorer o de Netscape..

La funcin de comprobacin de navegadores analiza el HTML de las pginas para ver si
hay etiquetas o atributos incompatibles con los navegadores de destino. Existen dos formas
en Dreamweaver MX 2004 para comprobar la compatibilidad con navegadores Web:
Utilizando el comprobador automtico de navegadores de destino.
Comprobando manualmente la compatibilidad con los navegadores.

Comprobacin automtica de compatibilidad con navegadores
Dreamweaver MX 2004 utiliza un comprobador automtico de soporte con navegadores de
destino que esta activado de forma predeterminada. Cada pgina se valida cuando se abre, y
los resultados pueden ser encontrados en el panel Resultado cuando lo requiera.
La barra de documento contiene un botn para la funcin de comprobacin de soporte de
navegador. Este botn contiene un signo de advertencia Amarillo si encuentra errores. Haga
clic en el botn para acceder a los elementos disponibles en su men.

Comprobacin automtica de navegadores de destino con errores
Configuracin
Puede hacer clic en la opcin de configuracin para seleccionar los navegadores para los
que se realizar la comprobacin.

Navegadores de destino
Mostrar todos los errores
Eligiendo Mostrar todos lo errores en el men de Comprobacin automtica de
navegadores de destino, har que el grupo de paneles Resultados muestre en el panel
Revisin de navegadores de destino, todos los errores encontrados. Puede hacer doble clic
en el error para seleccionar el cdigo que genera el error.

Revisin de navegadores de destino
Comprobacin manual del documento
Para comprobar navegadores de destino manualmente, la funcin comprobar navegadores
le muestra un informe de lo que ha encontrado, pero sus documentos no se alteran de
ningn modo.
Puede ejecutar una comprobacin en un documento, en una carpeta o en un sitio completo.
Para ejecutar una comprobacin de navegadores de destino en un documento:
Guarde la pgina. Dreamweaver slo comprueba la ltima versin guardada del archivo.
Elija Men Archivo Comprobar Pgina Comprobar navegadores de destino.

Aparece un informe en el panel Revisin del navegador de destino (en el grupo de paneles
Resultados) en el que se muestra el tipo de problema y su gravedad, as como la lnea en
laque ha ocurrido el problema. Una vez corregidos los errores, deber ejecutar de nuevo la
comprobacin para asegurarse de que las correcciones que ha realizado no han originado
nuevos problemas.

Panel Revisin de navegadores de destino con resultados
Nota: No todos los elementos incluidos en el informe son problemas, sino tan slo avisos y
mensajes informativos.
Para guardar el informe, haga clic en el botn Guardar informe (disquete) del panel
Revisin del navegador de destino. El informe es un archivo temporal que se perder si no
lo guarda.
Si no ve el panel Resultados, elija Men Ventana Resultados Revisin del navegador de
destino.
Comprobacin manual del sitio
Para ejecutar una comprobacin de los navegadores de destino en el sitio:
1. Seleccione el panel Revisin del navegador de destino en el grupo de paneles Resultados.
2. Haga clic en la flecha verde situada en la parte izquierda del panel.
3. Seleccione Configuracin y elija los navegadores de destino en el cuadro de dilogo y
posteriormente haga clic en Aceptar
4. Elija Revisar navegadores de destino para todo el sitio.


Comprobador navegadores de destino en todo el sitio
Haga clic con el botn derecho (Windows) o presione Control mientras hace clic
(Macintosh) en un elemento de la lista y elija Ms info en el men contextual para ver
una descripcin ms completa del problema. Las mismas opciones se encuentran
disponibles si utiliza el men Opciones, situado en la parte superior derecha del panel.
Tambin puede elegir Abrir resultados en el navegador para ver los resultados en una
pgina con formato HTML que podr imprimir.

Men contextual para acceder a ms informacin
Realizar informes de su sitio
Puede generar informes sobre diversos elementos HTML de un sitio mediante el comando
Informes. Puede comprobar si existen etiquetas de fuentes anidadas, texto alternativo que
no est presente y documentos que carecen de ttulo, entre otras posibilidades. Una vez que
ejecute el informe, podr guardarlo como archivo XML.
Elija Men Sitio Informes y elija las opciones que desee comprobar del cuadro de dilogo
Informes. Puede comprobar el documento actual, el sitio completo, archivos seleccionados
o una carpeta del sitio.

Cuadro de dilogo de Informes del Sitio
Estos son algunos de los elementos sobre los que puede generar informes:

Elemento del informe Descripcin
Protegido por Lista de archivos protegidos por un miembro del equipo
Design Notes Lista de todas las Design Notes
Modificado recientemente Lista de todos los archivos que han sido actualizados
recientemente
Etiquetas de fuentes
anidadas combinables
Lista de etiquetas de fuentes anidadas que podran combinarse
en una sola etiqueta para simplificar el cdigo HTML
Accesibilidad Directrices incumplidas de la seccin 508.
Falta texto Alt Lista de textos alternativos de imgenes que no estn
presentes y que son importantes para cumplir las normas de
accesibilidad.
Etiquetas anidadas
redundantes
Lista de etiquetas anidadas que no tienen efecto alguno
Etiquetas vacas
eliminables
Lista de etiquetas vacas que pueden eliminarse sin que ello
afecte al contenido o al formato de la pgina
Documentos sin ttulo Lista de documentos sin ttulo

Comprobar ortografa
Un aspecto importante y que, sin embargo, suele olvidarse es la comprobacin ortogrfica
del contenido de la pgina. Para comprobar la ortografa, abra cada pgina del sitio y elija
Men Texto Ortografa para abrir el comprobador ortogrfico.

Cuadro de dilogo Comprobar Ortografa
Mantenimiento de archivos

El trabajo con los archivos del sitio, implicar en ocasiones la necesidad de mover un
archivo, eliminarlo o cambiarlo de nombre. Una vez que haya definido un sitio, deber
utilizar el panel Sitio para realizar cambios en los archivos. Al realizar el mantenimiento de
archivos en el panel Sitio, tendr la seguridad de que la informacin de vnculos permanece
correcta.
Por el contrario, si realiza cambios en archivos o carpetas en el Explorador de Windows
(Windows) o Finder (Macintosh), Dreamweaver no reconocer el cambio y no podr
mantener los vnculos correctamente.
Cambiar de nombre los archivos
Para cambiar el nombre de un archivo o una carpeta:
1. Seleccione el nombre en el panel Sitio. Haga clic de nuevo. Aparecer un rectngulo
alrededor del nombre para indicar que puede editarlo.
2. Escriba el nuevo nombre y presione Intro (Windows) o Return (Macintosh). Se abrir el
cuadro de dilogo Actualizar archivos, en el que se enumeran todos los archivos afectados
por el cambio de nombre (en el caso de que los haya).
3. Haga clic en Actualizar.


Cuadro de dilogo Actualizar Archivos mostrando archivos para ser modificados.
Nota: Dreamweaver abre cada uno de los archivos de la lista, realiza el cambio, guarda el
archivo y lo cierra. Si alguno de los archivos de la lista est abierto actualmente,
Dreamweaver realiza el cambio pero no guarda ni cierra el archivo.
Mover archivos
Si un archivo o carpeta no est en el lugar correcto, puede moverlo fcilmente a su
ubicacin correcta. Al hacerlo en el panel Sitio, se asegurar de que toda la informacin de
vnculos permanezca intacta y correcta.
Arrastre el archivo del panel Sitio a la nueva ubicacin. Se abrir el cuadro de dilogo
Actualizar archivos con la lista de archivos afectados por el traslado del archivo o carpeta.
El explorador de archivos integrado
El explorador de archivos integrado en el panel Sitio le proporciona acceso a los archivos
de su escritorio, de la unidad de disco duro o de cualquier unidad de la red local. El
explorador de archivos funciona de la misma forma que el Explorador de Windows o
Finder de Macintosh por lo que se refiere a mover archivos, eliminarlos o cambiar sus
nombres.
Si arrastra un archivo de un sitio a otro o a una carpeta no asociada al sitio, Dreamweaver
crea una copia del archivo en la nueva ubicacin.
Si arrastra un archivo no asociado al sitio a otra ubicacin no asociada a ningn sitio,
Dreamweaver mueve el archivo.

Para utilizar el explorador de archivos integrado haga clic en el men emergente Sitios.
Ver su disco duro local y cualquier otro de la red.

Explorador de Archivos Integrado

Conectar con un sitio remoto

Cuando termine la comprobacin local de sus archivos, deber enviar los archivos al
servidor Web. Al transferir los archivos de su sitio local a un sitio remoto, Dreamweaver
MX mantiene exactamente la misma estructura de carpetas en ambos sitios. Si una carpeta
no existe en el sitio remoto, Dreamweaver la crea. Esta funcin garantiza que los vnculos
relativos creados en el sitio local continen funcionando en el sitio remoto, ya que los sitios
son idnticos.
Aadir un sitio remoto
Deber utilizar el comando Administrar sitios para establecer la conexin remota. Una vez
establecida la carpeta remota y el mtodo de conexin con el sitio remoto, podr transferir
los archivos locales. .
1. Elija Men Sitio Administrar Sitios.
2. Seleccione el sitio que requiere la conexin remota.
3. Haga clic en Editar.


Cuadro de dilogo Administrar sitios
En el cuadro de dilogo Definicin del sitio, haga clic en la ficha Avanzadas si aparece el
asistente Definicin del sitio. Seleccione Datos remotos de la lista Categora.


Categora Datos Remotos en el cuadro de dilogo Definicin del sitio
Elija el mtodo de acceso para la conexin con la ubicacin remota. Las opciones
enumeradas en el panel varan en funcin del mtodo de acceso. Por ejemplo, si elige FTP,
deber introducir un nombre y una contrasea de conexin. Si selecciona
Desproteger/proteger, podr introducir su nombre y direccin de correo electrnico.
Los mtodos de acceso son:
FTP (File Transfer Protocol : Protocolo de transferencia de archivos)
Local/red (para una unidad local o asignada)
RDS (Remote Development Services; Servicios de desarrollo remoto)
Base de datos SourceSafe
WebDAV (Web-based Distributed Authoring and Versioning; Creacin y control de
versiones distribuido basado en la Web es un conjunto de extensiones del protocolo HTTP
que permite a los usuarios editar y administrar archivos en colaboracin en servidores Web
remotos).

Ajustes FTP
El acceso FTP se utiliza habitualmente para obtener archivos o colocarlos en un sitio
remoto. Cuando elija FTP como mtodo, ver lo siguiente:

Configuracin FTP
A continuacin se enumeran las opciones para FTP:

Opciones Valor
Servidor FTP Nombre de Internet o direccin IP del servidor FTP
Directorio del servidor Directorio del sitio remoto en el que se almacenan los
documentos pblicos.
Usuario y contrasea Informacin de acceso
Utilizar FTP pasivo Se utiliza si su configuracin de cortafuegos requiere FTP
pasivo
Utilizar Cortafuegos Seleccione esta opcin si conecta con un servidor remoto
desde dentro de un cortafuegos
Utilizar FTP seguro (SFTP) Seleccione si necesita crear una conexin segura. SFTP
utiliza encriptacin y seguridad de clave pblica para hacer
segura la conexin con el servidor remoto.
Cargar archivos en el servidor
automticamente al guardar
Cada vez que guarde el archivo, sera colocado tambin en
el servidor remoto.
Permitir desproteger y
proteger archivos
Permite el bloqueo de archivos cuando un miembro del
equipo esta trabajando en el archivo.

Ocultar carpetas y archivos
La ocultacin de elementos de un sitio permite excluir carpetas y tipos de archivos al
realizar operaciones como Obtener o Colocar. Por ejemplo, no necesita los archivos de
origen de Fireworks o Flash en el servidor. Los archivos ocultos permanecen en el sitio
local y no se cargan en el servidor a no ser que cambie manualmente la configuracin de
ocultacin.
Puede ocultar carpetas y archivos para excluirlos de estas operaciones:
Colocar, Obtener, Desproteger y Proteger
Informes
Sincronizacin
Visualizacin en el panel Activos
Actualizaciones de plantillas y bibliotecas
Operaciones que afectan a todo el sitio, como la comprobacin de vnculos y las
bsquedas y sustituciones
Seleccionar local ms reciente y Seleccionar remoto ms reciente

Ocultar tipos de archivos especficos
Puede indicar los tipos de archivos concretos que Dreamweaver MX debe ocultar utilizando
la extensin de archivo o cualquier terminacin del nombre de archivo.
Para ocultar tipos de archivos:
1. En el men de opciones de panel Archivos elija Sitio Ocultacin Configuracin.
2. Seleccione Ocultar archivos que terminen en e introduzca el tipo de archivo en el cuadro
de texto. Separe los tipos de archivo con un espacio; no utilice comas ni signos de punto y
coma.


Categora Ocultacin en el cuadro de dilogo Definicin del sitio
Los nombres de los archivos afectados aparecen tachados con una lnea roja en el panel
Sitio para indicar que se encuentran ocultos.


Archivos ocultados en el panel Archivos
Para ocultar un archivo o una carpeta:
Seleccinelo y elija Ocultacin Ocultar.
Para anular la ocultacin de un archivo o una carpeta: Seleccinelo y elija Sitio Ocultacin
Anular ocultacin.
Puede tambin hacer clic con el botn derecho(Windows) o Control-clic (Macintosh) en la
carpeta y elegir una opcin en el submen Ocultacin del men contextual.

Subir archivos al servidor remoto
Una vez que haya definido el sitio remoto, podr utilizar Dreamweaver para cargar los
archivos. Para ver el sitio local y el remoto de forma simultanea, haga clic en el icono
Expandir/Contraer de la barra de herramientas del panel Archivos.

Expandir/contraer en el Panel de archivos
Conectar al servidor
Si desea ver los archivos del sitio remoto antes de colocar sus archivos, haga clic en
Conectar. Si el panel Archivos est ampliado, ver el sitio remoto a la izquierda y el local a
la derecha. Si el panel Archivos no est ampliado, ste slo mostrar el sitio remoto.

Panel archivos ampliado mostrando el botn Conectar

Colocar archivos frente a Desproteger archivos
Para copiar archivos del sitio local al remoto, puede usar tanto la opcin colocar Archivo
como Proteger Archivo. Si es la nica persona que trabaja en el sitio, puede utilizar los
comandos colocar y obtener para copiar archivos del sitio local al remoto. Si est
trabajando en un equipo, puede utilizar mejor los comandos proteger y desproteger para lo
mismo.

Panel de archivos mostrando los botones Obtener y Colocar
Seleccione el archivo o carpeta que necesita copiar al sitio remoto y despus haga clic en
Colocar. Si no esta conectado con el sitio remoto, Dreamweaver conectar y copiara el
archive en el sitio remoto.
Archivos dependientes
Como las pginas Web pueden contener muchos recursos, como imgenes, el hecho de
colocar una nueva versin de estas puede requerir tambin colocar las nuevas imgenes o
elementos incluidos.
Cuando coloca un archivo en el servidor remoto, un cuadro de dilogo aparece preguntando
si desea subir tambin los archivos dependientes, como imgenes, que estn incrustados en
la pgina. Si existen esto archivos en el servidor remoto, haga clic en No. En caso contrario,
haga clic en Si y sern copiados tambin. Para evitar este mensaje en el futuro puede
seleccionar la opcin No mostrar este mensaje de nuevo.

Cuadro de dilogo archivos dependientes
Encontrar archivos ms recientes
Puede buscar manualmente archivos que sean mas recientes en el servidor local o remoto y
despus obtenerlos o colocarlos para sincronizar el sitio.
Seleccionar archivos locales ms recientes
Para comprobar que archivos son ms recientes en el sitio local sin sincronizar; elija
Edicin Seleccionar local ms reciente en el men de opciones del panel Archivos.
Los archivos locales ms recientes son seleccionados en el panel de archivos. Podr
entonces colocar los archivos en el sitio remoto.
Seleccionar archivos remotos ms recientes
Para comprobar que archivos son ms recientes en el sitio remoto sin sincronizar; elija
Edicin Seleccionar remoto ms reciente en el men de opciones del panel Archivos. .
Los archivos remotos ms recientes son seleccionados en el panel de archivos. Podr
entonces obtener los archivos del sitio remoto.

Men de Opciones en el Panel Archivos
Sincronizar Archivos

Despus de cargar sus archivos locales en el sitio remoto, podr sincronizar los archivos de
ambos sitios. Esta operacin slo carga los archivos ms recientes que han sido
modificados localmente.
Para sincronizar los archivos:
1. Seleccione los archivos o carpetas que desea sincronizar. Si desea sincronizar el sitio
completo, seleccione la carpeta raz.
2. Elija Sitio Sincronizar (en el men de opciones del panel Archivos). Tambin puede
hacer clic en un archivo o carpeta con el botn derecho (Windows) o mientras presiona
Control (Macintosh) y elegir Sincronizar en el men contextual.


Sincronizar Archivos
3. En el cuadro de dilogo Sincronizar archivos, elija la sincronizacin de los archivos o del
sitio completo en el men emergente Sincronizar.
4. Seleccione la opcin que desee del men emergente Direccin. Las opciones disponibles
son: Colocar archivos ms nuevos en remoto, Obtener archivos ms nuevos de remoto u
Obtener y colocar archivos ms nuevos.
5. Haga clic en Vista previa para comenzar con el proceso


Vista Previa de sincronizar
6. Aparecer un informe con los archivos que requieren sincronizacin. Podr optar por
actualizar todos los archivos o anular la seleccin de archivos de la lista.
7. Cuando haga clic en Aceptar, se actualizarn todos los archivos seleccionados.


Resultados del comando sincronizar
Resumen

Siempre debe comprobar el sitio antes de cargarlo en el servidor.
Asegrese que su sitio cumple con las directrices de accesibilidad.
Asegrese de que el sitio funciona en los navegadores que vayan a utilizar los usuarios a
los que va destinado.
Asegrese de que todos los vnculos continan funcionando antes de cargar el sitio.
Compruebe la ortografa de los documentos.
Asegrese de usar el panel de Archivos de Dreamweaver para la gestin de los archivos
del sitio para que sus vnculos siempre funcionen.
Puede utilizar FTP y local/red, entre otros mtodos, para cargar archivos.
Slo es necesario que cargue los archivos que hayan cambiado como resultado de sus
operaciones de mantenimiento usando la funcin Sincronizar.


Fuente:
Macromedia, Inc. 275 Grove Street Newton, MA 02466 (617) 219-2000 http://www.macromedia.com Traduccin al
castellano: Juan A. Jimnez Lpez (Team Macromedia Dreamweaver )
Octubre 2003