01-Modulo 6 Dreamweaver

Mdulo 6
Introduccin a
Dreamweaver MX
M6-1
TALLER PARA TCNICOS Y ADMINISTRADORES DE SITIOS WEB
Introduccin
Macromedia Dreamweaver MX es un editor HTML profesional para disear, codificar y desarrollar
sitios, pginas y aplicaciones Web. Tanto si desea controlar manualmente el cdigo HTML como si
prefiere trabajar en un entorno de edicin visual, Dreamweaver le proporciona tiles herramientas
que mejorarn su experiencia de creacin Web.
Las funciones de edicin visual de Dreamweaver permiten crear pginas de forma rpida, sin escribir
una sola lnea de cdigo. Puede ver todos los elementos o activos del sitio y arrastrarlos desde un
panel fcil de usar directamente hasta un documento. Puede agilizar el flujo de trabajo de desarrollo
mediante la creacin y edicin de imgenes en Macromedia Fireworks y su posterior importacin
directa a Dreamweaver, o bien aadir objetos Macromedia Flash creados directamente en
Dreamweaver.
Dreamweaver ofrece tambin numerosas herramientas y funciones de gestin de cdigo, como las
que incluye la vista Cdigo (por ejemplo, colores de cdigo o terminacin automtica de etiquetas);
material de referencia sobre HTML, CSS, JavaScript, CFML, ASP y JSP.
La tecnologa Roundtrip HTML de Macromedia importa los documentos con cdigo manual HTML
sin modificar el formato del cdigo. Posteriormente, si lo desea, puede formatear el cdigo con el
estilo que prefiera.
En ste mdulo aprenderemos las habilidades necesarias para:
Utilizar el espacio de trabajo de Dreamweaver
Utilizar ventanas y paneles de Dreamweaver
Utilizar Dreamweaver con otras aplicaciones
Configurar un sitio Dreamweaver
Usar asistente para la definicin del sitio
Editar un sitio Dreamweaver
Insercin y aplicacin de formato al texto
Exploracin del espacio de trabajo

Utilizacin del espacio de trabajo de Dreamweaver
En esta seccin se describen los elementos principales del espacio de trabajo y se explica cmo
elegir una disposicin inicial del espacio de trabajo.
Dreamweaver MX ofrece dos disposiciones del espacio de trabajo entre las que elegir: una
disposicin integrada en la que todo se incluye en una sola ventana y una disposicin flotante.
Seleccin de una disposicin para el espacio de trabajo
La primera vez que se inicia Dreamweaver, aparece un cuadro de dilogo que permite elegir
una disposicin para el espacio de trabajo. Si cambia de idea posteriormente, podr cambiar a
otro espacio de trabajo distinto a travs del cuadro de dilogo Preferencias.
M6-2
Para elegir una disposicin del espacio de trabajo:

Seleccione una de las siguientes disposiciones:
Espacio de trabajo de Dreamweaver MX es un espacio de trabajo integrado que utiliza MDI
(interfaz para mltiples documentos, Multiple Document Interface) en el que todas las ventanas de
documentos y todos los paneles estn integrados en una misma ventana de aplicacin, con los
grupos de paneles apilados a la derecha. Recomendado para la mayora de los usuarios.
Nota: En la mayora de las instrucciones que se facilitan en esta gua de usuario, se presupone que
est utilizando el espacio de trabajo integrado de Dreamweaver MX.
Espacio de trabajo de Dreamweaver MX, HomeSite/Estilo de codificador es el mismo espacio
de trabajo integrado pero con los grupos de paneles apilados a la izquierda, una disposicin similar a
la que utilizan Macromedia HomeSite y Macromedia ColdFusion Studio, y en el que las ventanas de
documentos se muestran de manera predeterminada con la vista Cdigo. Esta disposicin es la
recomendada para usuarios de HomeSite o ColdFusion Studio y otras personas que escriban
cdigo- manualmente que deseen contar con una disposicin del espacio de trabajo que les resulte
familiar. Para elegir esta disposicin, seleccione la opcin Espacio de trabajo de Dreamweaver MX y
luego elija la opcin HomeSite/Estilo de codificador.
Nota: Puede apilar los grupos de paneles a ambos lados del espacio de trabajo en cualquiera de las
disposiciones de espacio de trabajo integrado.
Espacio de trabajo de Dreamweaver 4 es una disposicin de espacio de trabajo similar a la
utilizada en Dreamweaver 4, con cada documento en una ventana flotante independiente. Los
grupos de paneles estn apilados, pero no en una ventana de aplicacin de tamao superior que los
contenga. Recomendado slo para los usuarios de Dreamweaver 4 que prefieran utilizar un espacio
de trabajo que les resulte ms familiar.
Para cambiar a un espacio de trabajo distinto del que ha elegido:
1 Elija Edicin > Preferencias.
2 Seleccione la categora General en la lista Categora, si no est ya seleccionada.
3 Haga clic en el botn Cambiar espacio de trabajo.
4 Seleccione un espacio de trabajo y haga clic en Aceptar.
Aparece un mensaje de alerta para indicarle que tras reiniciar Dreamweaver, aparecer la nueva
disposicin.
5 Haga clic en Aceptar en el mensaje de aviso.
6 Haga clic en Aceptar de nuevo para cerrar el cuadro de dilogo Preferencias.
7 Salga de Dreamweaver y reincielo.
M6-3
Los espacios de trabajo
En el espacio de trabajo Dreamweaver MX, todas las ventanas y paneles estn integrados en
una nica ventana de aplicaciones de mayor tamao.
El espacio de trabajo HomeSite/Estilo de codificador tiene los mismos elementos, pero con los
grupos de paneles apilados en el lado izquierdo de la ventana principal, en lugar de en el lado
derecho. En esta disposicin del espacio de trabajo, de forma predeterminada, el inspector de
propiedades est contrado y la ventana de documento aparece en la vista Cdigo.
M6-4
En la disposicin de espacio de trabajo de Dreamweaver 4, cada documento aparece en una

ventana diferente. Los grupos de paneles aparecen apilados en principio, pero pueden separarse en
sus propias ventanas.
En el espacio de trabajo flotante, las ventanas se ajustan automticamente, a los lados de la pantalla
y en la ventana Documento, al arrastrarlas o cambiar su tamao. Esto facilita el desplazamiento y la
organizacin de los distintos paneles flotantes y ventanas de Dreamweaver.
M6-5
Barras y paneles
La ventana Bienvenido ofrece sugerencias para la configuracin del espacio de trabajo para
distintos fines e informacin sobre nuevas funciones para aquellas personas que hayan utilizado
versiones anteriores de Dreamweaver.
La barra Insertar contiene botones para la insercin de diversos tipos de objetos, como imgenes,
tablas y capas, en un documento. Cada objeto es un fragmento de cdigo HTML que le permite
establecer diversos atributos al insertarlo. Por ejemplo, puede insertar una imagen haciendo clic en el
icono Imagen de la barra Insertar. Si lo prefiere, puede insertar objetos utilizando el men Insertar en
lugar de la barra Insertar.
La barra de herramientas de documento contiene botones y mens emergentes que proporcionan
diferentes vistas de la ventana de documento (como la vista Diseo y la vista Cdigo), diversas
opciones de visualizacin y algunas operaciones comunes como la obtencin de una vista previa en
un navegador.
La barra de herramientas Estndar (que no aparece en la disposicin de espacio de trabajo
predeterminada) contiene botones para las operaciones ms habituales de los mens Archivo y
Edicin: Nuevo, Abrir, Guardar, Guardar todo, Cortar, Copiar, Pegar, Deshacer y Rehacer. Para
mostrar la barra de herramientas Estndar, elija Ver> Barras de herramientas > Estndar.
La ventana de documento muestra el documento actual mientras lo est creando y editando.
El inspector de propiedades le permite ver y cambiar diversas propiedades del objeto o texto
seleccionado. Cada tipo de objeto tiene diferentes propiedades. (No est ampliado de forma
predeterminada en la disposicin de espacio de trabajo de estilo de codificador.)
El selector de etiquetas, que aparece en la barra de estado en la parte inferior de la ventana de
documento, muestra la jerarqua de etiquetas que rodean a la seleccin actual en la vista Diseo,
haga clic en cualquier etiqueta de la jerarqua para seleccionar la etiqueta y todo su contenido. (No
aparece en vista Cdigo, por lo que no est visible de forma predeterminada en disposiciones de
espacio de trabajo de estilo de codificador.)
Los grupos de paneles son conjuntos de paneles relacionados apilados bajo un encabezado
comn. Para ampliar un grupo de paneles, haga clic en la flecha de ampliacin situada a la izquierda
del nombre del grupo; para desacoplar un grupo de paneles, arrstrelo por los puntos situados en el
borde izquierdo de la barra de ttulo del grupo.
El panel Sitio le permite administrar los archivos y carpetas que forman el sitio, tambin ofrece una
vista de todos los archivos del disco duro local, de manera semejante a como lo hace el Explorador
de Windows.
La barra del lanzador (que no aparece en la disposicin de espacio de trabajo predeterminada)
muestra botones en la barra de estado, para abrir y cerrar los paneles e inspectores que se utilizan
con ms frecuencia.
Dreamweaver ofrece otros muchos paneles, inspectores y ventanas que no se muestran aqu, como
el panel Historial y el Inspector de cdigo. La mayora de los paneles pueden apilarse en grupos.
Para abrir paneles, inspectores y ventanas de Dreamweaver, utilice el men Ventana. Una marca de
verificacin al lado de un elemento de este men indica que el elemento sealado se encuentra
abierto, aunque puede estar oculto detrs de otras ventanas. Para ver un elemento que actualmente
no est abierto, elija el nombre del elemento del men.
Si no encuentra un panel, inspector o ventana que ha marcado como abierto, elija Ventana>
Organizar paneles para disponer ordenadamente todos los paneles abiertos.
Utilizacin de las ventanas y paneles en Dreamweaver

En esta seccin se explica cmo utilizar distintas ventanas, barras de herramientas, paneles,
inspectores y otros elementos del espacio de trabajo de Dreamweaver.
Ventana de documento
La ventana de documento muestra el documento actual. Puede elegir entre una de las operaciones
siguientes:
M6-6
Vista Diseo, un entorno de diseo para la disposicin visual de la pgina, la edicin visual y
el desarrollo rpido de aplicaciones. En esta vista, Dreamweaver muestra una
representacin visual del documento completamente edtale, similar a la que aparecera en
un navegador. Puede configurar la vista diseo para que muestre el contenido dinmico
mientras trabaja en el documento.
Vista Cdigo, un entorno de codificacin manual que permite escribir y editar cdigo HTML,
JavaScript, de lenguaje de-servidor, como Microsoft Active Server Pages (ASP) o
ColdFusion Markup Language, o cualquier otro tipo de cdigo.
Es posible ver el mismo documento en las dos vistas, Cdigo y Diseo, en una sola
ventana.
Para pasar rpidamente de una vista a otra, presione Control+virgudilla (~).

