01-Modulo 6 Dreamweaver

TALLER PARA TÉCNICOS Y ADMINISTRADORES DE SITIOS WEB

M6-1

Módulo 6

Introducción a

Dreamweaver MX


M6-2

Introducción Macromedia Dreamweaver MX es un editor HTML profesional para diseñar, codificar y desarrollar sitios, páginas y aplicaciones Web. Tanto si desea controlar manualmente el código HTML como si prefiere trabajar en un entorno de edición visual, Dreamweaver le proporciona útiles herramientas que mejorarán su experiencia de creación Web.

Las funciones de edición visual de Dreamweaver permiten crear páginas de forma rápida, sin escribir una sola línea de código. Puede ver todos los elementos o activos del sitio y arrastrarlos desde un panel fácil de usar directamente hasta un documento. Puede agilizar el flujo de trabajo de desarrollo mediante la creación y edición de imágenes en Macromedia Fireworks y su posterior importación directa a Dreamweaver, o bien añadir objetos Macromedia Flash creados directamente en Dreamweaver.

Dreamweaver ofrece también numerosas herramientas y funciones de gestión de código, como las que incluye la vista Código (por ejemplo, colores de código o terminación automática de etiquetas); material de referencia sobre HTML, CSS, JavaScript, CFML, ASP y JSP.

La tecnología Roundtrip HTML de Macromedia importa los documentos con código manual HTML sin modificar el formato del código. Posteriormente, si lo desea, puede formatear el código con el estilo que prefiera.

En éste módulo 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 definición del sitio

Editar un sitio Dreamweaver

Inserción y aplicación de formato al texto

Exploración del espacio de trabajo

Utilización del espacio de trabajo de Dreamweaver En esta sección se describen los elementos principales del espacio de trabajo y se explica cómo elegir una disposición inicial del espacio de trabajo.

Dreamweaver MX ofrece dos disposiciones del espacio de trabajo entre las que elegir: una disposición integrada en la que todo se incluye en una sola ventana y una disposición flotante.

Selección de una disposición para el espacio de trabajo

La primera vez que se inicia Dreamweaver, aparece un cuadro de diálogo que permite elegir una disposición para el espacio de trabajo. Si cambia de idea posteriormente, podrá cambiar a otro espacio de trabajo distinto a través del cuadro de diálogo Preferencias.


M6-3

Para elegir una disposición 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 múltiples documentos, Multiple Document Interface) en el que todas las ventanas de documentos y todos los paneles están integrados en una misma ventana de aplicación, con los grupos de paneles apilados a la derecha. Recomendado para la mayoría de los usuarios.

Nota: En la mayoría de las instrucciones que se facilitan en esta guía 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 disposición 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 Código. Esta disposición es la recomendada para usuarios de HomeSite o ColdFusion Studio y otras personas que escriban código- manualmente que deseen contar con una disposición del espacio de trabajo que les resulte familiar. Para elegir esta disposición, seleccione la opción Espacio de trabajo de Dreamweaver MX y luego elija la opción 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 disposición de espacio de trabajo similar a la utilizada en Dreamweaver 4, con cada documento en una ventana flotante independiente. Los grupos de paneles están apilados, pero no en una ventana de aplicación de tamaño superior que los contenga. Recomendado sólo para los usuarios de Dreamweaver 4 que prefieran utilizar un espacio de trabajo que les resulte más familiar.

Para cambiar a un espacio de trabajo distinto del que ha elegido:

1 Elija Edición > Preferencias.

2 Seleccione la categoría General en la lista Categoría, si no está ya seleccionada.

3 Haga clic en el botón 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 disposición.

5 Haga clic en Aceptar en el mensaje de aviso.

6 Haga clic en Aceptar de nuevo para cerrar el cuadro de diálogo Preferencias.

7 Salga de Dreamweaver y reinícielo.


M6-4

Los espacios de trabajo

En el espacio de trabajo Dreamweaver MX, todas las ventanas y paneles están integrados en una única ventana de aplicaciones de mayor tamaño.

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 disposición del espacio de trabajo, de forma predeterminada, el inspector de propiedades está contraído y la ventana de documento aparece en la vista Código.


M6-5

En la disposición 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 automáticamente, a los lados de la pantalla y en la ventana Documento, al arrastrarlas o cambiar su tamaño. Esto facilita el desplazamiento y la organización de los distintos paneles flotantes y ventanas de Dreamweaver.


M6-6

Barras y paneles

La ventana Bienvenido ofrece sugerencias para la configuración del espacio de trabajo para distintos fines e información sobre nuevas funciones para aquellas personas que hayan utilizado versiones anteriores de Dreamweaver.

La barra Insertar contiene botones para la inserción de diversos tipos de “objetos”, como imágenes, tablas y capas, en un documento. Cada objeto es un fragmento de código 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 menús emergentes que proporcionan diferentes vistas de la ventana de documento (como la vista Diseño y la vista Código), diversas opciones de visualización y algunas operaciones comunes como la obtención de una vista previa en un navegador.

La barra de herramientas Estándar (que no aparece en la disposición de espacio de trabajo predeterminada) contiene botones para las operaciones más habituales de los menús Archivo y Edición: Nuevo, Abrir, Guardar, Guardar todo, Cortar, Copiar, Pegar, Deshacer y Rehacer. Para mostrar la barra de herramientas Estándar, elija Ver> Barras de herramientas > Estándar.

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 disposición 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 jerarquía de etiquetas que rodean a la selección actual en la vista Diseño, haga clic en cualquier etiqueta de la jerarquía para seleccionar la etiqueta y todo su contenido. (No aparece en vista Código, 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 común. Para ampliar un grupo de paneles, haga clic en la flecha de ampliación situada a la izquierda del nombre del grupo; para desacoplar un grupo de paneles, arrástrelo por los puntos situados en el borde izquierdo de la barra de título del grupo.

El panel Sitio le permite administrar los archivos y carpetas que forman el sitio, también 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 disposición de espacio de trabajo predeterminada) muestra botones en la barra de estado, para abrir y cerrar los paneles e inspectores que se utilizan con más frecuencia.

Dreamweaver ofrece otros muchos paneles, inspectores y ventanas que no se muestran aquí, como el panel Historial y el Inspector de código. La mayoría de los paneles pueden apilarse en grupos.

Para abrir paneles, inspectores y ventanas de Dreamweaver, utilice el menú Ventana. Una marca de verificación al lado de un elemento de este menú indica que el elemento señalado se encuentra abierto, aunque puede estar oculto detrás 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.

Utilización de las ventanas y paneles en Dreamweaver

En esta sección se explica cómo 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-7

