Las barras de herramientas son cuatro:

• Barra de herramientas Documento
• Barra de herramientas Estándar
• Barra de herramientas Codificación
• Barra de herramientas Representación de Estilos

Si se desea, a los efectos de aumentar el espacio visible en el área de trabajo, pueden cerrarse temporalmente las barras de herramientas, o abrirse en caso de necesitarlas. Para realizar estas acciones, hay dos métodos: el primero es hacer click con el botón derecho del ratón sobre alguna de las barras, apareciendo un menú que contiene los nombres de las barras de herramientas y una casilla de activación, o se puede hacer la misma acción a través del menú “Ver / Barras de herramientas”.

A continuación, mostraremos una breve descripción de las diferentes barras de herramientas y su utilidad, que podrá servir como introducción para la posterior descripción detallada de cada una de las funciones de este excelente programa de creación de páginas web.

Descripción de las barras de herramientas

Barra de herramientas Documento

La barra de herramientas Documento es la que contiene los botones que permiten alternar entre los distintos modos de visualización que Dreamweaver ofrece, además de opciones de transferencia entre el modo local y modo remoto. A continuación mostramos una imagen de la barra de herramientas, que mostramos dividida en dos.

El primer botón que aparece en la barra es la de Vista de Código, que hace que en la ventana del documento solo se visualice el código.

A continuación se encuentra el botón “Dividir”, que divide la ventana y muestra el código y la vista de diseño.

Luego se encuentra el botón “Diseño” que abre la vista de diseño en la ventana del documento.

El siguiente botón, es el “Vista en Vivo”, que tiene una vista de navegador, que a diferencia de la vista de diseño, no es editable, aún cuando es posible que, cuando la vista está dividida, ver que parte del código se está visualizando, además de poder editar en la vista de código y ver los cambios “en vivo” en esta vista.

El botón de “Código en Vivo”, muestra el código tal como puede visualizarse un código cuando se accede al código desde un navegador, es decir, el código “visible”. En los documentos HTML y XHTML, el código mostrado en esta vista y en la Vista de Código es la misma. Es muy útil en casos de diseños en PHP o ASP, en los cuales aparece el código tal como es subido al servidor en la vista de código, mientras que en la de código en vivo aparece el código que el servidor envía al navegador. Para la visualización de estos documentos, es necesario tener un servidor de pruebas, instalado u online.

Título del documento, es un campo que aparece en la barra de herramientas, que permite poner el título o modificarlo en caso de que ya lo tenga. Este título será insertado entre las etiquetas <title> y </title> y se muestra en la etiqueta del documento.

El botón Administración de Archivos, muestra un menú emergente con las opciones de dicho menú. El botón que aparece a continuación es el de Vista Previa, que abre un menú emergente que contiene una lista editable de navegadores (los cuales deben estar instalados en el ordenador), incluyendo la opción de visualizar la página en un simulador de móvil con varios formatos y resoluciones.

De inmediato aparece un botón de actualización de la vista, seguido de un botón de opciones, que permite modificar la forma en que se muestran los documentos. Luego, el botón de Ayudas Visuales muestra las distintas ayudas visuales para el diseño de las páginas. En seguida, el botón Validar Formato, permite la validación del código completo de una página o una sección del mismo. Por último, veremos un botón de Comprobar Página, que permite comprobar la compatibilidad con navegadores, dando los problemas de compatibilidad del código en una ventana.

Barra de herramientas estándar

La barra de herramientas estándar es similar a las barras de herramientas estándar de casi todos los programas. En esta barra se puede abrir documentos, crear nuevos, guardar, imprimir, cortar, copiar, pegar, etc. Su utilización es similar a los de cualquier otro software.

Barra de estado

Esta barra se encuentra ubicada al pie, y contiene la información adicional del documento, entre las que se encuentran algunas ayudas, como el selector de etiquetas, que muestra las etiquetas seleccionadas en cualquiera de las vistas, precedidas de las etiquetas de superior jerarquía.

En esta barra también pueden seleccionarse y deseleccionarse las herramientas de mano, se puede seleccionar el zoom empleado y el tamaño de la ventana, que permite optar por tamaños estándar o personalizados. A continuación aparece un campo en el que se muestra el tamaño de la página y el tiempo de descarga, información que incluye los archivos dependientes (CSS, JS, etc.), imágenes y videos. Por último, la barra muestra la codificación del documento.

Barra de codificación (o de programación)

Esta barra de herramientas se encuentra dispuesta en forma vertical, y solo es visible cuando se encuentra la vista de código (su uso es exclusivo en el código). Esta barra de herramientas puede ocultarse o personalizarse, mostrando los botones que son útiles y cancelando la visualización de aquellos que no presentan utilidad.

Barra de Representación de Estilos