Cuando la ventana de documento tiene una barra de ttulo, sta muestra el ttulo de la pgina y, entre
parntesis, el nombre y la ruta del archivo. Si se han realizado cambios que an no se han guardado,
detrs del nombre del archivo, Dreamweaver incluye un asterisco.
Cuando se maximiza la ventana de documento en la disposicin integrada de espacio de trabajo , no
aparece la barra de ttulo; en este caso, el ttulo de la pgina y el nombre y la ruta del archivo
aparecen en la barra de ttulo de la ventana principal del espacio de trabajo.
La barra de estado
La barra de estado, situada en la parte inferior de la ventana de documento, proporciona informacin
adicional sobre el documento que est creando.
El selector de etiquetas muestra la jerarqua de etiquetas que rodea a la seleccin actual. Haga clic
en cualquier etiqueta de la jerarqua para seleccionar la etiqueta y todo su contenido. Haga clic en
<body> para seleccionar todo el cuerpo del documento. Para definir los atributos class o id para una
etiqueta en el selector de etiquetas, haga clic con el botn de derecho del ratn y elija una clase o un
ID del men contextual.
El men emergente Tamao de ventana (que slo est visible cuando est activa la vista Diseo)
permite cambiar el tamao de la ventana de documento para que adopte dimensiones
predeterminadas o personalizadas.
A la derecha del men emergente Tamao de ventana aparecen la estimacin del tamao del
documento y del tiempo de descarga de la pgina, incluidos todos los archivos dependientes, como
imgenes y otros archivos multimedia.
Cambio del tamao de la ventana de documento
La barra de estado muestra las dimensiones actuales de la ventana de documento (en pxeles). Para
elegir un tamao de ventana que se ajuste a alguno de los tamaos habituales de monitor, haga clic
en el tamao de la ventana y elija un valor del men emergente que aparece. Si no desea asignar un
tamao tan preciso, utilice los mtodos estndar de su sistema operativo, como arrastrar el ngulo
inferior derecho de una ventana. En el espacio de trabajo integrado, se puede maximizar la ventana
de documento de forma que ocupe completamente la zona del documento en la ventana integrada.
Nota: Cuando una ventana de documento est maximizada en el espacio de trabajo integrado, no
puede cambiarse su tamao.
Cuando una ventana de documento est maximizada, aparecen fichas en la parte inferior de la
ventana de documento con los nombres de archivo de todos los documentos abiertos. Para cambiar
a un documento, haga clic en su ficha.
M6-7
Para disear una pgina cuyo mejor aspecto se logra con un tamao especfico, puede ajustar la
ventana de documento con cualquiera de los tamaos predeterminados, editar dichos tamaos
predeterminados o crear nuevos tamaos.
Nota: El tamao de la ventana indicado corresponde a las dimensiones internas de la ventana del
navegador, sin bordes. El tamao del monitor figura entre parntesis. Por ejemplo, la opcin 536 x
196 (640 x 480, Predeterminado) es el tamao de ventana que se debe utilizar si los visitantes van a
hacer uso de Microsoft Internet Explorer o Netscape Navigator en su configuracin predeterminada
con un monitor de 640 x 480.
Para establecer un tamao predeterminado para la ventana de documento: Elija uno de los
tamaos del men emergente situado en la parte inferior de la ventana de documento.
Para cambiar los valores que aparecen en el men emergente Tamao de ventana:
1. Elija Editar tamaos en el men emergente Tamao de ventana.
2. Haga clic en cualquiera de los valores de ancho o alto de la lista de tamaos de ventana y
escriba un valor nuevo.
Para hacer que la ventana de documento se ajuste slo a un ancho especfico (sin modificar
el alto), seleccione un valor de alto y elimnelo.
3. Haga clic en el cuadro de texto Descripcin para introducir texto descriptivo sobre un tamao
especfico.
4. Haga clic en Aceptar para guardar el cambio y regresar a la ventana de documento.
Para aadir un valor al men emergente Tamao de ventana:
1. Elija Editar tamaos en el men emergente Tamao de ventana.
2. Haga clic en el espacio en blanco situado debajo del ltimo valor de la columna Ancho.
3. Introduzca valores en Ancho y Alto. Para establecer slo el Ancho o el Alto, sencillamente
deje un campo vaco.
4. Haga clic en el campo Descripcin para introducir el texto descriptivo sobre el tamao
agregado.
5. Haga clic en Aceptar para guardar el cambio y regresar a la ventana de documento. Por
ejemplo, puede escribir SVGA o PC estndar junto a la entrada para un monitor de 800 x
600 pxeles, junto a la entrada correspondiente a un monitor de 832 x 624 pxeles. La
mayora de los monitores se pueden ajustar a varias dimensiones de pxeles.
Para maximizar una ventana de documento:
Haga clic en el botn Maximizar en la barra de ttulo de la ventana de documento.
Utilizacin de la barra de herramientas Documento

La barra de herramientas Documento contiene botones que permiten alternar entre diferentes vistas
del documento rpidamente: Cdigo, Diseo, una vista dividida que muestra las dos anteriores y la
vista Live Data. La barra de herramientas contiene tambin algunos comandos y opciones relativos a
la visualizacin del documento, su transferencia entre los sitios local y remoto, y la depuracin del
cdigo JavaScript.
M6-8
Para ver u ocultar la barra de herramientas Documento, elija Ver > Barra de herramientas >
Documento.
En la barra de herramientas Documento, aparecen las siguientes opciones:
Mostrar vista de cdigo slo muestra la vista Cdigo en la ventana de documento.
Mostrar vistas de cdigo y diseo muestra la vista Cdigo en una parte de la ventana de
documento y la vista Diseo en la otra parte.
Cuando seleccione esta vista combinada, se encontrar disponible la opcin Vista de diseo
encima del men Ver.
Utilice esta opcin para especificar qu vista debe aparecer en la parte superior de la
ventana de documento.
Mostrar vista de diseo slo muestra la vista Diseo en la ventana de documento.

Tambin puede elegir una vista en el men Ver.
Ttulo permite introducir un ttulo para el documento, que aparecer en la barra de ttulo del
navegador.
Si el documento ya tiene ttulo, ste aparecer en dicho campo.
Administracin de archivos muestra el men emergente Administracin de archivos.
Vista previa/Depurar en explorador permite ver una vista previa del documento o
depurarlo en un navegador.
Seleccione un navegador en el men emergente. Para agregar o cambiar los navegadores
enumerados en el men, elija Editar lista de navegadores.
Actualizar vista de diseo actualiza la vista Diseo tras realizar cambios en la vista
Cdigo. Los cambios realizados en la vista Cdigo no aparecern de forma automtica en la
vista Diseo hasta que se efecten determinadas acciones, como guardar el archivo o hacer
clic en este botn.
Referencia muestra el panel Referencia.

El panel Referencia contiene informacin de referencia sobre HTML, CSS, JavaScript,
CFML, ASP y JSP.
Navegacin por el cdigo le permite desplazarse por el cdigo JavaScript.
Ver opciones permite definir las opciones de las vistas Cdigo y Diseo, y establecer qu
vista va a aparecer en la parte superior de la ventana.
Las opciones de la vista Diseo permiten ocultar todas las ayudas visuales (como los bordes
de tablas, capas y marcos) en una sola accin, cada una de ellas de forma independiente.
Estas opciones permiten tambin ver el contenido de Head y las guas visuales.
Cuando estn visibles las vistas Cdigo y Diseo, en el men aparecen los dos grupos de
opciones.
M6-9
Utilizacin de la barra de herramientas Estndar

La barra de herramientas Estndar contiene botones para las operaciones ms habituales de los
mens Archivo y Edicin. Nuevo, Abrir, Guardar, Guardar todo, Cortar, Copiar, Pegar, Deshacer y
Rehacer. Estos botones se utilizan del mismo modo que los comandos de men equivalentes.
Para mostrar la barra de herramientas Estndar, elija Ver > Barras de herramientas > Estndar.
Utilizacin de mens contextuales
Dreamweaver emplea de forma extensiva los mens contextuales, que proporcionan acceso rpido
a los comandos y a las propiedades ms tiles relacionados con la ventana o el objeto con el que
est trabajando. En los mens contextuales slo aparecen los comandos pertinentes para la
seleccin actual.
Para utilizar un men contextual:
1. Haga clic con el botn derecho del ratn en el objeto o ventana.
Aparecer el men contextual para el objeto o la ventana seleccionados.
2. Elija un comando en el men contextual.
Utilizacin de la barra Insertar

La barra Insertar contiene botones para la creacin e insercin de diversos tipos de objetos, como
tablas, capas e imgenes. Los botones estn organizados en fichas.
Para mostrar u ocultar la barra Insertar:
Elija Ventana > Insertar.
Para ampliar o contraer la barra Insertar:
Haga clic en la flecha de ampliacin, que aparece en el ngulo izquierdo de la barra de ttulo de la
barra Insertar.
Para insertar un objeto:
1. Seleccione la ficha adecuada en la barra Insertar.
2. Haga clic en un botn de objeto o arrastre el icono correspondiente hasta la ventana de
documento.
Dependiendo del objeto que se trate, aparecer un cuadro de dilogo de insercin de objeto,
que solicitar que se busque un archivo o se especifiquen los parmetros del objeto.
Para omitir el cuadro de dilogo de insercin de objetos e insertar un objeto marcador de
posicin vaco:
M6-10
Haga clic con mientras presiona la tecla Control en el botn del objeto.
Por ejemplo, para insertar un marcador de posicin para una imagen sin especificar un archivo de
imagen, haga clic en el botn Imagen mientras presiona la tecla Control u Opcin.
Nota: Este procedimiento no permite omitir todos los cuadros de dilogo de insercin de objetos.
Muchos objetos, incluidas barras de navegacin, capas, botones Flash y conjuntos de marcos, no
permiten insertar marcadores de posicin ni objetos con valores predeterminados.
La barra Insertar contiene varias fichas: Comn, Disposicin, Texto, Tablas, Marcos, Formularios,
Plantillas, Caracteres, Media, Head, Script, y Aplicacin. Si el documento contiene cdigo de
servidor, como los documentos ASP o CFML, aparecen tambin otras fichas.
La ficha Aplicacin permite insertar elementos como juegos de registros, regiones repetidas
y grabar formularios de insercin y actualizacin. Para obtener ms informacin sobre el
contenido dinmico.
El panel Caracteres contiene caracteres especiales, como los smbolos de copyright, de

