Kitabı oku: «Aprender Dreamweaver CS5 con 100 ejercicios prácticos», sayfa 2
004Visualizar varios archivos simultáneamente
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.
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.
1.Contamos al inicio de la lección con varios documentos en pantalla creados en las prácticas anteriores. Para realizar este ejercicio, descargue desde nuestra web el archivo muestra. htm. Abra el menú Archivo y pulse en la opción Abrir. 
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. 
Puede acceder al cuadro de diálogo Abrir usando esa opción del menú Archivo o bien la combinación de teclas Ctrl.+O.
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. 
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.
Dreamweaver permite mostrar las ventanas de los diferentes documentos abiertos en forma de cascada, de mosaico horizontal o de mosaico vertical.
7.El documento queda 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, pulse 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.
Utilice los botones Restaurar, Maximizar y r 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.
005Diseño y código de páginas web
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.
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.
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 está basado en 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 izquierda se muestra el código y en la derecha 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 a 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.
006Conocer los elementos de una página web
IMPORTANTE
Los enlaces permiten la navegación, conectan las páginas con otras, y suelen presentarse con aspecto de texto subrayado.
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.
1.Con el documento muestra.html abierto en Dreamweaver, despliegue el menú Ver y seleccione la opción Contenido de Head.
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.
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.
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.
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.
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.
En este caso, el texto seleccionado enlaza con la página principal del sitio de la empresa desarrolladora de este manual, MEDIAactive.
10.El panel Propiedades presenta los atributos del texto actual-mente 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.
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.
007Trabajar con los comandos básicos
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.
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.
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 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.
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 y haga clic en el botón Guardar para almacenar el archivo con el nuevo nombre.
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.
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.
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.
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.
008Crear sitios locales
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 configuración del sitio para.
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.
1.La creación de sitios locales en la versión CS5 de Dreamweaver es más sencilla que en versiones anteriores del programa. Para crear un nuevo sitio haga clic en el enlace Administrar sitios del panel Archivos, en inferior de los paneles situados en la derecha.
2.Haga clic en el botón Nuevo.
3.Se abre de este modo el cuadro Configuración de sitio. En primer lugar es necesario nombrar y ubicar el nuevo sitio. En el campo Nombre del sitio introduzca elemental.
4.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. Haga clic sobre el icono examinar del campo carpeta de sitio local.
5.Se abre la ventana Elegir la carpeta raíz en la que debe seleccionar la ubicación del nuevo sitio. Seleccione el escritorio y cree una carpeta usando el botón crear nueva carpeta y nómbrela elemental.
6.Abra la nueva carpeta y pulse el botón Seleccionar.
7.La carpeta raíz, en la que se almacenarán todos los archivos necesarios para la creación de nuestra web está seleccionada. De momento dejaremos todas las opciones de la configuración avanzada tal y como están y procederemos a la creación definitiva del nuevo sitio. Para ello, pulse el botón Guardar.
8.El nuevo sitio se encuentra ahora en la ventana Administrar sitio. Desde esta ventana es posible editar, modificar y eliminar los sitios creados. Ahora pulse el botón Listo para acabar con el proceso de creación de un nuevo sitio.
9.El nuevo sitio se ha creado y podemos comprobarlo desde el panel Archivo, el mismo desde el que accedíamos al administrador de sitios al principio del ejercicio. Haga doble clic sobre la palabra elemental que se encuentra en el botón desplegable de la parte superior del panel Archivo.
10.Verá que de este modo se abre de nuevo el cuadro Configuración del sitio para elemental. Puesto que en este momento no realizaremos ninguna modificación en el sitio elemental pulse el botón Cancelar.
Por último sepa que es posible crear más sitios nuevos o eliminar los creados desde el cuadro Administrar de sitios, al cual ahora accederemos desplegando el panel de carpetas en el que ahora vemos la carpeta elemental.
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 más (+) dentro de la categoría Servidores 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.