Vista Diseño, un entorno de diseño para la disposición visual de la página, la edición visual y el desarrollo rápido de aplicaciones. En esta vista, Dreamweaver muestra una representación visual del documento completamente edítale, similar a la que aparecería en un navegador. Puede configurar la vista diseño para que muestre el contenido dinámico mientras trabaja en el documento.

Vista Código, un entorno de codificación manual que permite escribir y editar código HTML, JavaScript, de lenguaje de-servidor, como Microsoft Active Server Pages (ASP) o ColdFusion Markup Language, o cualquier otro tipo de código.

Es posible ver el mismo documento en las dos vistas, Código y Diseño, en una sola ventana.

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

Cuando la ventana de documento tiene una barra de título, ésta muestra el título de la página y, entre paréntesis, el nombre y la ruta del archivo. Si se han realizado cambios que aún no se han guardado, detrás del nombre del archivo, Dreamweaver incluye un asterisco.

Cuando se maximiza la ventana de documento en la disposición integrada de espacio de trabajo , no aparece la barra de título; en este caso, el título de la página y el nombre y la ruta del archivo aparecen en la barra de título 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 información adicional sobre el documento que está creando.

El selector de etiquetas muestra la jerarquía de etiquetas que rodea a la selección actual. Haga clic en cualquier etiqueta de la jerarquía 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 botón de derecho del ratón y elija una clase o un ID del menú contextual.

El menú emergente Tamaño de ventana (que sólo está visible cuando está activa la vista Diseño) permite cambiar el tamaño de la ventana de documento para que adopte dimensiones predeterminadas o personalizadas.

A la derecha del menú emergente Tamaño de ventana aparecen la estimación del tamaño del documento y del tiempo de descarga de la página, incluidos todos los archivos dependientes, como imágenes y otros archivos multimedia.

Cambio del tamaño de la ventana de documento

La barra de estado muestra las dimensiones actuales de la ventana de documento (en píxeles). Para elegir un tamaño de ventana que se ajuste a alguno de los tamaños habituales de monitor, haga clic en el tamaño de la ventana y elija un valor del menú emergente que aparece. Si no desea asignar un tamaño tan preciso, utilice los métodos estándar 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 tamaño.

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-8

Para diseñar una página cuyo mejor aspecto se logra con un tamaño específico, puede ajustar la ventana de documento con cualquiera de los tamaños predeterminados, editar dichos tamaños predeterminados o crear nuevos tamaños.

Nota: El tamaño de la ventana indicado corresponde a las dimensiones internas de la ventana del navegador, sin bordes. El tamaño del monitor figura entre paréntesis. Por ejemplo, la opción “536 x 196 (640 x 480, Predeterminado)” es el tamaño de ventana que se debe utilizar si los visitantes van a hacer uso de Microsoft Internet Explorer o Netscape Navigator en su configuración predeterminada con un monitor de 640 x 480.

Para establecer un tamaño predeterminado para la ventana de documento: Elija uno de los tamaños del menú emergente situado en la parte inferior de la ventana de documento.

Para cambiar los valores que aparecen en el menú emergente Tamaño de ventana:

1. Elija Editar tamaños en el menú emergente Tamaño de ventana.

2. Haga clic en cualquiera de los valores de ancho o alto de la lista de tamaños de ventana y escriba un valor nuevo.

Para hacer que la ventana de documento se ajuste sólo a un ancho específico (sin modificar el alto), seleccione un valor de alto y elimínelo.

3. Haga clic en el cuadro de texto Descripción para introducir texto descriptivo sobre un tamaño específico.

4. Haga clic en Aceptar para guardar el cambio y regresar a la ventana de documento.

Para añadir un valor al menú emergente Tamaño de ventana:

1. Elija Editar tamaños en el menú emergente Tamaño 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 sólo el Ancho o el Alto, sencillamente deje un campo vacío.

4. Haga clic en el campo Descripción para introducir el texto descriptivo sobre el tamaño agregado.

5. Haga clic en Aceptar para guardar el cambio y regresar a la ventana de documento. Por ejemplo, puede escribir SVGA o PC estándar junto a la entrada para un monitor de 800 x 600 píxeles, junto a la entrada correspondiente a un monitor de 832 x 624 píxeles. La mayoría de los monitores se pueden ajustar a varias dimensiones de píxeles.

Para maximizar una ventana de documento:

Haga clic en el botón Maximizar en la barra de título de la ventana de documento.

Utilización de la barra de herramientas Documento

La barra de herramientas Documento contiene botones que permiten alternar entre diferentes vistas del documento rápidamente: Código, Diseño, una vista dividida que muestra las dos anteriores y la vista Live Data. La barra de herramientas contiene también algunos comandos y opciones relativos a la visualización del documento, su transferencia entre los sitios local y remoto, y la depuración del código JavaScript.


M6-9

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 código sólo muestra la vista Código en la ventana de documento.

Mostrar vistas de código y diseño muestra la vista Código en una parte de la ventana de documento y la vista Diseño en la otra parte.

Cuando seleccione esta vista combinada, se encontrará disponible la opción Vista de diseño encima del menú Ver.

Utilice esta opción para especificar qué vista debe aparecer en la parte superior de la ventana de documento.

Mostrar vista de diseño sólo muestra la vista Diseño en la ventana de documento. También puede elegir una vista en el menú Ver.

Título permite introducir un título para el documento, que aparecerá en la barra de título del navegador.

Si el documento ya tiene título, éste aparecerá en dicho campo.

Administración de archivos muestra el menú emergente Administración 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 diseño actualiza la vista Diseño tras realizar cambios en la vista Código. Los cambios realizados en la vista Código no aparecerán de forma automática en la vista Diseño hasta que se efectúen determinadas acciones, como guardar el archivo o hacer clic en este botón.

Referencia muestra el panel Referencia.

El panel Referencia contiene información de referencia sobre HTML, CSS, JavaScript, CFML, ASP y JSP.

Navegación por el código le permite desplazarse por el código JavaScript.

Ver opciones permite definir las opciones de las vistas Código y Diseño, y establecer qué vista va a aparecer en la parte superior de la ventana.

Las opciones de la vista Diseño permiten ocultar todas las ayudas visuales (como los bordes de tablas, capas y marcos) en una sola acción, cada una de ellas de forma independiente. Estas opciones permiten también ver el contenido de Head y las guías visuales.

Cuando están visibles las vistas Código y Diseño, en el menú aparecen los dos grupos de opciones.


M6-10

Utilización de la barra de herramientas Estándar