comillas curvas y de marca registrada. Observe que es posible que algunos de estos
smbolos no se muestren correctamente en las versiones 3.0 y anteriores de los
navegadores Internet Explorer y Netscape Navigator.
La ficha Comn contiene botones para la creacin e insercin de los objetos ms utilizados,
como imgenes, tablas y capas.
La ficha Formularios contiene botones que permiten crear formularios e insertar elementos
de formulario.
La ficha Marcos contiene disposiciones de conjuntos de marcos que se utilizan

normalmente.
La ficha Head contiene botones que permiten aadir diversos elementos de la seccin head,
como etiquetas meta y base.
La ficha Disposicin permite insertar tablas y capas, y elegir entre dos vistas de tablas:
Estndar (predeterminada) y Disposicin. Si se selecciona la vista Disposicin, se pueden
utilizar las herramientas de disposicin de Dreamweaver: Dibujar celda de disposicin y
Dibujar tabla de disposicin.
La ficha Media contiene botones para insertar objetos multimedia interactivos o animados,
como botones y texto Flash, applets Java y objetos ActiveX.
La ficha Script permite insertar una seccin script, noscript o server-side include.
La ficha Tablas permite insertar una tabla completa o una etiqueta de tabla determinada
(comotr, th, o td).
La ficha Plantillas permite insertar regiones editables, opcionales y repetidas en archivos de

plantillas.
La ficha Texto permite insertar diversas etiquetas de formato de texto y listas, como b, em,
p, h1 y ul.
Nota: Aunque algunos botones de la ficha Texto tienen un aspecto similar al de algunos
botones del inspector de propiedades, su funcin es distinta. Los botones de la ficha Texto
simplemente insertan cdigo y no reflejan el estado actual de la seleccin; si se trata de texto
en negrita, el botn de negrita en el inspector de propiedades aparecer seleccionado,
mientras que el mismo botn en la ficha Texto no.
Las fichas de cdigo de servidor, que slo estn disponibles para las pginas que emplean
un lenguaje de servidor determinado, incluyen ASP, ASP.NET, CFML Basic, CFML Flow,
CFML Advanced, JSP y PHP. Cada una de estas fichas contiene objetos de cdigo de
servidor que pueden insertarse en la vista Cdigo.
M6-11
Si no se puede ver todos los objetos de una ficha simultneamente, aparece una pequea flecha en
el extremo inferior izquierdo de la barra Insertar; para ver el resto de los objetos de la ficha, haga clic
en esta flecha.
Al hacer clic en un botn de objeto, Dreamweaver inserta cdigo en el documento. En algunos
casos, el cdigo se inserta inmediatamente; en otros, aparece un editor de etiquetas u otro cuadro de
dilogo, que permite especificar otra informacin antes de insertar el cdigo. Para algunos objetos,
no aparece ningn cuadro de dilogo si se inserta el objeto en vista Diseo, pero aparece un editor
de etiquetas si se utiliza la vista Cdigo. Con algunos objetos, al insertar el objeto en vista Diseo,
Dreamweaver cambia a la vista Cdigo antes de insertar el objeto.
Algunos objetos, como puntos de fijacin con nombre, no aparecen cuando se abre la pgina en la
ventana de un navegador. Para ver los iconos en vista Diseo que marca la ubicacin de esos
objetos invisibles, elija Ver > Ayudas visuales > Elementos invisibles. Para seleccionar los objetos
invisibles en la vista Diseo, haga clic en sus iconos.
Algunas de las preferencias generales afectan a la barra Insertar. Para modificar estas preferencias,
elija Edicin > Preferencias o Dreamweaver > Preferencias (Mac OS X) y seleccione Sitio en la lista
de categoras en la parte izquierda.
Cuando inserte objetos tales como imgenes, tablas, scripts y elementos head, aparecer
un cuadro de dilogo en el que se le solicitar informacin adicional. Puede suprimir estos
cuadros de dilogo desactivando la opcin Mostrar dilogo al insertar objetos o manteniendo
presionada la tecla Control mientras crea el objeto.
Cuando se inserta un objeto con esta opcin desactivada, el objeto recibe valores de atributo
predeterminados. Despus de insertar el objeto, utilice el inspector de propiedades para
cambiar sus propiedades.
La Barra Insertar permite ver el contenido de la barra Insertar, como iconos y texto, slo
iconos o slo texto.
Se puede modificar cualquier objeto de la barra Insertar o crear objetos nuevos; consulte
Personalizacin de Dreamweaver en Macromedia Support Center en la direccin
http://www.macromedia.com/go/customizing_dreamweaver.
Utilizacin del inspector de propiedades
El inspector de propiedades permite examinar y editar las propiedades del elemento de pgina
seleccionado actualmente, como texto o un objeto insertado. Puede seleccionar elementos de
pgina en la vista Diseo o en la vista Cdigo.
Para mostrar u ocultar el inspector de propiedades, elija Ventana > Propiedades.
La mayora de los cambios realizados en las propiedades se aplicarn de inmediato en la ventana de

documento. Sin embargo, para algunas propiedades, los cambios no se aplican hasta que se hace
clic fuera de los campos de texto de edicin de la propiedad, y se presiona Intro para cambiar a otra
propiedad.
El contenido del inspector de propiedades vara dependiendo del elemento seleccionado. Para
obtener ms informacin sobre propiedades especficas, seleccione un elemento en la ventana de
documento y, a continuacin, haga clic en el icono de ayuda en el extremo superior derecho del
inspector de propiedades.
El inspector de propiedades muestra inicialmente la mayora de las propiedades del elemento
seleccionado. Haga clic en la flecha de ampliacin del extremo inferior derecho del inspector de
propiedades para contraer el inspector de propiedades y mostrar nicamente las propiedades
utilizadas con mayor frecuencia.
M6-12
Sugerencia: En algunos casos, determinadas propiedades ocultas pueden no aparecer incluso en el

inspector de propiedades ampliado; en estos casos, utilice la vista Cdigo o el inspector de cdigo
para codificar manualmente dichas propiedades o seleccione la vista Cdigo y elija Modificar > Editar
etiqueta.
Administracin de paneles y grupos de paneles
En Dreamweaver, los paneles se organizan en grupos. Cada grupo de paneles puede ampliarse o
contraerse y acoplarse o desacoplarse con otros grupos de paneles. Los grupos de paneles tambin
se pueden acoplar a la ventana de aplicacin integrada. Esto facilita el acceso a los paneles sin
saturar el espacio de trabajo. Los paneles aparecen como fichas dentro del grupo.
Nota: Cuando un grupo de paneles est flotando (desacoplado), aparece una barra vaca estrecha
en la parte superior del mismo. En esta documentacin, el trmino, barra de ttulo del grupo de
paneles hace referencia al rea en la que aparece el nombre del grupo de paneles y no a esta barra
vaca estrecha.
Para ampliar o contraer un grupo de paneles, lleve a cabo una de las siguientes operaciones:
Haga clic en la flecha de ampliacin, que aparece en el lado izquierdo de la barra de ttulo
del grupo de paneles.
Haga clic en el ttulo del grupo de paneles.
Para seleccionar un panel de un grupo de paneles ampliado:

Haga clic en la ficha del panel.
Para desacoplar un grupo de paneles:
Arrstrelo por los puntos de sujecin (situados en el borde izquierdo de la barra de ttulo del grupo)
hasta que el contorno indique que ya no est acoplado.
Para acoplar un grupo de paneles a otro grupo de paneles (espacio de trabajo flotante) o a la
ventana integrada:
Arrstrelo por los puntos hasta que su contorno indique que est acoplado.
La mayora de los paneles slo pueden acoplarse a la derecha o a la izquierda del rea de la
ventana de documento del espacio de trabajo integrado, mientras que otros (como el inspector de
propiedades y la barra Insertar), slo pueden acoplarse a la parte superior o inferior de la ventana
integrada.
Para arrastrar un grupo de paneles flotante (desacoplado) sin acoplarlo:
Arrastre el grupo de paneles por la barra situada encima de su barra de ttulo. El grupo de paneles no
se acopla mientras no se arrastre por sus puntos de sujecin.
Para ver un men Opciones del grupo de paneles:

Ample el grupo de paneles haciendo clic en su flecha de ampliacin.
El men Opciones slo est visible cuando el grupo de paneles est ampliado.
Sugerencia: Algunas opciones estn disponibles en el men contextual del grupo de paneles
incluso si el grupo est ampliado; haga-clic con el botn derecho del ratn en la barra de ttulo del
grupo de paneles para ver el men contextual.
Para cambiar el nombre de un grupo de paneles:
M6-13
1. Elija Cambiar nombre de grupo de paneles en el men Opciones situado en el lado derecho
de la barra de ttulo del grupo de paneles.
2. Introduzca un nuevo nombre y haga clic en Aceptar.

Para desacoplar un panel de un grupo:
Arrstrelo por su ficha hasta que su contorno indique que no est acoplado.
El panel aparece en un nuevo grupo de paneles propio.
Para acoplar un panel de un grupo:
Arrstrelo por su ficha hasta que su contorno indique que est acoplado.
Para maximizar un grupo de paneles, lleve a cabo una de estas operaciones:
Elija Maximizar grupo de paneles en el men Opciones de la barra de ttulo del grupo de
paneles.
Haga doble clic en cualquier lugar de la barra de ttulo del grupo de paneles.
El grupo de paneles crece verticalmente hasta ocupar todo el espacio vertical disponible.
Para cerrar un grupo de paneles, de manera que desaparezca completamente:

Elija Cerrar grupo de paneles en el men Opciones de la barra de ttulo del grupo de paneles.
El grupo de paneles desaparece de la pantalla.
Para abrir un grupo de paneles que no se vea en la pantalla:
Elija el nombre de un panel en el men Ventana.
Para modificar el tamao el conjunto completo de grupos de paneles (slo en espacio de
trabajo flotante):
Arrastre el conjunto de grupos de paneles para ajustar su tamao de la misma manera que lo hara
con una ventana del sistema operativo. Por ejemplo, puede arrastrar el rea de ajuste de tamao del
extremo inferior derecho del conjunto de grupos de paneles.
Configuracin de preferencias de Paneles
Utilice las preferencias de Paneles para especificar qu paneles e inspectores aparecern siempre
sobre la ventana de documento y cules podrn quedar ocultos por dicha ventana. Tambin puede
utilizar las preferencias de Paneles para especificar qu iconos aparecern en las fichas para los
paneles, si aparecer la barra lanzadora y qu paneles e inspectores aparecern en dicha barra.
Para definir las preferencias para los paneles, elija Edicin > Preferencias y seleccione Paneles en la
lista Categora, situada a la izquierda. A continuacin, seleccione cualquiera de las opciones
siguientes:
Siempre visible permite especificar qu paneles estarn siempre visibles en la ventana de
documento. De forma predeterminada, todos los paneles, inspectores y otros como las ventanas,
M6-14
flotan siempre sobre la ventana de documento. Si desactiva un elemento de la lista, podr situar
entonces la ventana de documento sobre ese elemento.
Por ejemplo, para que la ventana de documento oculte el inspector de propiedades, desactive la
opcin Propiedades. Ahora el inspector de propiedades slo aparecer sobre la ventana de
documento cuando se encuentre activo.
Para que la ventana de documento oculte cualquiera de los paneles flotantes agregados al
personalizar Dreamweaver, desactive el resto de paneles.
Nota: La opcin Siempre visible no se aplica en el espacio de trabajo integrado cuando todos los
paneles estn acoplados.
Mostrar iconos en paneles y lanzador permite determinar si aparecer la barra del lanzador.
Cuando se selecciona esta opcin, la barra del lanzador aparece en el rea de la barra de estado y
un icono pequeo aparece en la ficha de cada panel. Los botones de la barra del lanzador permiten
abrir paneles e inspectores.
Mostrar en lanzador permite especificar qu elementos aparecen en la barra del lanzador.
Para especificar los elementos que van a aparecer en la barra del lanzador:
1. Para aadir un elemento a la barra del lanzador, haga clic en el botn con el signo ms (+).
2. Para quitar un elemento de la barra del lanzador, resalte el elemento y haga clic en el botn
con el signo menos (-).
3. Para cambiar el orden de los elementos del lanzador, seleccione un elemento en la lista y
haga clic en un botn de flecha.
Por ejemplo, para mover un elemento hacia la derecha en la barra del lanzador, mueva el
elemento hacia abajo en la lista.
4. Haga clic en Aceptar.
La barra del lanzador cambiar para mostrar los elementos que haya especificado.
Panel Sitio
El panel Sitio permite definir un sitio, administrar archivos locales del sitio, cargar y descargar
archivos de un sitio remoto y examinar los archivos del disco local fuera del sitio. Para ms
informacin sobre el uso del panel Sitio.
Panel Historial
El panel Historial muestra una lista de todos los pasos dados en el documento activo desde que ste
se cre o se abri, hasta un determinado nmero mximo de pasos. (El panel Historial no muestra
los pasos dados en otros marcos, en otras ventanas de documento o en el panel Sitio.)
Permite deshacer uno o varios pasos, as como repetir pasos y crear nuevos comandos para
automatizar tareas repetitivas.
El control deslizante, o el pulgar, del panel Historial seala inicialmente el ltimo paso realizado.
M6-15
Utilizacin del panel Historial

El panel Historial realiza un seguimiento de todos sus pasos de trabajo en Dreamweaver. Puede
utilizar el panel Historial para deshacer varios pasos a la vez.
Si desea deshacer la ltima operacin realizada en un documento, elija Edicin > Deshacer como en
cualquier otra aplicacin. (El nombre del comando Deshacer cambiar en el men Edicin para
reflejar la ltima operacin realizada.)
El panel Historial tambin permite volver a reproducir pasos ya realizados y automatizar tareas
mediante la creacin de nuevos comandos. Para obtener ms informacin.
Para abrir el panel Historial:
Elija Ventana > Otros> Historial.
Para deshacer el ltimo paso:
Arrastre el control deslizante del panel Historial hasta el paso superior en la lista. Esta operacin tiene
el mismo efecto que elegir Edicin > Deshacer.
El paso deshecho adopta el color gris.
Para deshacer varios pasos al mismo tiempo, lleve a cabo una de estas operaciones:
Arrastre el control deslizante para sealar cualquier paso.
Haga clic a la izquierda de un paso de la ruta del control deslizante; el control deslizante se
desplazar automticamente hasta dicho paso y deshar pasos conforme se desplace.
Nota: Para desplazarse automticamente a un determinado paso, deber hacer clic a la izquierda
del paso; si hace clic en el paso mismo, se seleccionar el paso. Seleccionar un paso no es lo mismo
que volver a ese paso en el historial de deshacer.
Como ocurre al deshacer un solo paso, si deshace una serie de pasos y, a continuacin, realiza una
nueva operacin en el documento, no podr rehacer los pasos deshechos, pues habrn
desaparecido del panel Historial.
Para definir el nmero de pasos que el panel Historial mantiene y muestra:
1. Elija Edicin > Preferencias y seleccione General de la lista Categora.
2. Introduzca un nmero para Nmero mximo de pasos de historial.
El valor predeterminado suele ser vlido para la mayora de las necesidades de los usuarios.
Cuanto mayor sea el nmero, ms memoria necesitar el panel Historial. Esto puede afectar
al rendimiento y reducir considerablemente la velocidad de funcionamiento del equipo.
Cuando el panel Historial alcanza el nmero mximo de pasos, los pasos ms antiguos se
borran.
Nota: No se puede modificar el orden de los pasos en el panel Historial. El panel Historial no es un
conjunto arbitrario de comandos, sino una forma de ver los pasos en el orden en que se han dado.
Para borrar la lista de historial para el documento actual:
En el men contextual del panel Historial, elija Borrar historial.
Este comando tambin borra toda la informacin de deshacer del documento actual. Despus de
elegir Borrar historial, no podr deshacer los pasos borrados. (La opcin Borrar historial no deshace
los pasos dados, sino que simplemente quita el registro de esos pasos de la memoria de
Dreamweaver.)
Panel Respuestas
El panel Respuestas proporciona acceso rpido a la informacin que hace su trabajo con
Dreamweaver ms eficaz. Incluye tutoriales, notas tcnicas, extensiones de Dreamweaver y otros
datos de inters.
Para obtener informacin actualizada sobre Dreamweaver de macromedia.com, haga clic en el
botn Actualizar.
M6-16
Configuracin de un sitio Dreamweaver

Un sitio Dreamweaver permite organizar todos los documentos asociados con un sitio Web. Lo
puede considerar como un proyecto. Tendr que configurar un sitio para cada sitio Web que
desarrolle. La organizacin de los archivos en un sitio permite utilizar Dreamweaver con FTP para
cargar el sitio en el servidor Web, controlar y mantener los vnculos de forma automtica, administrar
y compartir archivos. No podr sacar el mximo partido de las funciones de Dreamweaver a menos
que defina un sitio.
Un sitio Dreamweaver consta de un mximo de tres partes, segn el entorno y el tipo de sitio Web
que desarrolle:
Carpeta local es el directorio de trabajo. En Dreamweaver esta carpeta se conoce como

sitio local.
Carpeta remota es el lugar donde se almacenan los archivos, segn el entorno, para
comprobacin, produccin, colaboracin, etc. En Dreamweaver esta carpeta se denomina
sitio remoto.
Carpeta para pginas dinmicas es la carpeta donde Dreamweaver procesa las pginas
dinmicas.
Para empezar, puede configurar un sitio Dreamweaver completo, o simplemente realizar el primer
paso, la configuracin de la carpeta local. Para poder empezar a trabajar con Dreamweaver, como
mnimo, es necesario configurar una carpeta local.
Existen dos maneras de configurar un sitio Dreamweaver: utilizar el asistente para la Definicin del
sitio, que le guiar por el proceso de configuracin, o bien las opciones Avanzadas del cuadro de
dilogo Definicin del sitio, que permiten definir carpetas locales, remotas y de prueba de forma
individual, segn sus necesidades.
Para definir un sitio Dreamweaver:
1. Seleccione Sitio > Nuevo sitio.
Aparece el cuadro de dilogo Definicin del sitio.
2. Haga clic en la ficha Bsicas para utilizar el asistente para la Definicin del sitio o en la ficha
Avanzadas para emplear las opciones avanzadas.
3. Realice el proceso de definicin del sitio Dreamweaver:
Responda a las preguntas del asistente para la Definicin del sitio y haga clic en
Siguiente para avanzar por el proceso de definicin.
Si utiliza las opciones Avanzadas, complete las categoras Datos locales, Datos
remotos y Servidor de prueba, segn el caso.
Nota: Se recomienda que los nuevos usuarios de Dreamweaver utilicen el asistente para la
Definicin del sitio. Es probable que los usuarios que tengan ms experiencia con Dreamweaver
prefieran las opciones Avanzadas.
Uso del asistente para la definicin del sitio
Puede utilizar el asistente para la Definicin del sitio para configurar un sitio Dreamweaver. El
asistente para la Definicin del sitio le gua por el proceso de configuracin del sitio. Es el mtodo
recomendado para los usuarios nuevos de Dreamweaver.
El asistente consta de tres secciones. Cada seccin puede tener varias pantallas, denominadas
partes, segn las opciones seleccionadas. Las tres secciones principales incluyen los siguientes
elementos:
Editando archivos donde se define la carpeta local.
Comprobando archivos es donde se configura la carpeta que utilizar Dreamweaver para

procesar pginas dinmicas.
Compartiendo archivos es donde se define la carpeta remota.
M6-17
En la parte superior del cuadro de dilogo, el nombre de seccin que aparece resaltado indica en
qu paso del proceso de configuracin se encuentra. Es posible que no necesite establecer carpetas
en las tres secciones. En cada seccin, el programa le har preguntas para ayudarle a determinar
sus necesidades.
Para utilizar el asistente para la Definicin del sitio para configurar un sitio Dreamweaver:
1. Seleccione Sitio > Nuevo sitio.
2. Haga clic en la ficha Bsicas para utilizar el asistente para la Definicin del sitio.
3. Conteste a las preguntas que aparezcan en cada pantalla y haga clic en Siguiente para
avanzar.
En caso necesario, haga clic en Atrs para regresar a una pantalla anterior.
Configuracin de una carpeta local
La carpeta local es el directorio de trabajo del sitio Dreamweaver. Esta carpeta puede colocarse en el
equipo local o en un servidor de red. Es el lugar donde se almacenan los archivos en curso del sitio
Dreamweaver.
Al configurar una carpeta local, se establece un sitio Dreamweaver. Tambin puede aadir carpetas
remotas y de prueba, pero es necesario configurar al menos una carpeta local para poder iniciar el
desarrollo con Dreamweaver.
Configuracin de una carpeta local:
1. Elija Sitio > Nuevo sitio.
2. Haga clic en el botn Avanzadas, si las opciones Avanzadas no estn visibles.
La ficha Avanzadas del cuadro de dilogo Definicin del sitio muestra las opciones de la
categora Datos locales.
3. Para obtener ms informacin, haga clic en el botn Ayuda del cuadro de dilogo.
M6-18

