Aprender Dreamweaver CS4 con 100 ejercicios prácticos

DREAMWEAVER MUESTRA LOS DIFERENTES documentos abiertos distribuidos en fichas. Sus pestañas los identifican y permiten activarlos fácilmente. De forma predeterminada, las fichas se muestran en el orden de creación o apertura de los archivos pero se pueden arrastrar para cambiarlas de posición. Las fichas sólo se muestran cuando la ventana del archivo se encuentra maximizada; en caso contrario, las ventanas funcionan como las tradicionales de Windows. Dreamweaver también permite disponer los archivos en forma de Cascada y Mosaico, opciones clásicas de distribución de ventanas del sistema operativo de Microsoft.

IMPORTANTE

Dreamweaver ofrece una posibilidad de recuperación directa de los archivos de uso reciente. Se trata de la opción Abrir reciente del menú Archivo, que contiene un submenú con el listado de los documentos que han sido editados y almacenados con anterioridad.

1 Contamos al inicio de la lección con varios documentos en pantalla creados en las prácticas anteriores. Para realizar este ejercicio, debe disponer de una página HTML de ejemplo almacenada en su equipo. Abra el menú Archivo y pulse en la opción Abrir. Puede acceder al cuadro de diálogo Abrir usando esa opción del menú Archivo o bien la combinación de teclas Ctrl.+O.

2 La acción nos conduce al cuadro de diálogo Abrir. Localice y seleccione su archivo de ejemplo y pulse el botón Abrir.

3 Abra el menú Ventana y pulse sobre uno de los documentos sin título para mostrarlo en primer plano. En la parte final del menú Ventana puede ver la lista de todos los documentos abiertos en estos momentos. Puede activarlos pulsando sobre ellos.

4 El archivo de ejemplo sigue abierto, pero permanece inactivo. Haga clic en la pestaña de ese archivo para activarlo.

5 Esta disposición en forma de fichas facilita la selección de los archivos para su edición. Pero el programa permite distribuirlos de otras maneras. Dreamweaver conserva las disposiciones de ventana clásicas de Windows, accesibles desde el menú Ventana. Ábralo y seleccione la opción Cascada. Dreamweaver permite mostrar las ventanas de los diferentes documentos abiertos en forma de cascada, de mosaico horizontal o de mosaico vertical.

6 Cada uno de los archivos se muestra en una ventana independiente, al estilo clásico de Windows . Para activar un documento, basta con hacer clic sobre su ventana. Los botones de control de la ventana, en el extremo derecho de su Barra de título, permiten controlar su estado de modo directo. Pulse el botón Minimizar de la ventana del documento de ejemplo.

7 El documento queda ubicado en la esquina inferior izquierda del área de trabajo. Pulse el botón Maximizar del siguiente archivo.

8 El área de trabajo recupera su distribución inicial, distribuyendo los diferentes documentos en fichas. Abra el menú Ventana y seleccione la opción Mosaico horizontal.

9 El documento de ejemplo sigue minimizado. En su Barra de título, el primero de los botones de control muestra el icono identificativo del comando Restaurar , que devolverá a la ventana el aspecto que presentaba antes de ser minimizada. Púlselo.Utilice los botones Restaurar, Maximizar y Minimizar de las Barras de título de las ventanas de los documentos para cambiar el tamaño de las mismas.

10 Además el programa permite aplicar ciertas acciones a la totalidad de documentos en uso. Abra el menú Archivo y pulse en la opción Cerrar todos.

11 Aparece un cuadro de advertencia que propone almacenar los cambios en los documentos que han sido modificados. Si los documentos no se guardan será imposible recuperarlos. Pulse el botón No para dar por acabado el ejercicio. Si va a cerrar un documento que ha sido modificado, el programa le pregunta antes si desea almacenar esas modificaciones.

DREAMWEAVER ES UN EDITOR VISUAL de páginas web, por lo que no es necesario conocer el lenguaje de programación para editarlas. Pero el programa también permite la edición directa del código, de modo que los programadores experimentados pueden introducir directamente las instrucciones. La codificación de los documentos HTML se basa en una estructura de etiquetas. Las páginas cuentan con dos secciones de código: head (cabecera) y body (cuerpo). La primera contiene las etiquetas necesarias para que la página se vea correctamente en Internet, y la segunda, los elementos que conforman la página.