Esta barra, que aparece oculta por defecto, contiene los comandos que permiten la visualización de documentos de acuerdo al medio para el cual ha sido programado (si se han hecho vistas para diferentes medios) y alternar entre distintas hojas de estilo. Puede verse la página en modo “Screen” (pantalla, muestra el documento como aparecerá en un ordenador), en modo de impresión, móvil y proyección.

Este tan popular editor no ha sido descubierto del todo, a continuación estudiaremos una aplicación del potente editor mencionado, una aplicación que si es bien usada podría mejorar nuestras maneras de trabajar en un sitio web y cambiar la dinamicidad de la misma.

Concibamos las facilidades que Dreamweaver nos ofrece como es administrar nuestros archivos desde el FTP y hagamos a un lado nuestros gestores de FTP convencionales.

Para empezar tengamos en cuenta nuestra dirección FTP de nuestro sitio web y las opciones para accesar a el que son un usuario y una contraseña.

Las siguientes observaciones del programa nos asesorará para abrir las opciones y poder agregar un nuevo sitio administrable a Dreamweaver: Click en la ficha Site (Sitio), y hacer click posteriormente en la opción de New Site (Nuevo sitio).

Enseguida se muestra el procedimiento visual principal de la configuración de nuestras propiedades:

Podemos observar que hemos elegido la carpeta donde esta nuestro sitio web, el nombre de nuestro sitio (Este nombre se grabará solo en Dreamweaver), nuestra dirección URL (opcional) y nuestra carpeta predefinida de las imagenes (opcional). Esta configuración solo aplica a la “Información Local”, ahora pasaremos a ver nuestro ejemplo visual sobre la configuración de “Información Remota”, es decir, nuestra configuración de FTP.

Hemos elegido y agregado las opciones principales para la conexión al FTP, dirección FTP, carpeta donde se almacenarán los archivos (En ocasiones es httpdocs/ y htdocs/, para usuarios de hosting gratuito sería una simple /, httdocs/usuario/ ó bien htdocs/usuario/), también hemos agregado nuestra información primordial como es el usuario y clave de acceso.

Después de haber cumplido los pasos anteriores, tendremos que darle aceptar u OK a la ventana, al finalizar la configuración deberemos apretar la tecla F8 o seguir la siguiente secuencia: Site/Site Files (Sitio/Archivos de sitio).

Podremos ver enseguida nuestros archivos de nuestra configuración local (Nuestra computadora), existen en la ventana opciones como: “Conectar al servidor remoto”, “Actualizar”, “Descargar archivos”, “Subir archivos”, entre otras opciones.

En esa misma ventana podremos administrar nuestros otros sitios configurados y cambiar de la Vista Local (PC) a la Vista Remota (Sitio web), es asi como podremos sencillamente administrar nuestros archivos de manera rápida y eficiente. Esta es una de las capacidades de Dreamweaver que lo hacen distinguirse entre los mejores.

El trabajo de desarrollo de una página web comienza con el proceso de definición de una estrategia y unos objetivos del sitio web, continúa con el diseño (en el que se define el aspecto y el funcionamiento de la web) y avanza hasta la fase de producción y desarrollo (durante la cual se crea la web); la funcionalidad se comprueba para ver si se cumplen los objetivos establecidos y, al final, se publica el sitio.

Planificar sitios Web

Es un tópico pero no deja de ser verdad: planificar y organizar bien desde el primer momento ayuda a ahorrar tiempo más adelante. La organización del sitio implica mucho más que determinar el lugar en el que irá cada archivo: la planificación del sitio implica también investigar los requisitos que debe cumplir el sitio, el perfil de la audiencia y los objetivos de la web. Además, debe tener en cuenta requisitos técnicos tales como el acceso de los usuarios, los navegadores, …

Una vez que haya organizado la información y que haya determinado una estructura operativa, podrá comenzar a crear el sitio. Determine qué estrategia va a emplear y cuáles son los aspectos relativos a los usuarios que debe tener en cuenta durante la planificación del sitio.

• Utilice el “mapa del sitio” de Dreamweaver para establecer la estructura organizativa del sitio. En la ventana Sitio de Dreamweaver puede añadir, borrar y renombrar los archivos y carpetas fácilmente para cambiar la organización de la estructura. Consulte Introducción a la administración del sitio y la colaboración.

Cuando la creación y el desarrollo de la página web se haga entre varias personas:

• Establezca sistemas que impidan que personas que puedan acceder a la página que Vd. Está desarrollando sobrescriban archivos; consulte Configurar el sistema de desprotección/protección.
• Utilice Design Notes para comunicarse con otros miembros del equipo de desarrollo Web.

Organizar la estructura del sitio web