Dreamweaver crea el cach inicial del sitio y el nuevo sitio Dreamweaver aparece en el
panel Sitio.
Ms tarde, cuando est listo para publicar el sitio en un servidor remoto, deber aadir
informacin adicional sobre el sitio.
Configuracin de una carpeta remota
Tras definir una carpeta local para un sitio Dreamweaver, puede configurar una carpeta remota.
Las carpetas local y remota permiten transferir archivos entre el disco local y el servidor Web, lo
cual facilita la administracin de los archivos en los sitios Dreamweaver.
Segn el entorno, la carpeta remota es el lugar donde se almacenan los archivos para
comprobacin, colaboracin, produccin u otros fines. En general, la carpeta remota suele
colocarse en el equipo donde se ejecuta el servidor Web.
Nota: No es necesario especificar una carpeta remota si la carpeta que ha especificado como
local en la categora Datos locales es la misma que cre para los archivos del sitio en el
sistema donde se ejecuta el servidor Web. Esto implica que el servidor Web se ejecuta en el
equipo local.
Determine cmo acceder a la carpeta remota y anote la informacin de conexin. Cuando
haya reunido esta informacin, utilice el comando Editar sitios para configurar la carpeta
remota.
Despus de configurar una carpeta remota, puede conectar con ella y luego localizar y
administrar los archivos del sitio Dreamweaver. Si est desarrollando un sitio dinmico, tendr
que aadir una carpeta para procesar pginas dinmicas.
Para configurar una carpeta remota:
1. Elija Sitio> Editar sitios.
Aparece el cuadro de dilogo Editar sitios.
2. Seleccione un sitio Dreamweaver existente.
Si no ha definido ningn sitio Dreamweaver, cree una carpeta local antes de continuar.
3. Haga clic en Editar.
4. Haga clic en el botn Avanzadas si Dreamweaver muestra el asistente para la
Definicin del sitio.
5. Seleccione Datos remotos en la lista Categora que aparece en la parte izquierda.
6. Elija una opcin de acceso.
Para obtener ms informacin, haga clic en el botn Ayuda del cuadro de dilogo.
Para conectar con una carpeta remota:
En el panel Sitio, elija Sitio > Conectar o haga clic en el botn Conecta al Servidor remoto en la
barra de herramientas del panel Sitio.
Nota: Si el sitio utiliza FTP con SSH para acceder a la carpeta remota, cuando intente conectar
con el servidor remoto, el programa solicitar que se conecte con el servidor SSH. Haga clic en
Aceptar en el cuadro de dilogo de Dreamweaver una vez establecida la conexin.
Para desconectarse de una carpeta remota:
En el panel Sitio, elija Sitio > Desconectar o haga clic en el botn Desconectar en la barra de
herramientas del panel Sitio.
M6-19
Edicin de un sitio Dreamweaver

En el cuadro de dilogo Definicin del sitio, utilice las opciones de la ficha Avanzadas para editar los
sitios Dreamweaver.
Para editar un sitio Dreamweaver, lleve a cabo una de estas operaciones:
Elija Sitio > Editar sitios, seleccione un sitio y haga clic en Editar.
Elija Sitio > Abrir sitio y seleccione un sitio.
Edicin de sitios Web existentes con Dreamweaver

Puede usar Dreamweaver para editar sitios existentes aunque no haya utilizado Dreamweaver para
crear el sitio original. Es posible editar sitios existentes ubicados en el sistema local o en un sistema
remoto.
Edicin de un sitio Web local con Dreamweaver
Puede usar Dreamweaver para editar un sitio Web de su disco local, aunque no lo haya creado con
Dreamweaver.
Para editar un sitio Web local:
1. Abra el cuadro de dilogo Definicin del sitio llevando a cabo una de estas operaciones:
Elija Sitio > Editar sitios y haga clic en Nuevo.
Elija Sitio > Abrir sitio > Definir sitios.

El cuadro de dilogo Definicin del sitio muestra las opciones de Datos locales.
2. Complete el cuadro de dilogo.

Para obtener ms informacin, haga clic en el botn Ayuda del cuadro de dilogo.
Creacin de documentos de Dreamweaver

El cuadro de dilogo Nuevo documento le ofrece varios tipos de documentos a partir de los que
puede crear una pgina nueva. Dreamweaver abre el cuadro de dilogo Nuevo documento cuando
elige Archivo > Nuevo. Si suele trabajar con un tipo de documento, por ejemplo pginas HTML,
ColdFusion o Active Server Pages, puede establecer un tipo de documento como predeterminado.
Esto le permitir abrir directamente un documento nuevo del tipo de documento con el que suele
trabajar sin necesidad de abrir el cuadro de dilogo Nuevo documento.
Manipulacin del cuadro de dilogo Nuevo documento
El cuadro de dilogo Nuevo documento le ofrece distintas posibilidades de seleccin de un nuevo
documento para trabajar en l. Puede crear un documento nuevo de la siguiente forma:
Puede comenzar con un documento en blanco.
Puede utilizar una plantilla que defina el aspecto del documento y que configure las partes
del documento que se pueden modificar.
Para abrir el cuadro de dilogo Nuevo documento:
Seleccione Archivo> Nuevo.
El cuadro de dilogo Nuevo documento contiene dos fichas: General y Plantillas.

La ficha General contiene varios tipos de documentos que puede utilizar para la creacin de una
nueva pgina en blanco. Puede seleccionar un nuevo documento en blanco desde las categoras
Pgina bsica, Pgina dinmica y Conjuntos de marcos. Cree una pgina basada en un tipo especial
de archivo, como CSS, JavaScript, VBScript o archivos de texto, seleccionando un documento en la
categora Otro. La categora Plantillas le ofrece distintos tipos de documento para que cree plantillas
en blanco: plantillas HTML y plantillas en las que puede insertar comportamientos de servidor.
M6-20
Las categoras Hojas de estilos CSS, Diseos de pgina y Diseos de pgina (accesible) le ofrecen
archivos de diseo prefabricados que puede utilizar para crear sus propias pginas. En el caso de las
hojas de estilo CSS, puede copiar hojas de estilo predefinidas y aplicarlas a un documento.
Dependiendo del tipo de documento que elija, aparecern opciones distintas en el cuadro de dilogo;
por ejemplo, si selecciona un documento HTML, tendr la opcin de hacer el documento compatible
con XHTML y, si elige un archivo de Diseo de pgina, tendr la opcin de crear un documento o
una plantilla.
La ficha Plantillas contiene una lista de sus sitios definidos de Dreamweaver. Puede seleccionar una
plantilla de las que se muestran en cualquiera de las listas de sitios para crear nuevos documentos
basados en dicha plantilla.
Seleccione una categora para ver una lista de los tipos de documento disponibles en la lista
Documento que aparece a la derecha. Al hacer clic en un documento de la lista aparece una
descripcin y, en el caso de las categoras Diseos de pgina, Hojas de estilos CSS y Conjuntos de
marcos, una vista previa del documento seleccionado.
Puede utilizar la opcin Preferencias situada en la parte inferior del cuadro de dilogo Nuevo
documento para establecer las preferencias predeterminadas del documento, como el tipo de
documento, la codificacin o la extensin del archivo. Asimismo, puede establecer una opcin para
abrir automticamente un nuevo documento sin necesidad de recurrir al cuadro de dilogo Nuevo
documento.
Utilice el vnculo Obtener ms contenido en el cuadro de dilogo Nuevo documento para ir a
Dreamweaver Exchange y descargar ms contenido de diseo de pginas.
Creacin de un nuevo documento en blanco
Puede utilizar el cuadro de dilogo Nuevo documento para seleccionar el tipo de documento que
desea crear.
Si suele trabajar con un tipo concreto de documento, puede establecer un documento como
predeterminado y abrir automticamente un documento nuevo basado en el tipo predeterminado que
ha definido.
Para crear un documento nuevo en blanco:
1. En Dreamweaver, elija Archivo > Nuevo.
Aparecer el cuadro de dilogo Nuevo documento. La ficha General ya aparece
seleccionada.
2. En la lista Categora, seleccione la categora del documento que desea crear.
Por ejemplo, seleccione Pgina bsica para crear un documento HTML o elija Pgina
dinmica para crear un documento ColdFusion o ASP, etc.
3. En la lista de documentos, seleccione el tipo de pgina que desea crear y luego lleve a cabo
una de las siguientes operaciones:
Haga clic en Crear.
Haga doble clic en el elemento de la lista de documentos.
Presione Intro.
El cuadro de dilogo se cierra y aparece un documento nuevo en la ventana de
documento.
Creacin de un documento basado en un archivo de diseo de Dreamweaver

Dreamweaver se suministra con distintos archivos de elementos de diseo y diseos de pgina
profesionales. Puede utilizar estos archivos de diseo como punto de partida para el diseo de las
pginas de sus sitios.
Los archivos de diseo incluyen documentos y plantillas que se ajustan a las normas de
accesibilidad, a los documentos de diseo de pgina basados en tablas y a las hojas de estilos CSS.
M6-21
Puede obtener una vista previa de un documento y leer una breve descripcin de sus elementos de
diseo en las categoras Hojas de estilos CSS, Conjuntos de marcos, Diseos de pgina y Diseos
de pgina (accesible).
Cuando crea un documento basado en un archivo de diseo, Dreamweaver crea una copia del
archivo. Si el archivo de diseo incluye vnculos a archivos de activos (como grficos, elementos
Flash o una hoja de estilos CSS externa), al guardar el documento Dreamweaver le pregunta si
desea guardar una copia de los archivos dependientes. Puede elegir su propia ubicacin para los
archivos dependientes o utilizar la ubicacin predeterminada de carpeta que genera Dreamweaver
(basada en el nombre original del archivo de diseo).
Tambin puede crear una plantilla nueva a partir de un archivo de diseo. La plantilla ya cuenta con
regiones editables definidas. Puede crear regiones editables nuevas en la plantilla. Se le pedir que
guarde el archivo como plantilla para el sitio actual. Los archivos vinculados tambin se copiarn en
el sitio.
Nota: Si crea un documento a partir de un conjunto de marcos predefinido, slo se copiar la
estructura del conjunto de marcos, no el contenido. Asimismo, deber guardar cada archivo de
marco por separado.
Creacin de un documento basado en una plantilla existente
Puede utilizar el cuadro de dilogo Nuevo documento para seleccionar, obtener una vista previa y
crear un documento nuevo basado en una plantilla existente. Puede seleccionar una plantilla de
cualquiera de los sitios definidos de Dreamweaver.
Tambin puede crear plantillas utilizando los documentos de la categora Diseos de pgina en el
cuadro de dilogo Nuevo documento. Cuando haya guardado el documento de diseo de pgina
como plantilla en el sitio, podr crear pginas a partir de dicha plantilla.
Para crear un nuevo documento basado en una plantilla:
1. Seleccione Archivo > Nuevo para abrir el cuadro de dilogo Nuevo documento.
2. En la ficha Plantillas, dentro de la lista Plantillas para sitio, seleccione el sitio de
Dreamweaver que contiene la plantilla que desea utilizar.
3. La lista Sitios muestra las plantillas del sitio seleccionado, en caso de que existan.
4. Seleccione la plantilla que desea utilizar.
5. Anule la seleccin de la opcin Actualizar pgina cuando cambie la plantilla si desea separar
el nuevo documento de la plantilla.
6. Haga clic en Crear.
Se crear un nuevo documento.
7. Guarde el documento.
Almacenamiento de un documento
Cuando guarde un documento, evite utilizar espacios y caracteres especiales en los nombres de
archivos y carpetas. En concreto, no utilice caracteres especiales (como , o ) ni signos de
puntuacin (como dos puntos, barras inclinadas o puntos) en los nombres de archivos que desee
colocar en un servidor remoto; muchos servidores cambian estos caracteres durante la carga, lo que
provoca que se rompan los vnculos existentes con los archivos. Asimismo, no comience los
nombres de los archivos con nmeros.
Para guardar un documento:
1. Seleccione Archivo > Guardar.
2. En el cuadro de dilogo que aparece a continuacin, vaya hasta la carpeta en la que desea
guardar el archivo.
3. En el campo Nombre de archivo, introduzca un nombre para el archivo.
4. Haga clic en Guardar para guardarlo.
Apertura de documentos existentes
M6-22
En Dreamweaver, puede abrir un documento HTML existente o cualquier tipo de documento