IMPORTANTE

En la categoría Barra de estado del cuadro de diálogo Preferencias se pueden determinar tamaños preestablecidos de ventana y ajustar la velocidad de conexión para facilitar la valoración de la relación calidad/tamaño de las páginas durante su edición.

1 Toda acción realizada de modo visual tiene su reflejo en la programación de la aplicación. Con su documento de ejemplo abierto en Dreamweaver, despliegue el menú Ver.

2 La configuración del espacio de trabajo determina la vista en la que se muestran los archivos de forma predeterminada. En el espacio de trabajo Diseñador, Dreamweaver presenta en la vista Diseño todos los documentos que permiten este modo de visualización. Seleccione la opción Código. Para cambiar de una vista a otra utilice las opciones disponibles en el menú Ver o bien los botones de la Barra de herramientas Documentos. Recuerde que puede mostrar esta barra seleccionándola en la opción Barras de herramientas del menú Ver.

3 El documento pasa a mostrarse en forma de código. De este modo, los desarrolladores experimentados pueden modificarlo directamente. Algunos tipos de archivos, como los estilos CSS, no pueden ser editados de forma visual y sólo es posible editarlos tecleando el código. Pero los documentos HTML pueden ser editados de forma visual. Haga clic en el botón Diseño de la barra de herramientas Documento. En la vista Diseño podemos seleccionar los elementos que conforman la página y trabajar con las herramientas del programa para modificar su aspecto.

4 En la vista Diseño podemos seleccionar los elementos que conforman la página y trabajar con las herramientas del programa, definiendo su aspecto. Pulse sobre una imagen de su página y haga clic en el botón Código de la barra Documento.

5 El lenguaje HTML se basa en la introducción de etiquetas. Si seleccionamos un elemento de la página en la vista Diseño, su etiqueta quedará seleccionada en la vista Código. Compruébelo pulsando el botón Dividir de la barra de herramientas Documento.

6 Este modo de visualización divide la ventana del documento en dos partes . En la superior se muestra el código y en la inferior se ve la representación visual del archivo. Haga doble clic sobre una de las palabras de la página en la ventana de diseño.Para trabajar conjuntamente con el código y con el diseño de una página, active la vista Dividir, que divide en dos partes el área de trabajo.

7 En la parte inferior de la ventana del documento se sitúa la Barra de estado, donde se encuentra el Selector de etiquetas, que muestra la jerarquía de etiquetas que rodea a la selección actual. Haga clic en una de las etiquetas y compruebe que se selecciona el elemento definido por ésta en la vista Diseño y el correspondiente fragmento de programación en la vista Código.En la Barra de estado se encuentra el Selector de etiquetas, que permite seleccionarlas para modificarlas.

 

8 Pulse el botón Código de la barra de herramientas Documento y haga clic en la etiqueta body de la Barra de estado.

9 La selección de esta etiqueta comporta la de todos los elementos contenidos en la página. Cambie a la vista Diseño pulsando este botón de la barra Documento para dar por acabado el ejercicio.

IMPORTANTE

Los tamaños de ventana predefinidos, establecidos en píxeles, tienen en cuenta la visualización final del documento. Las páginas web una vez publicadas son reproducidas mediante un navegador de Internet. La ventana del navegador presenta un determinado tamaño en función de la resolución de pantalla (píxeles por pulgada) seleccionada. Dreamweaver propone tamaños de ventana indicando las dimensiones internas de la ventana del navegador, sin bordes. El tamaño del monitor figura entre paréntesis. Los tamaños preestablecidos sólo podrán ser aplicados si trabajamos con la disposición de ventanas clásica, siendo imposible aplicarlos si los documentos quedan dispuestos en forma de fichas.

LA VISTA DISEÑO SÓLO MUESTRA por defecto el contenido del cuerpo de la página, pero Dreamweaver permite editar su cabecera también de forma visual. Para ello, debe mostrarse el Contenido de head. Cada una de las etiquetas de esta sección puede ser modificada a través del Inspector de propiedades. El usuario puede definir fácilmente propiedades como el título, las etiquetas meta o los estilos de color empleados. El panel de propiedades también se usa para modificar los elementos contenidos en el cuerpo de la página.