Organizar la página web cuidadosamente desde el primer momento puede ahorrarle frustración y tiempo más adelante. Si comienza a crear documentos sin pensar en la jerarquía a la que corresponden, puede terminar con una enorme carpeta llena de archivos y difícil de administrar, o con archivos relacionados repartidos por media docena de carpetas con nombres similares.

La forma habitual de crear un sitio consiste en crear una carpeta en el disco local con todos los archivos del sitio (lo que se conoce como sitio local) y crear y editar los documentos dentro de dicha carpeta. Después podrá copiar dichos archivos en un servidor web cuando esté preparado para publicar el sitio y permitir al público que lo vea. Este enfoque es mejor que crear y editar archivos en la propia página web en vivo, ya que le permite comprobar cambios en el sitio local antes de hacerlos públicos y, cuando haya terminado, cargar los archivos del sitio local y actualizar todo el sitio público de una vez.

Divida la página web en categorías. Coloque las páginas relacionadas en una misma carpeta. Utilice subcarpetas cuando sea necesario. Este tipo de organización facilitará el mantenimiento y la navegación por el sitio.

Decida dónde desea colocar elementos como imágenes y archivos de sonido. Los diseñadores sitúan a veces todos los elementos que desean utilizar en un sitio y que son ajenos a HTML en una carpeta llamada Activos.

Diseñar el esquema de navegación

Otra área en la que merece la pena planificar es la navegación. Cuando diseñe su página web, piense en la experiencia que le gustaría que tuvieran sus visitantes. Las búsquedas y los índices facilitan a los visitantes la localización de la información que están buscando.

Diseñe la apariencia que tendrá la navegación. La navegación debe ser homogénea en todo la web. Si sitúa una barra de navegación a lo largo de la parte superior de la página principal, intente mantenerla en ese lugar en todas las páginas vinculadas.

Además, puede trabajar con la vista de Diseño de Dreamweaver de dos formas distintas: en la vista de Disposición y en la vista Estándar. (Puede seleccionar estas vistas en la categoría de vistas del panel Objetos.) En la vista de Disposición, puede diseñar el formato de una página, insertar gráficos, texto y elementos multimedia; en la vista Estándar, además de insertar gráficos, texto y elementos multimedia, también puede insertar capas, crear documentos con marcos, crear tablas y aplicar otros cambios a la página (opciones que no se encuentran disponibles en la vista de Disposición).

• La ventana de documento muestra el documento actual mientras lo está creando y editando.
• El panel Objetos contiene iconos en los que puede hacer clic para insertar objetos en el documento y para cambiar su forma de trabajar en el documento.
• Dreamweaver proporciona numerosos paneles flotantes, como el panel Estilos HTML y el inspector de código, que le permiten trabajar con otros elementos de Dreamweaver.
• La barra del lanzador contiene botones para abrir y cerrar los inspectores y los paneles utilizados con mayor frecuencia.
• El inspector de propiedades muestra propiedades del objeto o texto seleccionado y permite modificar dichas propiedades.(Las propiedades que aparecen en el inspector dependen del objeto o texto seleccionado activamente en el documento.)

Para abrir ventanas, inspectores y paneles 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ú o utilice su método abreviado de teclado.

La ventana de documento

En la vista de Diseño, la ventana de documento muestra el documento actual aproximadamente igual a como aparecerá en un navegador Web. La barra de título de la ventana de documento muestra el título de la página y, entre paréntesis, el nombre de la carpeta raíz, el nombre del archivo y un asterisco si el archivo contiene cambios no guardados.

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 las etiquetas HTML padre que controlan el texto o los objetos seleccionados. Haga clic en una de estas etiquetas para resaltar su contenido en la ventana de documento. Haga clic en <body>  para seleccionar todo el cuerpo del documento.

La ventana emergente, Tamaño de ventana, permite cambiar el tamaño de la ventana de documento para que adopte dimensiones predeterminadas o personalizadas. Consulte Cambiar el tamaño de la ventana de documento.

A la derecha del menú emergente Tamaño de ventana, observará 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. Consulte Comprobar el tiempo de descarga y el tamaño.

La barra del lanzador aparece a lo largo de la parte inferior de la ventana de documento. De forma predeterminada, los botones de la barra del lanzador abren la ventana Sitio, el panel Activos, el panel Estilos HTML, el panel Estilos CSS, el panel Comportamientos, el panel Historial y el inspector de código. Para especificar qué botones deben aparecer en la barra del lanzador (y en el lanzador flotante), consulte Personalizar la barra del lanzador.

La barra de herramientas de Dreamweaver contiene botones que permiten alternar entre diferentes vistas del documento rápidamente: Código, Diseño y una tercera vista que combina las vistas de Código y de Diseño. La barra de herramientas contiene algunos comandos comunes relacionados con la selección de vistas y el estado del documento. Los elementos del menú Opciones (botón situado a la derecha) cambia en función de la vista que seleccione.