dinmico, aunque no haya sido creado con Dreamweaver. Puede abrir el documento y utilizar
Dreamweaver para editarlo aprovechando las ventajas de trabajar en las vistas Diseo o Cdigo.
Tambin puede abrir archivos de texto no HTML, como archivos JavaScript, archivos XML, hojas de
estilos CSS o archivos de texto guardados con procesadores de texto o editores de texto.
Hay determinados archivos que slo se pueden abrir en la vista Cdigo y le permiten modificar el
cdigo del archivo, como ocurre con los documentos CSS. Puede actualizar el documento mientras
trabaja con Dreamweaver y luego guardar los cambios en el archivo.
Si el documento que desea abrir es un archivo de Microsoft Word 97, Word 98 o Word 2000
guardado como HTML, es posible que desee importar el documento en Dreamweaver en lugar de
abrirlo. Cuando importa un documento HTML de Word, Dreamweaver le pide que limpie las etiquetas
de formato sobrantes que Word inserta en los archivos HTML. Puede utilizar el comando Limpiar
HTML de Word para establecer un color de fondo de la pgina y para limpiar el formato de hoja de
estilos CSS en el documento importado.
Para abrir un archivo existente, lleve a cabo una de estas operaciones:
1. En Dreamweaver, elija Archivo > Abrir.
2. En el cuadro de dilogo que se abre a continuacin, haga clic en Examinar y seleccione el
archivo que desea abrir.
3. Haga clic en Abrir.
El documento se abrir en la ventana de documento.
Nota: Los archivos JavaScript, archivos de texto y las hojas de estilos CSS se abren de forma
predeterminada en la vista Cdigo.
Para abrir e importar un archivo HTML de Microsoft Word:
1. En Dreamweaver, elija Archivo > Importar > HTML de Word.
Se abre el cuadro de dilogo Seleccionar archivo HTML de Word a importar.
2. En el cuadro de dilogo, haga clic en Examinar y seleccione el documento que desea abrir.
3. Haga clic en Abrir.
Dreamweaver abrir el documento en una nueva ventana y, seguidamente, abrir el cuadro
de dilogo Limpiar HTML de Word.
4. Marque las casillas de las fichas Bsico y Detalladas para seleccionar las opciones de
limpieza que desea aplicar al documento.
Dreamweaver aplicar la configuracin de limpieza al nuevo documento y se abrir un
registro en el que se reflejen los cambios.
6. Guarde el documento.
Configuracin de las propiedades del documento
Los ttulos de pgina, las imgenes y colores de fondo y los colores del texto y los vnculos son
propiedades bsicas de todos los documentos HTML. El ttulo de pgina identifica y da nombre al
documento. Una imagen o un color de fondo definen la apariencia global del documento. Los colores
del texto y los vnculos ayudan a los usuarios a distinguir entre el texto normal y el hipertexto, as
como a reconocer qu vnculos han visitado y cules no.
Cambio del ttulo de un documento
El ttulo de una pgina HTML ayuda a los visitantes del sitio a realizar un seguimiento de lo que ven
mientras navegan, al tiempo que identifica la pgina en listas de historial y de marcadores. Si no
asigna ningn ttulo a una pgina, sta aparecer en la ventana del navegador y en las listas de
marcadores y de historial como Untitled Document. Asignar un nombre de archivo al documento (al
guardarlo) no equivale a asignar un ttulo a la pgina. Para localizar todos los documentos sin ttulo
del sitio, utilice el comando Sitio > Informes.
M6-23
Para cambiar el ttulo de una pgina:

1. Con el documento abierto, lleve a cabo una de estas operaciones:
Elija Modificar > Propiedades de la pgina.
Seleccione Ver > Barras de herramientas (si es que no est ya seleccionado).
Haga clic con el botn derecho en un rea vaca del documento y luego elija
Propiedades de la pgina.
2. En el cuadro de texto Ttulo, introduzca el ttulo de la pgina y presione Intro o Retorno.

3. Si est editando el ttulo en el cuadro de dilogo Propiedades de la pgina, haga clic en
Aceptar.
El ttulo aparecer en la barra de ttulo de la ventana de documento (y en la barra de
herramientas si sta se encuentra visible). El nombre de archivo de la pgina y la carpeta en
la que est guardado el archivo aparecen entre parntesis junto al ttulo en la barra de ttulo.
Un asterisco indica que el documento contiene cambios que no se han guardado an.
Establecimiento de una imagen de fondo o un color de fondo de pgina
Para definir una imagen o un color para el fondo de la pgina, utilice el cuadro de dilogo
Propiedades de la pgina. Si utiliza tanto una imagen como un color de fondo, el color aparecer
mientras se descarga la imagen y luego la imagen cubrir el color. Si la imagen de fondo contiene
pxeles transparentes, el color de fondo se ver a travs de ellos.
Para definir una imagen o un color de fondo:
1. Elija Modificar > Propiedades de la pgina o seleccione Propiedades de la pgina en el
men contextual de la vista Diseo de la ventana de documento.
2. Para establecer una imagen de fondo, haga clic en el botn Examinar, vaya hasta la imagen
y seleccinela. Como alternativa, introduzca la ruta de acceso a la imagen de fondo en el
cuadro Imagen de fondo.
Dreamweaver forma un mosaico con la imagen de fondo (la repite) si sta no ocupa toda la
ventana del navegador. (Para evitar que se forme un mosaico con la imagen de fondo, utilice
CSS -hojas de estilos en cascada- para desactivar la formacin de mosaicos con la imagen).
3. Para definir un color de fondo, haga clic en el cuadro Color de fondo y seleccione un color
del selector de color.
Manipulacin de colores
En Dreamweaver, muchos de los cuadros de dilogo, as como el inspector de propiedades de
muchos elementos de pgina, contienen un cuadro de color que abre un selector de color. Utilice el
selector de color para elegir el color de un elemento de la pgina.
Para elegir un color en Dreamweaver:
1. Haga clic en un cuadro de color en cualquier cuadro de dilogo o en el inspector de
propiedades.
Aparecer el selector de color.
2. Lleve a cabo una de las siguientes operaciones:

M6-24
Use el cuentagotas para seleccionar un color de la paleta. Todos los colores de las
paletas Cubos de color (predeterminado) y Tono continuo son seguros para la Web;
los de otras paletas no lo son.
Utilice el cuentagotas para seleccionar un color de cualquier punto de la pantalla,

incluso fuera de las ventanas de Dreamweaver. (Si hace clic en el escritorio u otra
aplicacin, Dreamweaver recoger el color donde haya hecho clic, pero es posible
que se active la otra aplicacin. En tal caso, haga clic en una ventana de
Dreamweaver para seguir trabajando con este programa, o mantenga presionado el
botn del ratn al moverlo de Dreamweaver al escritorio para evitar cambiar a otra
aplicacin.)
Para ampliar la seleccin de color, utilice el men emergente situado en la esquina

superior derecha del selector de color. Puede seleccionar Cubos de color, Tono
continuo, SO Windows, Mac OS, Escala de grises y Ajustar a valores seguros para
la Web.
Tenga en cuenta que las paletas Cubos de color y Tono continuo son seguras para
la Web, mientras que SO Windows, Mac OS y Escala de grises no lo son. Si est
utilizando una paleta que no es segura para la Web y luego elige Ajustar a valores
seguros para la Web, Dreamweaver reemplazar el color seleccionado por el color
seguro para la Web ms prximo. Dicho de otro modo, es posible que no consiga el
color deseado.
Para quitar el color actual sin elegir ningn otro color, haga clic en el botn Tachar.
Para abrir el selector de color del sistema, haga clic en el botn Rueda de color.
Definicin de colores predeterminados de texto

Defina colores predeterminados para el texto normal, los vnculos, los vnculos visitados y los
vnculos activos en el cuadro de dilogo Propiedades de la pgina, o bien elija una combinacin de
colores preestablecida para definir los colores del fondo de la pgina y del texto.
Nota: El color del vnculo activo es el que adopta el vnculo cuando se hace clic en l. Es posible que
algunos navegadores Web no utilicen el color especificado.
Para definir los colores predeterminados del texto, lleve a cabo una de las operaciones
siguientes:
Elija Modificar > Propiedades de la pgina y, seguidamente, seleccione colores para las
opciones Color del texto, Color de los vnculos, Vnculos visitados y Vnculos activos.
Elija Comandos > Establecer combinacin de colores y seleccione un color de fondo y una
combinacin de colores de texto y vnculos.
El cuadro de muestra da una idea de cul ser la apariencia de la combinacin de colores
en el navegador.
Insercin y aplicacin de formato al texto