La barra de herramientas Estándar contiene botones para las operaciones más habituales de los menús Archivo y Edición. 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 Estándar, elija Ver > Barras de herramientas > Estándar.

Utilización de menús contextuales

Dreamweaver emplea de forma extensiva los menús contextuales, que proporcionan acceso rápido a los comandos y a las propiedades más útiles relacionados con la ventana o el objeto con el que esté trabajando. En los menús contextuales sólo aparecen los comandos pertinentes para la selección actual.

Para utilizar un menú contextual:

1. Haga clic con el botón derecho del ratón en el objeto o ventana.

Aparecerá el menú contextual para el objeto o la ventana seleccionados.

2. Elija un comando en el menú contextual.

Utilización de la barra Insertar

La barra Insertar contiene botones para la creación e inserción de diversos tipos de objetos, como tablas, capas e imágenes. Los botones están 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 ampliación, que aparece en el ángulo izquierdo de la barra de título de la barra Insertar.

Para insertar un objeto:

1. Seleccione la ficha adecuada en la barra Insertar.

2. Haga clic en un botón de objeto o arrastre el icono correspondiente hasta la ventana de documento.

Dependiendo del objeto que se trate, aparecerá un cuadro de diálogo de inserción de objeto, que solicitará que se busque un archivo o se especifiquen los parámetros del objeto.

Para omitir el cuadro de diálogo de inserción de objetos e insertar un objeto marcador de posición vacío:


M6-11

Haga clic con mientras presiona la tecla Control en el botón del objeto.

Por ejemplo, para insertar un marcador de posición para una imagen sin especificar un archivo de imagen, haga clic en el botón Imagen mientras presiona la tecla Control u Opción.

Nota: Este procedimiento no permite omitir todos los cuadros de diálogo de inserción de objetos. Muchos objetos, incluidas barras de navegación, capas, botones Flash y conjuntos de marcos, no permiten insertar marcadores de posición ni objetos con valores predeterminados.

La barra Insertar contiene varias fichas: Común, Disposición, Texto, Tablas, Marcos, Formularios, Plantillas, Caracteres, Media, Head, Script, y Aplicación. Si el documento contiene código de servidor, como los documentos ASP o CFML, aparecen también otras fichas.

La ficha Aplicación permite insertar elementos como juegos de registros, regiones repetidas y grabar formularios de inserción y actualización. Para obtener más información sobre el contenido dinámico.

El panel Caracteres contiene caracteres especiales, como los símbolos de copyright, de comillas curvas y de marca registrada. Observe que es posible que algunos de estos símbolos no se muestren correctamente en las versiones 3.0 y anteriores de los navegadores Internet Explorer y Netscape Navigator.

La ficha Común contiene botones para la creación e inserción de los objetos más utilizados, como imágenes, 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 añadir diversos elementos de la sección head, como etiquetas meta y base.

La ficha Disposición permite insertar tablas y capas, y elegir entre dos vistas de tablas: Estándar (predeterminada) y Disposición. Si se selecciona la vista Disposición, se pueden utilizar las herramientas de disposición de Dreamweaver: Dibujar celda de disposición y Dibujar tabla de disposición.

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 sección 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 función es distinta. Los botones de la ficha Texto simplemente insertan código y no reflejan el estado actual de la selección; si se trata de texto en negrita, el botón de negrita en el inspector de propiedades aparecerá seleccionado, mientras que el mismo botón en la ficha Texto no.

Las fichas de código de servidor, que sólo están disponibles para las páginas 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 código de servidor que pueden insertarse en la vista Código.


M6-12

Si no se puede ver todos los objetos de una ficha simultáneamente, aparece una pequeña 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 botón de objeto, Dreamweaver inserta código en el documento. En algunos casos, el código se inserta inmediatamente; en otros, aparece un editor de etiquetas u otro cuadro de diálogo, que permite especificar otra información antes de insertar el código. Para algunos objetos, no aparece ningún cuadro de diálogo si se inserta el objeto en vista Diseño, pero aparece un editor de etiquetas si se utiliza la vista Código. Con algunos objetos, al insertar el objeto en vista Diseño,

Dreamweaver cambia a la vista Código antes de insertar el objeto.

Algunos objetos, como puntos de fijación con nombre, no aparecen cuando se abre la página en la ventana de un navegador. Para ver los iconos en vista Diseño que marca la ubicación de esos objetos invisibles, elija Ver > Ayudas visuales > Elementos invisibles. Para seleccionar los objetos invisibles en la vista Diseño, haga clic en sus iconos.

Algunas de las preferencias generales afectan a la barra Insertar. Para modificar estas preferencias, elija Edición > Preferencias o Dreamweaver > Preferencias (Mac OS X) y seleccione Sitio en la lista de categorías en la parte izquierda.

Cuando inserte objetos tales como imágenes, tablas, scripts y elementos head, aparecerá un cuadro de diálogo en el que se le solicitará información adicional. Puede suprimir estos cuadros de diálogo desactivando la opción Mostrar diálogo al insertar objetos o manteniendo presionada la tecla Control mientras crea el objeto.

Cuando se inserta un objeto con esta opción desactivada, el objeto recibe valores de atributo predeterminados. Después 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, sólo iconos o sólo texto.

Se puede modificar cualquier objeto de la barra Insertar o crear objetos nuevos; consulte

“Personalización de Dreamweaver” en Macromedia Support Center en la dirección

http://www.macromedia.com/go/customizing_dreamweaver.

Utilización del inspector de propiedades

El inspector de propiedades permite examinar y editar las propiedades del elemento de página seleccionado actualmente, como texto o un objeto insertado. Puede seleccionar elementos de página en la vista Diseño o en la vista Código.

Para mostrar u ocultar el inspector de propiedades, elija Ventana > Propiedades.

La mayoría de los cambios realizados en las propiedades se aplicarán 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 edición de la propiedad, y se presiona Intro para cambiar a otra propiedad. El contenido del inspector de propiedades varía dependiendo del elemento seleccionado. Para obtener más información sobre propiedades específicas, seleccione un elemento en la ventana de documento y, a continuación, haga clic en el icono de ayuda en el extremo superior derecho del inspector de propiedades. El inspector de propiedades muestra inicialmente la mayoría de las propiedades del elemento seleccionado. Haga clic en la flecha de ampliación del extremo inferior derecho del inspector de propiedades para contraer el inspector de propiedades y mostrar únicamente las propiedades utilizadas con mayor frecuencia.


M6-13

Sugerencia: En algunos casos, determinadas propiedades ocultas pueden no aparecer incluso en el inspector de propiedades ampliado; en estos casos, utilice la vista Código o el inspector de código para codificar manualmente dichas propiedades o seleccione la vista Código y elija Modificar > Editar etiqueta.