• Para ver u ocultar la barra de herramientas, elija Ver > Barra de herramientas.
• Para ver código sólo en la ventana de documento, haga clic en el botón Mostrar vista de código.
• Para ver una vista que contenga las vistas de Código y de Diseño, haga clic en el botón Mostrar vistas de código y diseño. Cuando seleccione esta vista, se encontrará disponible la opción Vista de diseño arriba del menú Ver. Utilice esta opción para especificar qué vista debe aparecer en la parte superior de la ventana de documento.
• Para ver sólo la vista de Diseño, haga clic en el botón Mostrar vista de diseño.
• También puede obtener acceso a estas vistas a través del menú Ver.
• Para introducir un título para el documento, utilice el campo Título. Si el documento ya tiene título, éste aparecerá en dicho campo.
• Para ver el menú emergente Estado de archivo, haga clic en el botón de menú de estado de archivo.
• Para previsualizar o depurar un documento en un navegador, haga clic en Vista previa/depurar en navegador y elija uno de los navegadores enumerados en el menú emergente.
• Para agregar o cambiar los navegadores enumerados en el menú, elija Editar lista de navegadores.
• Para actualizar la vista de Diseño, haga clic en el botón Actualizar vista de diseño.
• Para obtener acceso al panel Referencia, haga clic en el botón Referencia.

El panel Referencia contiene información de referencia sobre código HTML, CSS y JavaScript.

• Para desplazarse por el código, haga clic en el botón Navegación por el código.
• Para obtener acceso al menú Opciones, haga clic en el botón de menú Opciones.

En el menú Opciones se enumeran distintas opciones para cada vista. Para obtener más información sobre las opciones de vista de Diseño, consulte Introducción a la disposición.

Nota: Cuando la ventana de documento muestre ambas vistas, dispondrá de acceso al menú Opciones de cada una de las vistas haciendo clic en la vista deseada y luego en el menú Opciones.

Utilizar menús contextuales

Dreamweaver emplea de forma extensiva los menús contextuales, que proporcionan un método para acceder rápidamente a los comandos y las propiedades más útiles relacionados con la ventana o el objeto con el que esé 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 (Windows) o haga clic mientras presiona la tecla Control (Macintosh) en el objeto o ventana. Aparecerá el menú contextual para el objeto o la ventana seleccionados.
2. Seleccione el comando del menú contextual y libere el botón del ratón.

Para insertar un objeto

Haga clic en el correspondiente botón del panel Objetos o arrastre el icono del botón hasta la ventana de documento. Dependiendo del objeto, aparecerá el correspondiente cuadro de diálogo de inserción de objeto en el que se le pedirá que seleccione o inserte el archivo u objeto deseado.

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

Mantenga presionada la tecla Control (Windows) u Opción (Macintosh) mientras inserta el objeto. (Por ejemplo, para insertar un marcador de posición para una imagen sin especificar un archivo de imagen, mantenga presionada la tecla Control u Opción y haga clic en el botón Imagen.)

Nota: Esto no permite omitir todos los cuadros de diálogo. Algunos objetos, como las barras de navegación, las capas, los botones Flash, los marcos, etc., no insertan marcadores de espacio.

El panel Objetos contiene siete categorías de forma predeterminada: Caracteres, Común, Formularios, Marcos, Head, Invisibles y Especial. También contiene botones que cambian de vista: Estándar y Disposición.

• El panel Caracteres contiene caracteres especiales, como los símbolos de copyright, de comillas curvas y de marca registrada.
• Tenga en cuenta que estos símbolos no se muestran correctamente en las versiones anteriores a la 3.0 de los navegadores (Netscape e IE).
• La categoría Común contiene botones para la creación e inserción de los objetos más utilizados, como imágenes, tablas y capas.
• La categoría Formularios contiene botones que permiten crear formularios e insertar elementos de formulario.
• La categoría Marcos contiene estructuras comunes de conjuntos de marcos.
• La categoría Head contiene botones que permiten añadir diversos elementos de la sección head, como etiquetas meta, keywords y base.
• La categoría Invisibles contiene botones que permiten crear objetos no visibles en la ventana del navegador, como los puntos de fijación con nombre. Elija Ver > Ayudas visuales > Elementos invisibles para ver los iconos que marcan la posición de estos objetos. Haga clic en los iconos de elementos invisibles de la ventana de documento para seleccionar los objetos y cambiar sus propiedades. Consulte Elementos invisibles.
• La categoría Especial contiene botones que permiten insertar elementos especiales, como applets Java, plug-ins y objetos ActiveX. (inserción de elementos multimedia).
• La sección Ver del panel Objetos permite elegir entre vista Estándar (predeterminada) o de Disposición. Si está seleccionada la vista de Disposición, también podrá seleccionar las herramientas de Disposición: Dibujar celda de disposición y Dibujar tabla de disposición. Para obtener más información, consulte Introducción a la disposición.