Insercin y aplicacin de formato al texto HTML
Las opciones de formato de Dreamweaver son similares a las de los programas estndar de
tratamiento de texto. Utilice el submen Texto > Formato de prrafo o el men emergente Formato
del inspector de propiedades para establecer el estilo predeterminado (Prrafo, Preformateado,
Encabezado 1, Encabezado 2, etc.) de un bloque de texto. Para cambiar la fuente, el tamao, el
color y el alineamiento del texto seleccionado, use el men Texto o el inspector de propiedades. Para
aplicar formato como negrita, cursiva, cdigo, subrayado, etc., utilice el submen Texto > Estilo.
Tambin puede combinar varias etiquetas HTML estndar para formar un estilo, denominado estilo
HTML. Por ejemplo, puede aplicar formato HTML manualmente utilizando una combinacin de
etiquetas y atributos y guardar ese formato como un estilo HTML que se almacenar en el panel
Estilos HTML. La prxima vez que quiera aplicar formato a texto utilizando esa combinacin de
etiquetas HTML, lo nico que tendr que hacer ser seleccionar el estilo guardado en el panel Estilos
M6-25
HTML. Los estilos HTML son compatibles con casi todos los navegadores Web y permiten un ahorro
de tiempo considerable en comparacin con la aplicacin manual de formato de texto.
Otro tipo de estilo, denominado CSS (hojas de estilos en cascada), permite aplicar formato a texto y
pginas, con la ventaja de que se actualiza de manera automtica. Puede almacenar estilos CSS
directamente en el documento o, si desea tener mayor control y flexibilidad, en una hoja de estilos
externa. Si adjunta una hoja de estilos externa a varias pginas Web, todas las pginas reflejarn
automticamente los cambios realizados en la hoja. Para acceder a estilos CSS, use el panel Estilos
CSS o el modo CSS del inspector de propiedades. Para obtener ms informacin sobre la utilizacin
del inspector de propiedades para aplicar estilos HTML o CSS, consulte Definicin de opciones de
propiedades de texto en la Ayuda de Dreamweaver.
La aplicacin manual de formato HTML y los estilos HTML utilizan etiquetas HTML estndar para
aplicar el formato (como b, i, font y code) que reconocen los navegadores Web ms utilizados. Los
estilos CSS definen el formato del texto de una determinada clase o redefinen el formato de una
etiqueta HTML especfica (como h1, h2, p o li). Los estilos CSS slo son compatibles con los
navegadores Web Netscape Navigator 4.0 y Microsoft Internet Explorer 4.0 o versiones posteriores.
Puede utilizar estilos CSS, estilos HTML y opciones de formato manual HTML en la misma pgina.
La aplicacin de formato se realiza de forma jerrquica: la aplicacin de formato manual HTML anula
la aplicacin de formato de un estilo HTML o CSS, y los estilos CSS incrustados en un documento
anulan los estilos CSS externos.
Adicin de texto a un documento
Hay varias formas de aadir texto a un documento de Dreamweaver. Puede escribir el contenido
directamente en una ventana de documento de Dreamweaver o puede cortar y pegar o importar
texto desde otros documentos.
Para aadir texto al documento, lleve a cabo una de estas operaciones:
Escriba texto directamente en la ventana de documento.
Copie texto de otra aplicacin, cambie a Dreamweaver, coloque el punto de insercin en la

vista Diseo de la ventana de documento y elija Edicin > Pegar. Dreamweaver no mantiene
el formato de texto aplicado en la otra aplicacin, pero conserva los saltos de lnea.
Importacin de texto desde otros documentos

Puede importar datos de tabla en el documento guardando en primer lugar los archivos (por ejemplo,
de Microsoft Excel o de archivos de base de datos) en formato de texto delimitado
Tambin puede importar texto desde documentos HTML de Microsoft Word. Para obtener
informacin sobre la importacin de documentos HTML de Word.
Para importar datos tabulares:
1. Elija Archivo > Importar > Importar datos de tabla o elija Insertar > Objetos de tabla >
Importar datos de tabla.
Aparecer el cuadro de dilogo Importar datos de tabla.
Localice el archivo deseado o introduzca su nombre en el cuadro de texto.
2. Seleccione el delimitador empleado cuando se guard el archivo como texto delimitado. Las
opciones disponibles son: Tab, Coma, Punto y coma, Dos puntos y Otro.
Si selecciona Otro, aparecer un campo en blanco al lado de la opcin. Introduzca el
carcter empleado como delimitador.
3. Utilice las restantes opciones para aplicar formato o definir la tabla en la que se importarn
los datos.
4. Haga clic en Aceptar cuando termine.
Adicin de espacio entre caracteres
HTML slo permite un espacio entre caracteres; para aadir espacio adicional en un documento
debe insertar un espacio indivisible.
M6-26
Puede establecer una preferencia para que se agreguen espacios indivisibles en un documento de
forma automtica. Para hacerlo, elija Edicin > Preferencias y, en la categora General compruebe
que la casilla Permitir mltiples espacios consecutivos est marcada.
Para insertar un espacio indivisible, lleve a cabo una de estas operaciones:
En la barra Insertar, seleccione Caracteres y luego haga clic en el icono Espacio indivisible.
Elija Insertar > Caracteres especiales > Espacio indivisible.
Pulse Control+Mays+Espacio.
Adicin de espaciado de prrafo

Dreamweaver funciona de forma similar a muchas aplicaciones de tratamiento de textos: presione
Intro para crear un nuevo prrafo. Los navegadores Web insertan automticamente una lnea en
blanco de espacio entre los prrafos. Puede aadir una nica lnea de espacio entre los prrafos
mediante la insercin de un salto de lnea.
Para aadir un retorno de prrafo:
Presione Intro.
Para aadir un salto de lnea, lleve a cabo una de estas operaciones:
Presione Mays+Intro.
En la barra Insertar, seleccione Caracteres y luego haga clic en el icono Salto de lnea.
Elija Insertar > Caracteres especiales > Salto de lnea.
Aplicacin de formato al texto

Puede aplicar formato de texto HTML a una letra o crear un sitio completo utilizando los comandos
de Texto > Formato de prrafo o las opciones del inspector de propiedades. Este tipo de formato
manual prevalece sobre el establecido por un estilo HTML o CSS.
Al aplicar formato de texto HTML se utiliza el inspector de propiedades y los comandos del men
Texto, como Texto > Formato de prrafo y Texto > Estilo.
Configuracin y cambio de fuentes y estilos
Utilice las opciones del inspector de propiedades o el men Texto para establecer o cambiar las
caractersticas de fuente del texto seleccionado. Puede establecer el tipo, estilo (negrita, cursiva) y el
tamao de la fuente.
Cuando utiliza el inspector de propiedades para aplicar el estilo en negrita o cursiva, Dreamweaver
aplica automticamente las etiquetas <strong> o <em>, respectivamente. Si disea pginas para
navegadores de la versin 3.0 o anterior, debe cambiar esta preferencia en la categora General del
cuadro de dilogo Preferencias (Edicin > Preferencias).
Los tamaos de fuente HTML son tamaos relativos, no de puntos. Los usuarios establecen el
tamao de puntos de la fuente predeterminada para sus navegadores. ste ser el tamao de fuente
que vern cuando elijan Predeterminada o 3 en el inspector de propiedades o el submen Texto >
Tamao. Los tamaos 1 y 2 aparecern ms pequeos que el tamao de fuente predeterminado; los
tamaos 4 a 7 aparecern ms grandes. Asimismo, las fuentes suelen aparecer con un mayor
tamao en Windows que en Macintosh, si bien Macintosh Internet Explorer 5 utiliza el mismo tamao
predeterminado que Windows.
Sugerencia: Una forma de asegurar el uso del mismo tamao de fuente consiste en utilizar estilos
CSS con el tamao de fuente definido en pxeles. Para obtener ms informacin sobre CSS.
Para establecer o cambiar las caractersticas de fuente:
1. Seleccione el texto. Si no hay texto seleccionado, el cambio se aplicar al texto que escriba
a continuacin.
2. Dispone de las opciones siguientes:
Para cambiar la fuente, elija una combinacin de fuentes en el inspector de

propiedades o en el submen Texto > Fuente.
M6-27
Elija Predeterminada para quitar los tipos de fuente aplicados anteriormente y

aplicar la fuente predeterminada al texto seleccionado (la fuente predeterminada del
navegador o la fuente asignada a la etiqueta en la hoja de estilos CSS).
Para cambiar el estilo de fuente, haga clic en Negrita o Cursiva en el inspector de

propiedades o elija un estilo de fuente (Negrita, Cursiva, Subrayado, etc.) en el
submen Texto > Estilo. Insercin y aplicacin de formato al texto.
Para cambiar el tamao de fuente, elija un tamao (de 1 a 7) en el inspector de

propiedades o en el submen Texto > Tamao.
Para aumentar o reducir el tamao del texto seleccionado, elija un tamao relativo
(desde + o 1 hasta +4 o 3) en el inspector de propiedades o en el men Texto >
Cambio de tamao.
Nota: Estos nmeros indican una diferencia relativa respecto al tamao de la fuente
base. El valor predeterminado de la fuente base es 3. Por tanto, un valor de +4
produce un tamao de fuente de 3 + 4, es decir, 7. El valor mximo del tamao de
fuente es 7. Si intenta definir uno ms alto, aparecer como 7. Dreamweaver no
muestra la etiqueta basefont (que se encuentra en la seccin head ), aunque el
tamao de fuente se mostrar correctamente en un navegador. Para comprobarlo,
compare el texto definido en 3 con el texto definido en +3.
Modificacin de combinaciones de fuentes

Utilice el comando Editar lista de fuentes para establecer las combinaciones de fuentes que
aparecen en el inspector de propiedades y el submen Texto > Fuente. Las combinaciones de
fuentes determinan cmo muestra un navegador el texto de la pgina Web.
Un navegador utiliza la primera fuente de la combinacin que se encuentre en el sistema del usuario;
si no est instalada ninguna de las fuentes de la combinacin, el navegador mostrar el texto de
acuerdo con las preferencias que tenga definidas.
Para modificar las combinaciones de fuentes:
1. Elija Texto > Fuente > Editar lista de fuentes.
2. Seleccione la combinacin de fuentes en la lista de la parte superior del cuadro de dilogo.
Las fuentes de la combinacin seleccionada aparecern en la lista Fuentes elegidas, situada
en la esquina inferior izquierda del cuadro de dilogo. A la derecha se encuentra una lista
con todas las fuentes disponibles instaladas en el sistema.
Para aadir o quitar fuentes de una combinacin, haga clic en los botones de flecha
(<< o >>) entre las listas Fuentes elegidas y Fuentes disponibles.
Para aadir o quitar una combinacin de fuentes, haga clic, respectivamente, en los
botones ms (+) y menos (-) de la parte superior del cuadro de dilogo.
Para aadir una fuente que no est instalada en el sistema, escriba el nombre de la
fuente en el cuadro de texto situado bajo la lista Fuentes disponibles y haga clic en
el botn << para aadirla a la combinacin. Aadir una fuente que no est instalada
en el sistema resulta til, por ejemplo, para especificar una fuente slo para
Windows cuando desarrolla pginas con Macintosh.
Para desplazarse por la lista de combinaciones de fuentes, haga clic en los botones
de flecha de la parte superior del cuadro de dilogo.
Para aadir una nueva combinacin a la lista de fuentes:

