Aprender Dreamweaver CS4 con 100 ejercicios prácticos

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.

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.

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

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.

PARA FACILITAR SU GESTIÓN POSTERIOR, Dreamweaver permite estructurar un sitio antes de empezar a editar sus documentos. El panel Archivos permite visualizar archivos y carpetas, diferenciando los asociados a un determinado sitio. Un sitio puede contener distintos tipos de archivos, de formatos diferenciados. Las páginas web tradicionales, por ejemplo, vienen identificadas por la extensión htm. El panel Archivos permite su generación, así como el del resto de documentos que el programa permite editar. Además, posibilita la creación de subcarpetas dentro de la carpeta raíz del sitio.

IMPORTANTE

Tras la creación de un sitio local, el panel Archivos muestra en su parte central el contenido de la carpeta definida como raíz del sitio.

1 Para empezar, pulse el botón de flecha de la palabra elemental, incluida en el desplegable Mostrar del panel Archivos.

2 El desplegable Mostrar posibilita el acceso a todos los sitios configurados, al Escritorio, y a las unidades de almacenamiento del equipo. Seleccione la opción Escritorio y pulse en el signo + que precede a la carpeta Elementos de escritorio.

3 En el Escritorio colocamos la carpeta raíz, elemental, de nuestro sitio web local. Pulse el vínculo Administrar sitios

4 En el cuadro de diálogo Definición del sitio para elemental active la ficha Avanzadas.

5 Los datos locales configurados en el asistente se muestran completados. Pulse el icono situado a la derecha del campo Carpeta predeterminada de imágenes.

6 Haga clic en el botón Escritorio del panel de accesos directos, abra la carpeta elemental con un doble clic sobre su icono y pulse el botón Nueva carpeta.

7 Escriba la palabra imágenes y pulse dos veces la tecla Retorno.

8 Una vez creada la carpeta que contendrá las imágenes del sitio elemental, pulse el botón Seleccionar. Después, pulse el botón Aceptar y, en el cuadro Administrar sitios, el botón Listo.

9 El panel Archivos se actualiza, pasando a mostrar el contenido del sitio elemental, una vez modificado. Haga clic en el icono de opciones del panel Archivos, abra el submenú Archivo y elija la opción Nuevo archivo.

10 Aparece un nuevo documento que usaremos como página inicial del sitio, la primera que se cargará en el navegador. Escriba la expresión index.htm y pulse Retorno.

11 Pulse con el botón derecho del ratón sobre el icono de la carpeta raíz del sitio elemental y elija la opción Nueva carpeta.

12 Cree una carpeta para los documentos dependientes de la página principal: escriba la palabra documentos y pulse Retorno.

13 De momento, incluiremos una página en blanco en esta nueva carpeta. Haga clic con el botón derecho del ratón en el icono de la carpeta documentos y seleccione la opción Nuevo archivo.

14 Escriba la expresión texto.htm como nombre del nuevo documento y pulse la tecla Retorno.

15 Ábralo con un doble clic y, para finalizar el ejercicio, abra el menú Archivo y seleccione el comando Cerrar todos.

ENTRE LOS ASPECTOS CONFIGURABLES mediante etiquetas se encuentran el color de fondo, el título y la codificación de las páginas. Estas propiedades se incluyen automáticamente en la cabecera de la página durante la generación de los documentos y pueden ser modificadas desde el cuadro Propiedades de la página.

IMPORTANTE

Como novedad en CS4, el panel Propiedades permite crear nuevas reglas CSS obteniendo, como asistencia, sencillas explicaciones acerca del lugar que corresponde a las propiedades en la cascada de estilos y sin necesidad de escribir código.

1 En este ejercicio aprenderemos a definir las propiedades de las páginas web. En el panel Archivos, haga doble clic en el icono de la página index.htm.

2 Haga clic en el botón Propiedades de la página del Inspector de propiedades.

3 Como aún no hemos trabajado con los estilos CSS, modificaremos la apariencia de la página HTML. Haga clic en la opción Apariencia HTML del panel de la izquierda.

4 El color de fondo de la página es una de las propiedades definidas mediante etiquetas HTML. Pulse en la punta de flecha del cuadro de color de la opción Fondo.

5 En Dreamweaver, muchos de los cuadros de diálogo contienen un cuadro que da paso a una paleta emergente. Elija la penúltima muestra de la última columna de la paleta, por ejemplo.

6 Haga clic en la opción Título/Codificación para acceder al contenido de esta categoría.

7 El título de una página queda definido mediante una etiqueta HTML de la cabecera. Pero, como sabe, no es necesario cambiar directamente la etiqueta desde la vista Código para variar el título que el programa preestablece para la página. En el campo Título escriba la palabra principal y pulse Aceptar.