IMPORTANTE

Los enlaces permiten la navegación, conectan las páginas con otras, y suelen presentarse con aspecto de texto subrayado.

1 Con el documento muestra.html abierto en Dreamweaver, despliegue el menú Ver y seleccione la opción Contenido de Head. (Puede encontrar este archivo en nuestra página de descargas).

2 Aparece la representación visual de la sección head bajo la barra de herramientas Documento . Para mostrar el código correspondiente, haga clic en el botón Dividir de esa barra.Los iconos para acceder al contenido de Head aparecen bajo la Barra de herramientas Documento.

3 Dreamweaver muestra un icono por cada uno de los elementos de la sección head. Seleccione el primero.

4 La etiqueta correspondiente, title, se selecciona . El primer elemento de la cabecera es, por tanto, el título del documento y consta de una sola propiedad, Título, que se muestra ya en el Inspector de propiedades. Seleccione mediante el arrastre la expresión Documento sin título, que aparece en el cuadro Título de la barra de herramientas Documento. Puede cambiar el título de su página escribiéndolo directamente en la etiqueta del código o bien en el campo Título de la Barra de herramientas Documento o del Inspector de propiedades.

5 No debe confundirse el título de la página con el nombre del archivo. El título se muestra en la Barra de título del navegador cuando se visualiza la página publicada. Escriba la palabra prueba y pulse la tecla Retorno para confirmar el cambio.

6 Haga clic en el segundo icono de la sección head. La codificación del documento se almacena en una etiqueta meta en el área de encabezado del documento. Esta información, que consta de tres propiedades, queda establecida automáticamente durante la generación del documento, en función del formato que éste presente.

7 La codificación del documento se almacena en una etiqueta meta en el área de encabezado del documento . Indica al navegador cómo se debe descodificar el documento y qué fuentes se deben utilizar para mostrar el texto descodificado. Seleccione el tercer elemento de la sección head.

8 Esta sección se completa con un estilo CSS que define atributos de formato de los elementos contenidos en el cuerpo de la página. Haga clic en el botón Diseño de la barra de herramientas Documento, pulse el icono Ver opciones, el cuarto empezando por la derecha, y haga clic en la opción Contenido de Head. Para ocultar el Contenido de Head, desactive esa opción en el menú de opciones de la Barra de herramientas Documento.

9 Nuestra página de ejemplo cuenta con algunos de los elementos clásicos que conforman una página web. Haga doble clic, en la ventana del documento, sobre la palabra Página.

10 El panel Propiedades presenta los atributos del texto actualmente seleccionado. Los enlaces son otro de los elementos principales de las páginas. Seleccione con un doble clic la palabra Pulse.

11 El texto definido como enlace aparece en el campo Vínculo. Los enlaces también pueden añadirse a imágenes. Seleccione la imagen para ver sus propiedades y dar por acabado el ejercicio.En este caso, el texto seleccionado enlaza con la página principal del sitio de la empresa desarrolladora de este manual, MEDIAactive.

Las imágenes también son un componente fundamental de las páginas, ya que las dotan de un mayor atractivo. Otros componentes pueden ser tablas, sonidos, vídeos y diversos tipos de elementos multimedia.

IMPORTANTE

Las ayudas visuales, activas por defecto, facilitan la realización de algunas acciones. Para desactivarlas puede optar por utilizar el comando Ocultar todo del submenú Ayudas visuales del menú Ver o acudir al menú emergente del botón Ayudas visuales y activar la opción Ocultar todas las ayudas visuales.

PUEDE GUARDAR LOS DOCUMENTOS de Dreamweaver con el nombre y ubicación predefinidos por el programa o modificarlos desde el cuadro de diálogo Guardar como. Los comandos relativos al almacenado de documentos son accesibles desde el menú Archivo y las funciones habituales de copia, pegado, etc., se encuentran en el menú Edición.

IMPORTANTE