1. Elija Texto > Fuente > Editar lista de fuentes.
2. Seleccione una fuente de la lista de Fuentes disponibles y haga clic en el botn << para
aadir la fuente a la lista de Fuentes elegidas.
3. Repita el paso 2 con cada fuente de la combinacin.
M6-28
Para aadir una fuente que no est instalada en el sistema, escriba el nombre de la fuente
en el campo de texto situado bajo la lista Fuentes disponibles y haga clic en el botn << para
aadirla a la combinacin. Aadir una fuente que no est instalada en el sistema resulta til,
por ejemplo, para especificar una fuente slo para Windows cuando desarrolla pginas con
Macintosh.
4. Cuando termine de seleccionar fuentes especficas, seleccione una familia genrica de
fuentes en el men Fuentes disponibles y haga clic en el botn << para pasar la familia
genrica de fuentes a la lista Fuentes elegidas.
Las familias genricas de fuentes son: cursiva, fantasa, monoespacio, sans-serif y serif. Si
ninguna de las fuentes de la lista Fuentes elegidas est disponible en el sistema del usuario,
el texto aparecer en la fuente predeterminada asociada con la familia genrica de fuentes.
Por ejemplo, la fuente monoespacio predeterminada en la mayora de los sistemas es
Courier.
Aplicacin de formato a prrafos
Utilice el men Formato del inspector de propiedades o el submen Texto > Formato de prrafo para
aplicar las etiquetas estndar de prrafo y encabezado.
Cuando aplica una etiqueta de encabezado a un prrafo, Dreamweaver aade automticamente la
siguiente lnea de texto como un prrafo sencillo. Para cambiar esta configuracin, elija Edicin >
Preferencias y luego, en la categora General, en la seccin Opciones de edicin, compruebe que la
casilla Cambiar a prrafo sencillo tras el encabezado no est marcada.
Para aplicar una etiqueta de prrafo o encabezado:
1. Site el punto de insercin en el prrafo o seleccione parte del texto del prrafo.
2. En el submen Texto > Formato de prrafo o en el men emergente Formato del inspector
de propiedades, elija una opcin:
Elija un formato de prrafo (por ejemplo, Encabezado 1, Encabezado 2,

Preformateado, etc.).
La etiqueta HTML asociada con el estilo seleccionado (por ejemplo, h1 para
Encabezado 1, h2 para Encabezado 2, pre para Preformateado, etc.) se aplicar a
todo el prrafo.
Elija Ninguno para quitar un formato de prrafo.
Alineamiento del texto

Puede alinear texto en la pgina utilizando el inspector de propiedades o el submen Texto > Alinear.
Asimismo, puede centrar cualquier elemento en una pgina usando el comando Texto > Alinear >
Centro.
Para alinear texto:
1. Seleccione el texto que desea alinear o, simplemente, inserte el puntero al principio del
texto.
2. Haga clic en una opcin de alineacin (Izquierda, Derecha o Centro) del inspector de
propiedades o elija Texto > Alinear y seleccione un comando.
Para centrar elementos:
1. Seleccione el elemento que desea centrar (imagen, plug-in, tabla u otro elemento de
pgina).
2. Elija Texto > Alinear > Centro.
Nota: Se pueden alinear y centrar bloques completos de texto, pero no partes de un
encabezado o de un prrafo.
Sangrar texto
El comando Sangra aplica la etiqueta HTML blockquote al prrafo de texto, y aplica sangra a ambos
lados de la pgina.
M6-29
Para aplicar y quitar sangra al texto:

1. Site el punto de insercin en el prrafo al que desea aplicar sangra.
2. Haga clic en el botn Sangra o Anular sangra del inspector de propiedades, elija Texto >
Sangra o Anular sangra, o elija Lista > Sangra o Anular sangra en el men contextual.
Nota: Puede aplicar varias sangras a un prrafo. Cada vez que utiliza este comando, la sangra
del texto aumenta en ambos lados del documento.
Cambio del color del texto
Puede cambiar el color del texto seleccionado de modo que el nuevo color prevalezca sobre el color
establecido en Propiedades de la pgina. Si no se ha establecido ningn color de texto en
Propiedades de la pgina, se utilizar el negro como color predeterminado.
Para cambiar el color del texto:
1. Seleccione el texto.
Elija un color en la paleta de colores vlidos para los navegadores haciendo clic en
el selector de color del inspector de propiedades.
Elija Texto > Color. Aparecer el cuadro de dilogo del selector de color del
sistema. Seleccione un color y haga clic en Aceptar.
Escriba el nombre del color o un nmero hexadecimal directamente en el campo del

inspector de propiedades.
Para definir el color predeterminado del texto, utilice el comando Modificar >
Propiedades de la pgina
Creacin de listas ordenadas y sin ordenar

Puede crear listas ordenadas (numeradas), listas sin ordenar (con vietas) y listas de definicin a
partir de texto existente o de texto nuevo que escriba en la ventana de documento. Las listas de
definicin no utilizan caracteres iniciales como puntos de vieta o nmeros y suelen utilizarse en
glosarios o descripciones. Adems, las listas se pueden anidar. Una lista anidada es aqulla que
contiene otras listas. Por ejemplo, en algunos casos puede resultar conveniente anidar una lista
ordenada o con vietas en otra numerada u ordenada.
Para obtener informacin sobre un tipo concreto de lista y otras opciones para toda la lista o un
elemento especfico (por ejemplo, restablecer la numeracin, utilizar nmeros romanos en una lista
ordenada o establecer vietas cuadradas), consulte Definicin de opciones de propiedades de lista
en la Ayuda de Dreamweaver.
Para crear una lista nueva:
1. En el documento de Dreamweaver, coloque el punto de insercin en el lugar en el que
desea aadir la lista y lleve a cabo una de estas operaciones:
Haga clic en el botn Lista ordenada o Lista sin ordenar del inspector de
propiedades
Elija Texto > Lista y seleccione el tipo de lista deseado: Lista sin ordenar (con
vietas), Lista ordenada (numerada) o Lista de definicin.
El carcter inicial del elemento especificado de la lista aparecer en la ventana de

documento.
2. Escriba el texto del elemento de la lista y presione Intro (Windows) para crear otro elemento
de la lista.
3. Para terminar la lista, presione dos veces Intro (Windows).
Para crear una lista usando texto existente:
1. Seleccione una serie de prrafos para convertirlos en una lista.
M6-30
2. Haga clic en el botn Lista sin numerar o Lista ordenada del inspector de propiedades o elija
Texto > Lista y seleccione el tipo de lista deseado: Lista sin ordenar, Lista ordenada o Lista
de definicin.
Para crear una lista anidada:
1. Seleccione los elementos de lista que desea anidar.
2. Haga clic en el botn Sangra del inspector de propiedades o elija Texto > Sangra.
Dreamweaver sangrar el texto y crear una lista distinta con los atributos HTML de la lista
original.
3. Aplique un nuevo estilo o tipo de lista al texto sangrado siguiendo el procedimiento detallado.
Ha terminado este mdulo guarde su trabajo y cierre Dreamweaver.
M6-31

01-Modulo 6 Dreamweaver

Caricato da

Informazioni sul documento

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

01-Modulo 6 Dreamweaver

Caricato da

Copyright:

Formati disponibili

Mdulo 6

Utilizar el espacio de trabajo de Dreamweaver

Utilizar ventanas y paneles de Dreamweaver

Utilizar Dreamweaver con otras aplicaciones

Configurar un sitio Dreamweaver

Usar asistente para la definicin del sitio

Editar un sitio Dreamweaver

Insercin y aplicacin de formato al texto

Exploracin del espacio de trabajo

Seleccin de una disposicin para el espacio de trabajo

Para elegir una disposicin del espacio de trabajo:

Los espacios de trabajo

En la disposicin de espacio de trabajo de Dreamweaver 4, cada documento aparece en una

Utilizacin de las ventanas y paneles en Dreamweaver

Para pasar rpidamente de una vista a otra, presione Control+virgudilla (~).

Utilizacin de la barra de herramientas Documento

En la barra de herramientas Documento, aparecen las siguientes opciones:

Mostrar vista de cdigo slo muestra la vista Cdigo en la ventana de documento.

Mostrar vista de diseo slo muestra la vista Diseo en la ventana de documento.

Administracin de archivos muestra el men emergente Administracin de archivos.

Referencia muestra el panel Referencia.

Navegacin por el cdigo le permite desplazarse por el cdigo JavaScript.

Utilizacin de la barra de herramientas Estndar

Utilizacin de la barra Insertar

El panel Caracteres contiene caracteres especiales, como los smbolos de copyright, de

La ficha Marcos contiene disposiciones de conjuntos de marcos que se utilizan

La ficha Plantillas permite insertar regiones editables, opcionales y repetidas en archivos de

TALLER PARA TCNICOS Y ADMINISTRADORES DE SITIOS WEB

La mayora de los cambios realizados en las propiedades se aplicarn de inmediato en la ventana de

Sugerencia: En algunos casos, determinadas propiedades ocultas pueden no aparecer incluso en el

Haga clic en el ttulo del grupo de paneles.

Para seleccionar un panel de un grupo de paneles ampliado:

Para ver un men Opciones del grupo de paneles:

2. Introduzca un nuevo nombre y haga clic en Aceptar.

Para cerrar un grupo de paneles, de manera que desaparezca completamente:

Utilizacin del panel Historial

Arrastre el control deslizante para sealar cualquier paso.

Configuracin de un sitio Dreamweaver

Carpeta local es el directorio de trabajo. En Dreamweaver esta carpeta se conoce como

Editando archivos donde se define la carpeta local.

Comprobando archivos es donde se configura la carpeta que utilizar Dreamweaver para

Compartiendo archivos es donde se define la carpeta remota.

4. Haga clic en Aceptar.

Edicin de un sitio Dreamweaver

Elija Sitio > Abrir sitio y seleccione un sitio.

Edicin de sitios Web existentes con Dreamweaver

Elija Sitio > Editar sitios y haga clic en Nuevo.

Elija Sitio > Abrir sitio > Definir sitios.

2. Complete el cuadro de dilogo.

Creacin de documentos de Dreamweaver

Puede comenzar con un documento en blanco.

Para abrir el cuadro de dilogo Nuevo documento:

Seleccione Archivo> Nuevo.

El cuadro de dilogo Nuevo documento contiene dos fichas: General y Plantillas.

Haga clic en Crear.

Haga doble clic en el elemento de la lista de documentos.

Creacin de un documento basado en un archivo de diseo de Dreamweaver

En Dreamweaver, puede abrir un documento HTML existente o cualquier tipo de documento

Para cambiar el ttulo de una pgina:

Elija Modificar > Propiedades de la pgina.

Seleccione Ver > Barras de herramientas (si es que no est ya seleccionado).

2. En el cuadro de texto Ttulo, introduzca el ttulo de la pgina y presione Intro o Retorno.

2. Lleve a cabo una de las siguientes operaciones:

Utilice el cuentagotas para seleccionar un color de cualquier punto de la pantalla,