Para cambiar de categoría, utilice el menú emergente situado en la parte superior del panel de Dreamweaver. Puede modificar cualquier objeto del panel o crear sus propios objetos; consulte Modificar el panel Objetos y Crear un objeto simple.

Algunas de las preferencias generales afectan al panel Objetos. Para cambiar estas preferencias, elija Edición > Preferencias y seleccione General.

• Cuando inserte objetos tales como imágenes, tablas, secuencias de comandos 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.
• Las preferencias del panel Objetos permiten visualizar el contenido del panel Objetos como texto solamente, iconos solamente texto e iconos.

Común

La categoría Común del panel Objetos contiene los objetos más utilizados:

Imagen: inserta una imagen en la posición de inserción del cursor. Aparecerá un cuadro de diálogo en el que podrá especificar un archivo de imagen. Consulte Insertar una imagen.

Imagen de sustitución: le solicita que especifique dos archivos de imagen para definir una imagen de sustitución. Una imagen de sustitución es una imagen que cambia cuando el puntero pasa sobre ella.

Tabla: coloca una tabla en el punto de inserción.

Datos tabulares: coloca en el punto de inserción una tabla con los datos de otro archivo (como un archivo exportado de Microsoft Excel o de una base de datos como archivo de texto delimitado).

Barra de navegación: inserta una serie de imágenes para emplearlas en la navegación de un sitio.

Regla horizontal: coloca una regla horizontal en el punto de inserción.

Capa: crea una capa. Haga clic en el botón Capa y, a continuación, mueva el puntero hasta la ventana de documento y arrástrelo para definir el tamaño y la ubicación de una capa. Dreamweaver crea de forma predeterminada una capa definida por la etiqueta div. Utilice el inspector de propiedades para seleccionar otra etiqueta o cambie la configuración predeterminada en Preferencias de capa.

Vínculo de correo electrónico: coloca un vínculo de correo electrónico en el punto de inserción.

Fecha: coloca la fecha actual en el punto de inserción. Aparecerá un cuadro de diálogo en el que podrá especificar un formato para la fecha e indicar si Dreamweaver debe actualizar la fecha automáticamente cada vez que guarde el archivo.

Server-Side Include: coloca un server-side include (SSI) en el punto de inserción. Aparecerá un cuadro de diálogo en el que podrá elegir un archivo de origen para el SSI.

HTML de Fireworks: coloca un archivo HTML producido por Fireworks en el punto de inserción.

Flash: coloca una película Flash en el punto de inserción utilizando las etiquetas object y embed. Aparecerá un cuadro de diálogo que le permitirá localizar un archivo SWF. Los atributos codebase, class id y pluginspage están predefinidos con los valores adecuados para Macromedia Flash Player. Utilice el inspector de propiedades para especificar otros atributos para la película.

Botón Flash: coloca un objeto de botón Flash en el punto de inserción.

Texto Flash: coloca un objeto de texto Flash en el punto de inserción. Consulte

Shockwave: coloca una película Macromedia Shockwave en el punto de inserción utilizando las etiquetas object y embed. Los atributos codebase, class id y pluginspage están predefinidos con los valores adecuados para Shockwave. Aparecerá un cuadro de diálogo en el que podrá especificar un archivo de origen DCR para la película, o bien puede utilizar el inspector de propiedades para especificar un archivo de origen.

Generator: Coloca un objeto de Macromedia Generator en el punto de inserción.

Caracteres

La categoría Caracteres del panel Objetos contiene algunos caracteres especiales:

Salto de línea: Coloca un salto de línea (br) en el punto de inserción. También puede presionar Mayús+Entrar (Windows) o Mayús+Retorno (Macintosh) para insertar un salto de línea.

Espacio indivisible: Coloca un espacio indivisible (&nbsp;) en el punto de inserción.

Copyright: coloca un símbolo de copyright en el punto de inserción.

Marca Registrada: coloca un símbolo de marca comercial registrada en el punto de inserción.

Libra: coloca un símbolo de libra (moneda) en el punto de inserción.

Yen: coloca un símbolo de yen (moneda) en el punto de inserción.

Euro: coloca un símbolo de euro (moneda) en el punto de inserción.

Abrir comillas: coloca comillas angulares de apertura en el punto de inserción.

Cerrar comillas coloca comillas angulares de cierre en el punto de inserción.

Guión coloca un guión en el punto de inserción.

Otro proporciona una serie de caracteres especiales, como é y ç, disponibles para que los seleccione. Al seleccionar uno de ellos y hacer clic en Aceptar, se colocará en el punto de inserción.

Formularios