El comando Deshacer anula la última acción realizada y el comando Rehacer la recupera. Ambos se encuentran en el menú Edición y en la Barra de herramientas Estándar de Dreamweaver.

1 En el ejercicio anterior hemos utilizado el documento HTML muestra, que ha sido modificado. Por eso aparece un asterisco en su pestaña. El método más sencillo para almacenar los cambios efectuados en un documento consiste en la ejecución del comando Guardar desde el menú Archivo. Este comando puede ser ejecutado directamente mediante la combinación de teclas Ctrl.+S. Abra el menú Archivo y pulse en el comando Guardar.

2 El programa guarda los cambios efectuados, conservando la ubicación original y el nombre del documento. La opción Guardar se ve complementada por los comandos Guardar como, Guardar todo, Guardar en servidor remoto y Guardar como plantilla. Abra el menú Archivo y elija la opción Guardar como. El cuadro Guardar como, al que se accede usando esa opción del menú Archivo, es similar al cuadro Abrir y permite seleccionar el directorio en el que se almacenará el archivo. Para ello presenta el cuadro desplegable Guardar en y el panel de accesos directos. Además permite el cambio del nombre del documento.

3 La utilización de este comando está indicada para almacenar los documentos editados como copia de los originales. Su ejecución conduce al cuadro de diálogo Guardar como , que también se muestra al almacenar un documento por primera vez. Este cuadro, similar al cuadro Abrir, permite seleccionar el directorio en el que se almacenará el archivo y cambiar su nombre. En el campo Nombre, pulse tras la última letra de la palabra muestra, inserte un número 2 y haga clic en el botón Guardar para almacenar el archivo con el nuevo nombre. Al guardar una copia de un documento a través del cuadro Guardar como, tanto ésta como el original continúan abiertas en el programa.

4 Ahora contamos con dos documentos iguales, siendo la copia, muestra2, la que se muestra activada para su edición . El comando Guardar todo ordena el almacenado simultáneo de los documentos en uso. La selección del comando Guardar en servidor remoto, por su parte, conduce al cuadro de diálogo Guardar archivo que permite almacenar los documentos en los equipos remotos utilizados para publicar los sitios. Abra el menú Archivo y seleccione el comando Guardar como plantilla.

5 El uso de plantillas sólo es posible si previamente se ha creado un sitio. Pulse el botón Cancelar del cuadro informativo. Para poder guardar plantillas, debe existir un sitio.

6 La barra de herramientas Estándar proporciona acceso directo a las funciones más utilizadas de los menús Archivo y Edición. Por defecto se encuentra oculta. Para mostrarla, abra el menú Ver, pulse sobre la opción Barras de herramientas y haga clic en Estándar. La Barra de herramientas Estándar puede visualizarse desde el comando Barras de herramientas del menú Ver.

7 Seleccione la imagen situada en el centro de la página.

8 Los seis primeros botones de la barra Estándar dan acceso a las funciones Nuevo, Abrir, Examinar en Bridge, Guardar, Guardar todo e Imprimir código, todas ellas incluidas en el menú Archivo. El siguiente grupo de botones se corresponde con comandos del menú Edición. Haga clic en el botón Cortar, cuyo icono muestra unas tijeras.

9 Abra el menú Edición y seleccione el comando Pegar.

10 En el cuadro de diálogo que aparece puede añadir si lo desea una descripción de la imagen. Pulse Aceptar.

IMPORTANTE

La principal diferencia entre los comandos Cortar y Copiar reside en que mientras el primero elimina el elemento seleccionado del documento, el segundo lo mantiene. Ambos envían el elemento al Portapapeles de Windows, una memoria temporal del sistema que guarda la información necesaria para utilizarla con posterioridad.

UN SITIO WEB ES UN CONJUNTO DE ARCHIVOS enlazados con atributos compartidos: temas relacionados, diseño similar u objetivo común. Dreamweaver es una herramienta de creación y gestión de sitios Web completos, además de un editor visual de páginas. Para crear un sitio Web local tan sólo es necesario determinar el directorio del equipo que se convertirá en la carpeta raíz del sitio. En la carpeta local se almacenan los archivos con los que está trabajando en un sitio de Dreamweaver.