Administración 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 también se pueden acoplar a la ventana de aplicación 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 vacía estrecha en la parte superior del mismo. En esta documentación, el término, “barra de título del grupo de paneles” hace referencia al área en la que aparece el nombre del grupo de paneles y no a esta barra vacía estrecha.

Para ampliar o contraer un grupo de paneles, lleve a cabo una de las siguientes operaciones:

Haga clic en la flecha de ampliación, que aparece en el lado izquierdo de la barra de título del grupo de paneles.

Haga clic en el título 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:

Arrástrelo por los puntos de sujeción (situados en el borde izquierdo de la barra de título 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:

Arrástrelo por los puntos hasta que su contorno indique que está acoplado.

La mayoría de los paneles sólo 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), sólo 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 título. El grupo de paneles no se acopla mientras no se arrastre por sus puntos de sujeción.

Para ver un menú Opciones del grupo de paneles:

Amplíe el grupo de paneles haciendo clic en su flecha de ampliación.

El menú Opciones sólo está visible cuando el grupo de paneles está ampliado.

Sugerencia: Algunas opciones están disponibles en el menú contextual del grupo de paneles incluso si el grupo está ampliado; haga-clic con el botón derecho del ratón en la barra de título del grupo de paneles para ver el menú contextual.

Para cambiar el nombre de un grupo de paneles:


M6-14

1. Elija Cambiar nombre de grupo de paneles en el menú Opciones situado en el lado derecho de la barra de título del grupo de paneles.

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

Para desacoplar un panel de un grupo:

Arrástrelo 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:

Arrástrelo 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 título del grupo de paneles.

Haga doble clic en cualquier lugar de la barra de título 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 título 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 tamaño el conjunto completo de grupos de paneles (sólo en espacio de trabajo flotante):

Arrastre el conjunto de grupos de paneles para ajustar su tamaño de la misma manera que lo haría con una ventana del sistema operativo. Por ejemplo, puede arrastrar el área de ajuste de tamaño del extremo inferior derecho del conjunto de grupos de paneles.

Configuración de preferencias de Paneles

Utilice las preferencias de Paneles para especificar qué paneles e inspectores aparecerán siempre sobre la ventana de documento y cuáles podrán quedar ocultos por dicha ventana. También puede utilizar las preferencias de Paneles para especificar qué iconos aparecerán en las fichas para los paneles, si aparecerá la barra lanzadora y qué paneles e inspectores aparecerán en dicha barra.

Para definir las preferencias para los paneles, elija Edición > Preferencias y seleccione Paneles en la lista Categoría, situada a la izquierda. A continuación, seleccione cualquiera de las opciones siguientes:

Siempre visible permite especificar qué paneles estarán siempre visibles en la ventana de documento. De forma predeterminada, todos los paneles, inspectores y otros como las ventanas,


M6-15

“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 opción Propiedades. Ahora el inspector de propiedades sólo 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 opción Siempre visible no se aplica en el espacio de trabajo integrado cuando todos los paneles están acoplados.

Mostrar iconos en paneles y lanzador permite determinar si aparecerá la barra del lanzador.

Cuando se selecciona esta opción, la barra del lanzador aparece en el área de la barra de estado y un icono pequeño 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 añadir un elemento a la barra del lanzador, haga clic en el botón con el signo más (+).

2. Para quitar un elemento de la barra del lanzador, resalte el elemento y haga clic en el botón 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 botón 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 más información 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 número máximo 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 señala inicialmente el último paso realizado.


M6-16

Utilización 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 operación realizada en un documento, elija Edición > Deshacer como en cualquier otra aplicación. (El nombre del comando Deshacer cambiará en el menú Edición para reflejar la última operación realizada.)

El panel Historial también permite volver a reproducir pasos ya realizados y automatizar tareas mediante la creación de nuevos comandos. Para obtener más información.

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 operación tiene el mismo efecto que elegir Edición > 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 señalar cualquier paso.

Haga clic a la izquierda de un paso de la ruta del control deslizante; el control deslizante se desplazará automáticamente hasta dicho paso y deshará pasos conforme se desplace.

Nota: Para desplazarse automáticamente 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 continuación, realiza una nueva operación en el documento, no podrá rehacer los pasos deshechos, pues habrán desaparecido del panel Historial.

Para definir el número de pasos que el panel Historial mantiene y muestra:

1. Elija Edición > Preferencias y seleccione General de la lista Categoría.

2. Introduzca un número para Número máximo de pasos de historial.

El valor predeterminado suele ser válido para la mayoría de las necesidades de los usuarios.