La categoría Formularios del panel Objetos contiene botones que permiten crear formularios e insertar elementos de formulario.

Los formularios son simplemente contenedores de elementos de formulario; los límites del formulario no son visibles en la ventana de documento a menos que se seleccione Ver > Ayudas visuales > Elementos invisibles.

Coloque el punto de inserción dentro de los límites del formulario antes de insertar el elemento de formulario; los elementos de formulario situados fuera de las etiquetas form no aparecen en todos los navegadores. Si intenta insertar un elemento fuera del formulario, un cuadro de diálogo le preguntará si desea añadir una etiqueta de formulario alrededor de dicho elemento. Haga clic en Sí para crear un formulario que contenga el elemento o en No para insertar el elemento sin formulario.

Formulario coloca un formulario en el punto de inserción.

Campo de texto coloca un campo de texto en el punto de inserción. Establezca el nombre, el tamaño y el valor inicial en el inspector de propiedades.

Botón coloca en el punto de inserción un botón con Submit como valor predeterminado de las etiquetas name y vaule. Coloque el punto de inserción dentro de los límites del formulario antes de insertar el botón; los botones situados fuera del formulario no aparecen en todos los navegadores. Utilice el inspector de propiedades para establecer el nombre, la etiqueta y la acción.

Casilla de verificación coloca una casilla de verificación en el punto de inserción. Establezca el nombre, el valor de activación y el estado inicial en el inspector de propiedades.

Botón de opción coloca un botón de opción en el punto de inserción. Establezca el nombre, el valor de activación y el estado inicial en el inspector de propiedades.

Lista/menú: coloca una lista o menú emergente en el punto de inserción. Establezca el nombre, el tipo y los valores iniciales en el inspector de propiedades.

Campo de archivo: coloca un campo de archivo en el punto de inserción. Establezca el nombre, el tamaño y el valor inicial en el inspector de propiedades.

Campo de imagen: coloca un campo de imagen en el punto de inserción. Establezca el nombre, el tamaño, el texto alternativo y el archivo de origen en el inspector de propiedades.

Campo oculto: coloca un campo oculto en el punto de inserción. Establezca el nombre y el valor en el inspector de propiedades.

Menú de salto: coloca un menú emergente de URL en el punto de inserción. Al elegir un valor de este menú, el usuario se traslada al URL. Establezca los valores de la lista en el cuadro de diálogo que aparece.

Marcos

La categoría Marcos del panel Objetos contiene botones que permiten crear disposiciones comunes de conjuntos de marcos.

Izquierda: crea un conjunto de marcos y añade un marco estrecho vacío a la izquierda del actual.

Derecha: crea un conjunto de marcos y añade un marco estrecho y vacío a la derecha del actual.

Arriba: crea un conjunto de marcos y añade un marco estrecho vacío sobre el actual.

Abajo: crea un conjunto de marcos y añade un marco estrecho vacío bajo el actual.

Izquierda, esquina superior izquierda y arriba: Crea un conjunto de marcos y añade un marco estrecho vacío a la izquierda del actual, un marco estrecho vacío sobre el actual y un marco pequeño vacío en la esquina superior izquierda del conjunto de marcos.

Izquierda y anidado superior: crea un conjunto de marcos y añade un marco estrecho vacío sobre el actual y otro a la izquierda de ambos marcos.

Superior y anidado izquierda: crea un conjunto de marcos y añade un marco estrecho vacío a la izquierda del marco actual y otro sobre ambos marcos.

Dividir: Crea un conjunto de marcos y lo divide en cuatro partes, creando tres nuevos marcos vacíos y situando el marco actual en el cuadrante inferior derecho.

Head

La categoría Head del panel Objetos contiene objetos que permiten añadir elementos a la sección head de los documentos.

Meta: inserta una etiqueta meta en la sección head del documento. Aparecerá un cuadro de diálogo en el que podrá introducir información para atributos meta.

Palabras clave: inserta una etiqueta meta de palabras clave en la sección head del documento. Aparecerá un cuadro de diálogo en el que podrá introducir palabras clave para el documento.

Descripción: inserta una etiqueta meta de descripción en la sección head del documento. Aparecerá un cuadro de diálogo en el que podrá introducir texto que describa el documento.

Actualizar: inserta una etiqueta meta de actualización en la sección head del documento. Aparecerá un cuadro de diálogo en el que podrá introducir el tiempo de espera (en segundos) para la actualización y si se volverá a cargar la página actual o pasar a una nueva.

Base: inserta una etiqueta base en la sección head del documento. Aparecerá un cuadro de diálogo en el que podrá introducir un URL base para los vínculos del documento.

Link: inserta una etiqueta link (vínculo) en la sección head del documento. Aparecerá un cuadro de diálogo en el que podrá introducir información sobre vínculos. No se trata de un hipervínculo, sino de un vínculo empleado para especificar una hoja de estilos externa.