IMPORTANTE

Para desarrolladores experimentados, el programa posibilita la introducción directa de los datos de configuración del sitio en la ficha Avanzadas del cuadro de diálogo Definición del sitio para.

1 La aplicación cuenta con un menú que contiene los comandos relacionados con la creación y gestión de sitios. También puede acceder a algunos de esos comandos utilizando el botón Sitio de la nueva Barra de la aplicación. Pulse ese botón, el tercero de dicha barra, y seleccione la opción Administrar sitios. El icono Sitio de la nueva Barra de la aplicación contiene dos opciones que permiten acceder directamente al asistente para la creación de un nuevo sitio y al administrador de sitios.Configurar un sitio de Dreamweaver permite organizar los documentos asociados. Los sitios se pueden gestionar y crear desde el cuadro Administrar sitios. Al seleccionar la opción Nuevo sitio de este cuadro se accede al asistente para la creación de sitios.

2 Haga clic en el botón Nuevo y seleccione la opción Sitio.

3 El asistente para la definición del sitio presenta tres secciones: Editando archivos, Comprobando archivos y Compartiendo archivos. El primer paso consiste en asignar un nombre al sitio. Pulse la tecla Suprimir para eliminar el nombre propuesto por el programa, escriba la palabra elemental y pulse el botón Siguiente.

4 El segundo paso permite indicar si está creando una aplicación Web. Mantenga seleccionada la opción No, no deseo utilizar una tecnología de servidor y pulse en Siguiente.

5 Un sitio consta de un máximo de tres partes o carpetas, según el entorno de desarrollo y el tipo de sitio Web seleccionado. La carpeta local es el directorio de trabajo. En Dreamweaver esta carpeta se conoce como sitio local y puede estar tanto en el equipo local como en un servidor de red. El campo ¿En qué lugar desea almacenar los archivos? presenta como ubicación provisional la carpeta elemental contenida en el directorio Documentos. Para cambiarla, pulse en el icono de la carpeta. Utilice el icono de carpeta del campo ¿En qué lugar del equipo desea almacenar los archivos? para localizar su carpeta raíz.

6 En el cuadro Elegir carpeta raíz local para el sitio elemental. pulse el botón Escritorio del panel de accesos directos y haga clic en el botón Nueva carpeta, el tercero del grupo de botones de la parte superior.

7 Esta carpeta será la raíz de nuestro sitio local. Escriba la palabra elemental y pulse dos veces la tecla Retorno.

8 Pulse el botón Seleccionar para marcar la nueva carpeta como carpeta local raíz de nuestro sitio y haga clic en Siguiente.

9 Para transferir archivos a un servidor o desarrollar aplicaciones Web se deben añadir los datos de configuración de un sitio remoto y de un servidor de prueba. Pulse el botón de flecha del cuadro ¿Cómo conecta con su servidor remoto?

10 En la carpeta remota se almacenan los archivos, según el entorno de desarrollo, para fines de prueba, producción y colaboración. Seleccione la opción Ninguno y pulse el botón Siguiente.La carpeta remota suele colocarse en el equipo donde se ejecuta el servidor Web y en ella se guardan los archivos para fines de colaboración.

11 La pantalla final, llamada Resumen, muestra la configuración seleccionada para el sitio elemental. Pulse el botón Completado y, para crear definitivamente el sitio local, haga clic en el botón Listo del cuadro de diálogo Administrar sitios.

IMPORTANTE

Una aplicación Web es un conjunto de páginas que interactúan entre sí, con el usuario y con diversos recursos en un servidor Web, incluidas bases de datos. Haga clic en el botón de opción Sí, deseo utilizar una tecnología de servidor para activar el cuadro con las distintas tecnologías de servidor. Dreamweaver posibilita la creación de aplicaciones Web mediante las tecnologías de servidor ColdFusion, ASP.NET, ASP, JSP y PHP. Cada una corresponde a un tipo de documento en Dreamweaver. La elección de una tecnología de servidor para la aplicación Web depende de diversos factores, incluidos su grado de conocimiento de los lenguajes de programación y la configuración del servidor de aplicaciones que vaya a utilizar.