Cuanto mayor sea el número, más 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 número máximo de pasos, los pasos más 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 también borra toda la información de deshacer del documento actual. Después de elegir Borrar historial, no podrá deshacer los pasos borrados. (La opción 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 rápido a la información que hace su trabajo con Dreamweaver más eficaz. Incluye tutoriales, notas técnicas, extensiones de Dreamweaver y otros datos de interés.

Para obtener información actualizada sobre Dreamweaver de macromedia.com, haga clic en el botón Actualizar.


M6-17

Configuración 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 organización de los archivos en un sitio permite utilizar Dreamweaver con FTP para cargar el sitio en el servidor Web, controlar y mantener los vínculos de forma automática, administrar y compartir archivos. No podrá sacar el máximo partido de las funciones de Dreamweaver a menos que defina un sitio.

Un sitio Dreamweaver consta de un máximo de tres partes, según 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, según el entorno, para comprobación, producción, colaboración, etc. En Dreamweaver esta carpeta se denomina “sitio remoto”.

Carpeta para páginas dinámicas es la carpeta donde Dreamweaver procesa las páginas dinámicas.

Para empezar, puede configurar un sitio Dreamweaver completo, o simplemente realizar el primer paso, la configuración de la carpeta local. Para poder empezar a trabajar con Dreamweaver, como mínimo, es necesario configurar una carpeta local.

Existen dos maneras de configurar un sitio Dreamweaver: utilizar el asistente para la Definición del sitio, que le guiará por el proceso de configuración, o bien las opciones Avanzadas del cuadro de diálogo Definición del sitio, que permiten definir carpetas locales, remotas y de prueba de forma individual, según sus necesidades.

Para definir un sitio Dreamweaver:

1. Seleccione Sitio > Nuevo sitio.

Aparece el cuadro de diálogo Definición del sitio.

2. Haga clic en la ficha Básicas para utilizar el asistente para la Definición del sitio o en la ficha Avanzadas para emplear las opciones avanzadas.

3. Realice el proceso de definición del sitio Dreamweaver:

Responda a las preguntas del asistente para la Definición del sitio y haga clic en Siguiente para avanzar por el proceso de definición.

Si utiliza las opciones Avanzadas, complete las categorías Datos locales, Datos remotos y Servidor de prueba, según el caso.

Nota: Se recomienda que los nuevos usuarios de Dreamweaver utilicen el asistente para la Definición del sitio. Es probable que los usuarios que tengan más experiencia con Dreamweaver prefieran las opciones Avanzadas.

Uso del asistente para la definición del sitio

Puede utilizar el asistente para la Definición del sitio para configurar un sitio Dreamweaver. El asistente para la Definición del sitio le guía por el proceso de configuración del sitio. Es el método recomendado para los usuarios nuevos de Dreamweaver.

El asistente consta de tres secciones. Cada sección puede tener varias pantallas, denominadas partes, según 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 páginas dinámicas.

Compartiendo archivos es donde se define la carpeta remota.


M6-18

En la parte superior del cuadro de diálogo, el nombre de sección que aparece resaltado indica en qué paso del proceso de configuración se encuentra. Es posible que no necesite establecer carpetas en las tres secciones. En cada sección, el programa le hará preguntas para ayudarle a determinar sus necesidades.

Para utilizar el asistente para la Definición del sitio para configurar un sitio Dreamweaver:

1. Seleccione Sitio > Nuevo sitio.


2. Haga clic en la ficha Básicas para utilizar el asistente para la Definición 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 Atrás para regresar a una pantalla anterior.

Configuración 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. También puede añadir carpetas remotas y de prueba, pero es necesario configurar al menos una carpeta local para poder iniciar el desarrollo con Dreamweaver.

Configuración de una carpeta local:

1. Elija Sitio > Nuevo sitio.


2. Haga clic en el botón Avanzadas, si las opciones Avanzadas no están visibles.

La ficha Avanzadas del cuadro de diálogo Definición del sitio muestra las opciones de la categoría Datos locales.

3. Para obtener más información, haga clic en el botón Ayuda del cuadro de diálogo.


M6-19


Dreamweaver crea el caché inicial del sitio y el nuevo sitio Dreamweaver aparece en el panel Sitio.

Más tarde, cuando esté listo para publicar el sitio en un servidor remoto, deberá añadir información adicional sobre el sitio.

Configuración 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 administración de los archivos en los sitios Dreamweaver.

Según el entorno, la carpeta remota es el lugar donde se almacenan los archivos para comprobación, colaboración, producción 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 categoría 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 cómo accederá a la carpeta remota y anote la información de conexión. Cuando haya reunido esta información, utilice el comando Editar sitios para configurar la carpeta remota.

Después de configurar una carpeta remota, puede conectar con ella y luego localizar y administrar los archivos del sitio Dreamweaver. Si está desarrollando un sitio dinámico, tendrá que añadir una carpeta para procesar páginas dinámicas.

Para configurar una carpeta remota:

1. Elija Sitio> Editar sitios.

Aparece el cuadro de diálogo Editar sitios.

2. Seleccione un sitio Dreamweaver existente.

Si no ha definido ningún sitio Dreamweaver, cree una carpeta local antes de continuar.

3. Haga clic en Editar.


4. Haga clic en el botón Avanzadas si Dreamweaver muestra el asistente para la Definición del sitio.

5. Seleccione Datos remotos en la lista Categoría que aparece en la parte izquierda.

6. Elija una opción de acceso.

Para obtener más información, haga clic en el botón Ayuda del cuadro de diálogo.


Para conectar con una carpeta remota:

En el panel Sitio, elija Sitio > Conectar o haga clic en el botón 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 diálogo de Dreamweaver una vez establecida la conexión.

Para desconectarse de una carpeta remota:

En el panel Sitio, elija Sitio > Desconectar o haga clic en el botón Desconectar en la barra de herramientas del panel Sitio.


M6-20

Edición de un sitio Dreamweaver

En el cuadro de diálogo Definición 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.

Edición 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.

Edición 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 diálogo Definición 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 diálogo Definición del sitio muestra las opciones de Datos locales.

2. Complete el cuadro de diálogo.

Para obtener más información, haga clic en el botón Ayuda del cuadro de diálogo.


Creación de documentos de Dreamweaver

El cuadro de diálogo Nuevo documento le ofrece varios tipos de documentos a partir de los que puede crear una página nueva. Dreamweaver abre el cuadro de diálogo Nuevo documento cuando elige Archivo > Nuevo. Si suele trabajar con un tipo de documento, por ejemplo páginas 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 diálogo Nuevo documento.

Manipulación del cuadro de diálogo Nuevo documento

El cuadro de diálogo Nuevo documento le ofrece distintas posibilidades de selección 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 diálogo Nuevo documento:

Seleccione Archivo> Nuevo.

El cuadro de diálogo Nuevo documento contiene dos fichas: General y Plantillas.

La ficha General contiene varios tipos de documentos que puede utilizar para la creación de una nueva página en blanco. Puede seleccionar un nuevo documento en blanco desde las categorías Página básica, Página dinámica y Conjuntos de marcos. Cree una página basada en un tipo especial de archivo, como CSS, JavaScript, VBScript o archivos de texto, seleccionando un documento en la categoría Otro. La categoría 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-21

Las categorías Hojas de estilos CSS, Diseños de página y Diseños de página (accesible) le ofrecen archivos de diseño prefabricados que puede utilizar para crear sus propias páginas. 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, aparecerán opciones distintas en el cuadro de diálogo; por ejemplo, si selecciona un documento HTML, tendrá la opción de hacer el documento compatible con XHTML y, si elige un archivo de Diseño de página, tendrá la opción 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 categoría 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 descripción y, en el caso de las categorías Diseños de página, Hojas de estilos CSS y Conjuntos de marcos, una vista previa del documento seleccionado.

Puede utilizar la opción Preferencias situada en la parte inferior del cuadro de diálogo Nuevo documento para establecer las preferencias predeterminadas del documento, como el tipo de documento, la codificación o la extensión del archivo. Asimismo, puede establecer una opción para abrir automáticamente un nuevo documento sin necesidad de recurrir al cuadro de diálogo Nuevo documento.

Utilice el vínculo Obtener más contenido… en el cuadro de diálogo Nuevo documento para ir a Dreamweaver Exchange y descargar más contenido de diseño de páginas.

Creación de un nuevo documento en blanco

Puede utilizar el cuadro de diálogo 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 automáticamente 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 diálogo Nuevo documento. La ficha General ya aparece seleccionada.

2. En la lista Categoría, seleccione la categoría del documento que desea crear.

Por ejemplo, seleccione Página básica para crear un documento HTML o elija Página dinámica para crear un documento ColdFusion o ASP, etc.

3. En la lista de documentos, seleccione el tipo de página 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 diálogo se cierra y aparece un documento nuevo en la ventana de documento.

Creación de un documento basado en un archivo de diseño de Dreamweaver

Dreamweaver se suministra con distintos archivos de elementos de diseño y diseños de página profesionales. Puede utilizar estos archivos de diseño como punto de partida para el diseño de las páginas de sus sitios.

Los archivos de diseño incluyen documentos y plantillas que se ajustan a las normas de accesibilidad, a los documentos de diseño de página basados en tablas y a las hojas de estilos CSS.


M6-22

Puede obtener una vista previa de un documento y leer una breve descripción de sus elementos de diseño en las categorías Hojas de estilos CSS, Conjuntos de marcos, Diseños de página y Diseños de página (accesible).

Cuando crea un documento basado en un archivo de diseño, Dreamweaver crea una copia del archivo. Si el archivo de diseño incluye vínculos a archivos de activos (como gráficos, 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 ubicación para los archivos dependientes o utilizar la ubicación predeterminada de carpeta que genera Dreamweaver (basada en el nombre original del archivo de diseño).

También puede crear una plantilla nueva a partir de un archivo de diseño. 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 también se copiarán en el sitio.

Nota: Si crea un documento a partir de un conjunto de marcos predefinido, sólo se copiará la estructura del conjunto de marcos, no el contenido. Asimismo, deberá guardar cada archivo de marco por separado.

Creación de un documento basado en una plantilla existente

Puede utilizar el cuadro de diálogo 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.

También puede crear plantillas utilizando los documentos de la categoría Diseños de página en el cuadro de diálogo Nuevo documento. Cuando haya guardado el documento de diseño de página como plantilla en el sitio, podrá crear páginas a partir de dicha plantilla.

Para crear un nuevo documento basado en una plantilla:

1. Seleccione Archivo > Nuevo para abrir el cuadro de diálogo 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 selección de la opción Actualizar página 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 puntuación (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 vínculos existentes con los archivos. Asimismo, no comience los nombres de los archivos con números.

Para guardar un documento:

1. Seleccione Archivo > Guardar.

2. En el cuadro de diálogo que aparece a continuación, 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-23

En Dreamweaver, puede abrir un documento HTML existente o cualquier tipo de documento dinámico, aunque no haya sido creado con Dreamweaver. Puede abrir el documento y utilizar Dreamweaver para editarlo aprovechando las ventajas de trabajar en las vistas Diseño o Código.

También 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 sólo se pueden abrir en la vista Código y le permiten modificar el código 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 página 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 diálogo que se abre a continuación, 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 Código.

Para abrir e importar un archivo HTML de Microsoft Word:

1. En Dreamweaver, elija Archivo > Importar > HTML de Word.

Se abre el cuadro de diálogo Seleccionar archivo HTML de Word a importar.

2. En el cuadro de diálogo, 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 diálogo Limpiar HTML de Word.

4. Marque las casillas de las fichas Básico y Detalladas para seleccionar las opciones de limpieza que desea aplicar al documento.


Dreamweaver aplicará la configuración de limpieza al nuevo documento y se abrirá un registro en el que se reflejen los cambios.

6. Guarde el documento.

Configuración de las propiedades del documento

Los títulos de página, las imágenes y colores de fondo y los colores del texto y los vínculos son propiedades básicas de todos los documentos HTML. El título de página 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 vínculos ayudan a los usuarios a distinguir entre el texto normal y el hipertexto, así como a reconocer qué vínculos han visitado y cuáles no.

Cambio del título de un documento

El título de una página HTML ayuda a los visitantes del sitio a realizar un seguimiento de lo que ven mientras navegan, al tiempo que identifica la página en listas de historial y de marcadores. Si no asigna ningún título a una página, é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 título a la página. Para localizar todos los documentos sin título del sitio, utilice el comando Sitio > Informes.


M6-24

Para cambiar el título de una página:

1. Con el documento abierto, lleve a cabo una de estas operaciones:

Elija Modificar > Propiedades de la página.

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

Haga clic con el botón derecho en un área vacía del documento y luego elija Propiedades de la página.

2. En el cuadro de texto Título, introduzca el título de la página y presione Intro o Retorno.

3. Si está editando el título en el cuadro de diálogo Propiedades de la página, haga clic en Aceptar.

El título aparecerá en la barra de título de la ventana de documento (y en la barra de herramientas si ésta se encuentra visible). El nombre de archivo de la página y la carpeta en la que está guardado el archivo aparecen entre paréntesis junto al título en la barra de título. Un asterisco indica que el documento contiene cambios que no se han guardado aún.

Establecimiento de una imagen de fondo o un color de fondo de página

Para definir una imagen o un color para el fondo de la página, utilice el cuadro de diálogo Propiedades de la página. 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 píxeles transparentes, el color de fondo se verá a través de ellos.

Para definir una imagen o un color de fondo:

1. Elija Modificar > Propiedades de la página o seleccione Propiedades de la página en el menú contextual de la vista Diseño de la ventana de documento.

2. Para establecer una imagen de fondo, haga clic en el botón Examinar, vaya hasta la imagen y selecciónela. 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 formación 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.

Manipulación de colores

En Dreamweaver, muchos de los cuadros de diálogo, así como el inspector de propiedades de muchos elementos de página, 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 página.

Para elegir un color en Dreamweaver:

1. Haga clic en un cuadro de color en cualquier cuadro de diálogo o en el inspector de propiedades.

Aparecerá el selector de color.

2. Lleve a cabo una de las siguientes operaciones:


M6-25

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 aplicación, Dreamweaver recogerá el color donde haya hecho clic, pero es posible que se active la otra aplicación. En tal caso, haga clic en una ventana de Dreamweaver para seguir trabajando con este programa, o mantenga presionado el botón del ratón al moverlo de Dreamweaver al escritorio para evitar cambiar a otra aplicación.)

Para ampliar la selección 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 más próximo. Dicho de otro modo, es posible que no consiga el color deseado.

Para quitar el color actual sin elegir ningún otro color, haga clic en el botón Tachar.

Para abrir el selector de color del sistema, haga clic en el botón Rueda de color.

Definición de colores predeterminados de texto

Defina colores predeterminados para el texto normal, los vínculos, los vínculos visitados y los vínculos activos en el cuadro de diálogo Propiedades de la página, o bien elija una combinación de colores preestablecida para definir los colores del fondo de la página y del texto.

Nota: El color del vínculo activo es el que adopta el vínculo 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 página y, seguidamente, seleccione colores para las opciones Color del texto, Color de los vínculos, Vínculos visitados y Vínculos activos.

Elija Comandos > Establecer combinación de colores y seleccione un color de fondo y una combinación de colores de texto y vínculos.

El cuadro de muestra da una idea de cuál será la apariencia de la combinación de colores en el navegador.

Inserción y aplicación de formato al texto

Inserción y aplicación de formato al texto HTML

Las opciones de formato de Dreamweaver son similares a las de los programas estándar de tratamiento de texto. Utilice el submenú Texto > Formato de párrafo o el menú emergente Formato del inspector de propiedades para establecer el estilo predeterminado (Párrafo, Preformateado, Encabezado 1, Encabezado 2, etc.) de un bloque de texto. Para cambiar la fuente, el tamaño, el color y el alineamiento del texto seleccionado, use el menú Texto o el inspector de propiedades. Para aplicar formato como negrita, cursiva, código, subrayado, etc., utilice el submenú Texto > Estilo.

También puede combinar varias etiquetas HTML estándar para formar un estilo, denominado estilo HTML. Por ejemplo, puede aplicar formato HTML manualmente utilizando una combinación de etiquetas y atributos y guardar ese formato como un estilo HTML que se almacenará en el panel Estilos HTML. La próxima vez que quiera aplicar formato a texto utilizando esa combinación de etiquetas HTML, lo único que tendrá que hacer será seleccionar el estilo guardado en el panel Estilos


M6-26

HTML. Los estilos HTML son compatibles con casi todos los navegadores Web y permiten un ahorro de tiempo considerable en comparación con la aplicación manual de formato de texto.

Otro tipo de estilo, denominado CSS (hojas de estilos en cascada), permite aplicar formato a texto y páginas, con la ventaja de que se actualiza de manera automática. 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 páginas Web, todas las páginas reflejarán automáticamente 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 más información sobre la utilización del inspector de propiedades para aplicar estilos HTML o CSS, consulte Definición de opciones de propiedades de texto en la Ayuda de Dreamweaver.

La aplicación manual de formato HTML y los estilos HTML utilizan etiquetas HTML estándar para aplicar el formato (como b, i, font y code) que reconocen los navegadores Web más utilizados. Los estilos CSS definen el formato del texto de una determinada clase o redefinen el formato de una etiqueta HTML específica (como h1, h2, p o li). Los estilos CSS sólo 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 página.

La aplicación de formato se realiza de forma jerárquica: la aplicación de formato manual HTML anula la aplicación de formato de un estilo HTML o CSS, y los estilos CSS incrustados en un documento anulan los estilos CSS externos.

Adición de texto a un documento

Hay varias formas de añadir 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 añadir texto al documento, lleve a cabo una de estas operaciones:

Escriba texto directamente en la ventana de documento.

Copie texto de otra aplicación, cambie a Dreamweaver, coloque el punto de inserción en la vista Diseño de la ventana de documento y elija Edición > Pegar. Dreamweaver no mantiene el formato de texto aplicado en la otra aplicación, pero conserva los saltos de línea.

Importación 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

También puede importar texto desde documentos HTML de Microsoft Word. Para obtener información sobre la importación 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 diálogo 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 opción. Introduzca el carácter empleado como delimitador.

3. Utilice las restantes opciones para aplicar formato o definir la tabla en la que se importarán los datos.

4. Haga clic en Aceptar cuando termine.

Adición de espacio entre caracteres

HTML sólo permite un espacio entre caracteres; para añadir espacio adicional en un documento debe insertar un espacio indivisible.


M6-27

Puede establecer una preferencia para que se agreguen espacios indivisibles en un documento de forma automática. Para hacerlo, elija Edición > Preferencias y, en la categoría General compruebe que la casilla Permitir múltiples 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+Mayús+Espacio.

Adición de espaciado de párrafo

Dreamweaver funciona de forma similar a muchas aplicaciones de tratamiento de textos: presione Intro para crear un nuevo párrafo. Los navegadores Web insertan automáticamente una línea en blanco de espacio entre los párrafos. Puede añadir una única línea de espacio entre los párrafos mediante la inserción de un salto de línea.

Para añadir un retorno de párrafo:

Presione Intro.

Para añadir un salto de línea, lleve a cabo una de estas operaciones:

Presione Mayús+Intro.

En la barra Insertar, seleccione Caracteres y luego haga clic en el icono Salto de línea.

Elija Insertar > Caracteres especiales > Salto de línea.

Aplicación 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 párrafo 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 párrafo y Texto > Estilo.

Configuración y cambio de fuentes y estilos

Utilice las opciones del inspector de propiedades o el menú Texto para establecer o cambiar las características de fuente del texto seleccionado. Puede establecer el tipo, estilo (negrita, cursiva) y el tamaño de la fuente.

Cuando utiliza el inspector de propiedades para aplicar el estilo en negrita o cursiva, Dreamweaver aplica automáticamente las etiquetas <strong> o <em>, respectivamente. Si diseña páginas para navegadores de la versión 3.0 o anterior, debe cambiar esta preferencia en la categoría General del cuadro de diálogo Preferencias (Edición > Preferencias).

Los tamaños de fuente HTML son tamaños relativos, no de puntos. Los usuarios establecen el tamaño de puntos de la fuente predeterminada para sus navegadores. Éste será el tamaño de fuente que verán cuando elijan Predeterminada o 3 en el inspector de propiedades o el submenú Texto > Tamaño. Los tamaños 1 y 2 aparecerán más pequeños que el tamaño de fuente predeterminado; los tamaños 4 a 7 aparecerán más grandes. Asimismo, las fuentes suelen aparecer con un mayor tamaño en Windows que en Macintosh, si bien Macintosh Internet Explorer 5 utiliza el mismo tamaño predeterminado que Windows.

Sugerencia: Una forma de asegurar el uso del mismo tamaño de fuente consiste en utilizar estilos CSS con el tamaño de fuente definido en píxeles. Para obtener más información sobre CSS.

Para establecer o cambiar las características de fuente:

1. Seleccione el texto. Si no hay texto seleccionado, el cambio se aplicará al texto que escriba a continuación.

2. Dispone de las opciones siguientes:

Para cambiar la fuente, elija una combinación de fuentes en el inspector de propiedades o en el submenú Texto > Fuente.


M6-28

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. Inserción y aplicación de formato al texto.

Para cambiar el tamaño de fuente, elija un tamaño (de 1 a 7) en el inspector de propiedades o en el submenú Texto > Tamaño.

Para aumentar o reducir el tamaño del texto seleccionado, elija un tamaño relativo (desde + o – 1 hasta +4 o –3) en el inspector de propiedades o en el menú Texto > Cambio de tamaño.

Nota: Estos números indican una diferencia relativa respecto al tamaño de la fuente base. El valor predeterminado de la fuente base es 3. Por tanto, un valor de +4 produce un tamaño de fuente de 3 + 4, es decir, 7. El valor máximo del tamaño de fuente es 7. Si intenta definir uno más alto, aparecerá como 7. Dreamweaver no muestra la etiqueta basefont (que se encuentra en la sección head ), aunque el tamaño de fuente se mostrará correctamente en un navegador. Para comprobarlo, compare el texto definido en 3 con el texto definido en +3.

Modificación 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 cómo muestra un navegador el texto de la página Web.

Un navegador utiliza la primera fuente de la combinación que se encuentre en el sistema del usuario; si no está instalada ninguna de las fuentes de la combinación, 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 combinación de fuentes en la lista de la parte superior del cuadro de diálogo.

Las fuentes de la combinación seleccionada aparecerán en la lista Fuentes elegidas, situada en la esquina inferior izquierda del cuadro de diálogo. A la derecha se encuentra una lista con todas las fuentes disponibles instaladas en el sistema.


Para añadir o quitar fuentes de una combinación, haga clic en los botones de flecha (<< o >>) entre las listas Fuentes elegidas y Fuentes disponibles.

Para añadir o quitar una combinación de fuentes, haga clic, respectivamente, en los botones más (+) y menos (-) de la parte superior del cuadro de diálogo.

Para añadir 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 botón << para añadirla a la combinación. Añadir una fuente que no está instalada en el sistema resulta útil, por ejemplo, para especificar una fuente sólo para Windows cuando desarrolla páginas 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 diálogo.

Para añadir una nueva combinación 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 botón << para añadir la fuente a la lista de Fuentes elegidas.

3. Repita el paso 2 con cada fuente de la combinación.


M6-29

Para añadir 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 botón << para añadirla a la combinación. Añadir una fuente que no está instalada en el sistema resulta útil, por ejemplo, para especificar una fuente sólo para Windows cuando desarrolla páginas con Macintosh.

4. Cuando termine de seleccionar fuentes específicas, seleccione una familia genérica de fuentes en el menú Fuentes disponibles y haga clic en el botón << para pasar la familia genérica de fuentes a la lista Fuentes elegidas.

Las familias genéricas de fuentes son: cursiva, fantasía, 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 genérica de fuentes. Por ejemplo, la fuente monoespacio predeterminada en la mayoría de los sistemas es Courier.

Aplicación de formato a párrafos

Utilice el menú Formato del inspector de propiedades o el submenú Texto > Formato de párrafo para aplicar las etiquetas estándar de párrafo y encabezado.

Cuando aplica una etiqueta de encabezado a un párrafo, Dreamweaver añade automáticamente la siguiente línea de texto como un párrafo sencillo. Para cambiar esta configuración, elija Edición > Preferencias y luego, en la categoría General, en la sección Opciones de edición, compruebe que la casilla Cambiar a párrafo sencillo tras el encabezado no está marcada.

Para aplicar una etiqueta de párrafo o encabezado:

1. Sitúe el punto de inserción en el párrafo o seleccione parte del texto del párrafo.

2. En el submenú Texto > Formato de párrafo o en el menú emergente Formato del inspector de propiedades, elija una opción:

Elija un formato de párrafo (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 párrafo.

Elija Ninguno para quitar un formato de párrafo.

Alineamiento del texto

Puede alinear texto en la página utilizando el inspector de propiedades o el submenú Texto > Alinear. Asimismo, puede centrar cualquier elemento en una página 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 opción de alineación (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 página).

2. Elija Texto > Alinear > Centro.

Nota: Se pueden alinear y centrar bloques completos de texto, pero no partes de un encabezado o de un párrafo.

Sangrar texto

El comando Sangría aplica la etiqueta HTML blockquote al párrafo de texto, y aplica sangría a ambos lados de la página.


M6-30

Para aplicar y quitar sangría al texto:

1. Sitúe el punto de inserción en el párrafo al que desea aplicar sangría.

2. Haga clic en el botón Sangría o Anular sangría del inspector de propiedades, elija Texto > Sangría o Anular sangría, o elija Lista > Sangría o Anular sangría en el menú contextual.

Nota: Puede aplicar varias sangrías a un párrafo. Cada vez que utiliza este comando, la sangría 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 página. Si no se ha establecido ningún color de texto en Propiedades de la página, 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 válidos para los navegadores haciendo clic en el selector de color del inspector de propiedades.

Elija Texto > Color. Aparecerá el cuadro de diálogo del selector de color del sistema. Seleccione un color y haga clic en Aceptar.

Escriba el nombre del color o un número hexadecimal directamente en el campo del inspector de propiedades.

Para definir el color predeterminado del texto, utilice el comando Modificar > Propiedades de la página

Creación de listas ordenadas y sin ordenar

Puede crear listas ordenadas (numeradas), listas sin ordenar (con viñetas) y listas de definición a partir de texto existente o de texto nuevo que escriba en la ventana de documento. Las listas de definición no utilizan caracteres iniciales como puntos de viñeta o números y suelen utilizarse en glosarios o descripciones. Además, las listas se pueden anidar. Una lista anidada es aquélla que contiene otras listas. Por ejemplo, en algunos casos puede resultar conveniente anidar una lista ordenada o con viñetas en otra numerada u ordenada.

Para obtener información sobre un tipo concreto de lista y otras opciones para toda la lista o un elemento específico (por ejemplo, restablecer la numeración, utilizar números romanos en una lista ordenada o establecer viñetas cuadradas), consulte Definición 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 inserción en el lugar en el que desea añadir la lista y lleve a cabo una de estas operaciones:

Haga clic en el botón Lista ordenada o Lista sin ordenar del inspector de propiedades

Elija Texto > Lista y seleccione el tipo de lista deseado: Lista sin ordenar (con viñetas), Lista ordenada (numerada) o Lista de definición.

El carácter 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 párrafos para convertirlos en una lista.


M6-31

2. Haga clic en el botón 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 definición.

Para crear una lista anidada:

1. Seleccione los elementos de lista que desea anidar.

2. Haga clic en el botón Sangría del inspector de propiedades o elija Texto > Sangría. 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 módulo guarde su trabajo y cierre Dreamweaver.

Documents

01-Modulo 6 Dreamweaver