Invisibles

La categoría Invisibles del panel Objetos contiene botones que permiten crear objetos no visibles en la ventana del navegador.

Elija Ver > Ayudas visuales > Elementos invisibles para ver los iconos que marcan la posición de estos objetos. Haga clic en los iconos para seleccionar los objetos y cambiar sus propiedades. Consulte Elementos invisibles. Las preferencias de elementos invisibles permiten seleccionar qué elementos específicos son visibles en la ventana de documento cuando se activa Ver > Ayudas visuales > Elementos invisibles.

Punto de fijación con nombre: coloca un punto de fijación con nombre (un nombre=” “) en el punto de inserción. Aparecerá un cuadro de diálogo donde podrá introducir el nombre del punto de fijación.

Secuencia: coloca una secuencia de comandos en el punto de inserción. Aparecerá un cuadro de diálogo. Elija el idioma e introduzca texto para la secuencia de comandos.

Comentario: coloca un comentario en el punto de inserción dentro del código HTML. Aparecerá un cuadro de diálogo donde podrá introducir texto para el comentario. Consulte Insertar comentarios.

Especial

La categoría Especial del panel Objetos contiene botones que permiten insertar objetos configurables especiales, como plug-ins y applets.

Applet: coloca un applet Java en el punto de inserción. (El applet Java sólo aparecerá cuando vea el documento en un navegador.) Aparecerá un cuadro de diálogo en el que podrá especificar el archivo que contiene el código del applet o hacer clic en Cancelar para dejar el origen sin especificar. Utilice el inspector de propiedades para especificar otras propiedades para el applet Java.

ActiveX: coloca un control ActiveX en el punto de inserción. Utilice el inspector de propiedades para especificar un archivo de origen y otras propiedades para el control ActiveX..

Plug-in: utiliza la etiqueta embed para insertar un archivo (en el punto de inserción) que requiere un plug-in de Netscape para su reproducción. Aparecerá un cuadro de diálogo en el que podrá especificar el archivo de origen

Disposición y Ver

La sección Ver del panel Objetos permite seleccionar un modo de visualización entre dos posibles: Estándar o Disposición. Si selecciona la vista de Disposición, podrá seleccionar las herramientas en la sección Disposición.

Dibujar celda de disposición: permite dibujar celdas de tabla individuales en la vista de Diseño de la ventana de documento.

Dibujar tabla de disposición: permite dibujar tablas completas en la vista de Diseño de la ventana de documento.

1. Elija Sitio > Definir sitios y haga clic en Nuevo, o bien elija Sitio > Abrir sitio > Definir sitios. En el cuadro de diálogo Definición de sitio que aparece estará seleccionada la categoría Datos locales.

2. Introduzca las opciones siguientes:

• En el campo Nombre del sitio, introduzca un nombre para el sitio. El nombre del sitio aparece en la ventana Sitio y en el submenú Sitio > Abrir sitio. Utilice el nombre que desee, ya que no aparecerá en el navegador y sólo le servirá de referencia.
• En el campo Carpeta raíz local, especifique la carpeta del disco duro en la que se desea almacenar los archivos, las plantillas y los elementos de biblioteca existentes del sitio. Haga clic en el icono de carpeta para examinar y seleccionar la carpeta o introduzca una ruta y un nombre de carpeta en el campo de texto.
• En la opción Actualizar lista archivos locales autom., indique si desea actualizar automáticamente la lista de archivos locales cada vez que copie archivos en el sitio local. Si desactiva esta opción, mejorará la velocidad de Dreamweaver a la hora de copiar esos archivos, pero el panel Local de la ventana Sitio no se actualizará automáticamente. Para actualizar manualmente la ventana Sitio, haga clic en el botón Actualizar de dicha ventana. Para actualizar manualmente sólo el panel Local, elija Ver >Actualizar local en la ventana Sitio (Windows) o Sitio > Ver archivos del sitio > Actualizar local (Macintosh).
• En el campo Dirección HTTP, introduce el URL de la página definitiva, para que Dreamweaver pueda verificar los vínculos del sitio que utilicen URL absolutos. Por ejemplo, la dirección HTTP absoluta del sitio Web de la Universidad de Navarra es http://www.unav.es
• En la opción Caché, indique si desea crear un caché local para mejorar la velocidad de las tareas de administración de vínculos y sitios. Si no selecciona esta opción, Dreamweaver volverá a preguntarle si desea utilizar un caché antes de crear el sitio. Es recomendable seleccionar esta opción porque el panel Activos sólo funciona cuando se ha creado un caché.

3. Haga clic en Aceptar.

Se abrirá la ventana Archivos del sitio.