8 En el panel Archivos, haga doble clic sobre el icono de la página texto.htm para abrirla.

9 Para armonizar el fondo con el del documento index.htm, acceda de nuevo al cuadro de diálogo Propiedades de la página pulsando en ese botón del Inspector de propiedades.

10 Seleccione la categoría Apariencia HTML

11 Haga clic en la opción Título/Codificación para acceder al contenido de esta categoría, en el campo Título, escriba la palabra secundaria y pulse el botón Aceptar.

12 El título y el color de fondo se aplican correctamente. En el próximo ejercicio veremos cómo aplicar una imagen como fondo de la página. Para acabar éste, guardaremos simultáneamente los cambios realizados en los documentos index.htm y texto.htm. En la barra de herramientas Estándar, pulse sobre el comando Guardar todo, que muestra la imagen de dos disquetes.

IMPORTANTE

Los estilos CSS permiten definir gran número de aspectos. Así el cuadro de diálogo Propiedades de la página presenta una categoría específica para la definición del aspecto de los enlaces y otra que permite la definición del formato que deben presentar los encabezados de la página.

DREAMWEAVER PERMITE USAR IMÁGENES como fondo de las páginas. Al insertar una imagen en un documento, el programa genera automáticamente una referencia al archivo en el código HTML. Para asegurarse de que esta referencia es correcta, el archivo de imagen deberá estar en el sitio actual. Si ha seleccionado una carpeta como predeterminada del sitio para el almacenado de imágenes, el programa automáticamente añade una copia del documento original en ella.

IMPORTANTE

Deben evitarse los documentos de imagen de gran tamaño, ya que aumentan el tiempo de descarga de la página y es recomendable seleccionar fondos de imagen de tamaño reducido que permitan visualizar correctamente los contenidos de la página.

1 En primer lugar realizaremos una copia de la página texto.htm, ya que nos interesa conservar este documento en su estado actual. Con ese archivo seleccionado en el panel Archivos, abra el menú de opciones del panel, haga clic sobre la opción Edición y seleccione el comando Duplicar.

2 La copia aparece en el mismo directorio que el original con el nombre Copia de texto.htm. Haga clic dos veces sobre el documento Copia de texto.htm, escriba foto.htm

3 Haga clic en el botón Propiedades de la página del Inspector de propiedades y pulse en la categoría Apariencia HTML.

4 Para usar una imagen como fondo es necesario indicar al programa la ubicación del documento en cuestión. Pulse el botón Examinar, situado a la derecha del campo Imagen de fondo.

5 Aparece el cuadro Seleccionar origen de imagen. Mantenga seleccionada la opción Sistema de archivos y pulse el botón Subir un nivel, que muestra una carpeta y una flecha verde.

6 Le recomendamos que cree una carpeta en el Escritorio que contenga todos los documentos e imágenes con los que va a trabajar en estos ejercicios. Puede llamarla Dreamweaver CS4 y almacenar en ella los documentos necesarios que encontrará en nuestra página de descargas. Abra la carpeta en cuestión con un doble clic, seleccione el archivo Roca verde y pulse Aceptar.

7 El campo Imagen de fondo pasa a contener la ruta de la misma. Pulse el botón Aceptar del cuadro Propiedades de la página.

8 El segundo icono del panel Archivos, Actualizar

9 Esta carpeta contiene la imagen aplicada como fondo, Roca verde. jpg. Ésta se presenta en la página en forma de mosaico, repitiéndose las veces necesarias para ocupar todo el fondo. Utilizaremos otro archivo que nos permita diferenciar el efecto de mosaico con más claridad. Pulse el botón Propiedades de la página, active la categoría Apariencia HTML y pulse el botón Examinar.

10 Seleccione esta vez el documento casa.jpg, pulse el botón Aceptar y repita la acción para cambiar la imagen de fondo.

11 Pulse la tecla F5 para actualizar el panel Archivos y compruebe que la nueva imagen se ha guardado correctamente en el sitio.

12 Abra el menú Archivo, seleccione el comando Restituir y, en el cuadro de confirmación que advierte que se perderán los cambios realizados, pulse el botón Sí para recuperar el aspecto inicial del documento.

LA CATEGORÍA IMAGEN DE RASTREO del cuadro Propiedades de la página permite seleccionar el documento de imagen original. Antes de su aplicación como imagen de rastreo el programa permite asignarle un porcentaje de transparencia para que no obstaculice el correcto visionado de los elementos de la página. Las Design notes, por su parte, facilitan la conservación de información adicional asociada a documentos. Son notas que el desarrollador del sitio crea para un archivo, asociándolas a éste pero guardándolas en un documento aparte.