También puede abrir archivos de texto no HTML, como archivos JavaScript, archivos de correo electrónico de texto normal o archivos de texto guardados con procesadores de texto o editores de texto. No podrá utilizar todas las herramientas de edición de documentos de Dreamweaver en un documento de texto normal, pero sí podrá utilizar funciones básicas de edición de texto. Entre las posibles razones para abrir un documento de texto figuran editar y depurar código JavaScript, consultar el contenido del archivo de configuración de Dreamweaver o abrir un correo electrónico que contiene un fragmento de código HTML para copiar el código y pegarlo en otro documento.

Para crear un documento HTML vacío en una nueva ventana de documento, realice una de estas operaciones:

• En Windows, elija Archivo > Nuevo desde una ventana de documento existente o elija Archivo > Nueva ventana desde la ventana Sitio.

Si abre la vista de Código (en la ventana de documento) o el inspector de código, podrá ver que el nuevo documento no está totalmente vacío, pues contiene etiquetas html, head y body para que pueda comenzar a trabajar. Mientras escriba en la vista de Diseño de la ventana de documento o inserte objetos tales como tablas e imágenes, podrá dejar abierto un editor de código y observar cómo se crea el código HTML.

Para abrir un archivo HTML existente, lleve a cabo una de estas operaciones:

• Seleccione Archivo > Abrir.
• Si el archivo se ha creado con Microsoft Word, elija Archivo > Importar > Importar HTML de Word.

Si elige Importar HTML de Word, Dreamweaver abre el archivo y le permite especificar opciones para eliminar código ajeno a HTML generado por Word. (Microsoft Word 97 y las versiones posteriores cuentan con el comando Guardar como HTML, que añade código HTML innecesario al convertir un documento a este formato.)

Nota: No se puede importar directamente un archivo de Microsoft Word (.doc) a Dreamweaver. Si desea importar el contenido de un archivo de Word, inicie Word y guarde el archivo como HTML antes de importar el archivo HTML resultante a Dreamweaver.

2. Seleccione una plantilla y haga clic en Seleccionar. Se creará un nuevo documento basado en la plantilla. De forma predeterminada, las partes editables del nuevo documento quedan rodeadas por un borde azul. Todo el documento queda rodeado por un borde amarillo (de forma predeterminada) para recordarle que está basado en una plantilla y que, por tanto, algunas de sus partes están bloqueadas. (Para personalizar los colores de los bordes, consulte Definir preferencias de la plantilla.) Para modificar una parte editable de la plantilla, seleccione el contenido del marcador de posición en la región editable y sobrescríbalo. En algunos casos, no hay ningún contenido de marcador de posición en la región editable; en este caso, haga clic dentro de la región editable.

Para guardar un documento en Dreamweaver :

1. Seleccione Archivo > Guardar.
2. Proporcione un nombre para el archivo y vaya hasta el lugar en el que desea guardar el archivo.

Nota: Dreamweaver añade automáticamente .htm (Windows) o .html (Macintosh) al nombre del archivo cuando aparece el cuadro de diálogo. (Puede controlar la extensión de archivo que debe añadirse utilizando una opción de las preferencias generales.) Para guardar un archivo como texto normal en Windows, asígnele la extensión de nombre de archivo .txt. Para guardar un archivo como texto normal en Macintosh, sencillamente borre .html del nombre del archivo Macintosh. (Para que Dreamweaver vea el archivo como HTML de nuevo, guárdelo otra vez con la extensión .html o .htm.) Después de guardar un archivo como texto, Dreamweaver no interpreta ningún código HTML del archivo. Cuando guarde los documentos, evite utilizar espacios y caracteres especiales en los nombres de archivos y carpetas siempre que sea posible. 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.

3. Haga clic en el botón Guardar para guardar el archivo.

El título de una página HTML ayuda a los visitantes de la web 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; consulte Crear informes.

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

1. Lleve a cabo una de estas operaciones:

• Elija Modificar > Propiedades de la página. Haga clic en un espacio vacío de la página para asegurarse de que no hay nada seleccionado. Luego elija Propiedades de la página en el menú contextual haciendo clic con el botón izquierdo del ratón (Windows) o presionando Control mientras hace clic (Macintosh) en la ventana de documento.
• Elija Ver > Contenido de Head y haga clic en el botón Título cuando aparezca éste; luego abra el inspector de propiedades.
• Elija Ver > Barra de herramientas.

2. Introduzca el título de la página en el cuadro de texto Título.

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.

Definir una imagen de fondo o un color de página en Dreamweaver

Para definir una imagen o un color para el fondo de la página web en Dreamweaver, 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 definir 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. Consulte Utilizar hojas de estilos CSS.)

3. Para definir un color de fondo, haga clic en el cuadro Color de fondo y seleccione un color del selector de color. (Consulte Trabajar con colores.)