MEDIAactive Aprender Dreamweaver CS5 con 100 ejercicios prácticos

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,

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.

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.

009Administrar sitios locales

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.

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.

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

El panel Archivos permite organizar y administrar los documentos y carpetas, tanto si forman parte de un sitio de Dreamweaver como si se encuentran en una unidad local.

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

Los iconos de las carpetas y archivos pertenecientes a un sitio son verdes.

En el cuadro Administrar sitios se listan todos los sitios creados hasta el momento.

4.En el cuadro de diálogo Definición del sitio para elemental despliegue el panel configuración avanzada y seleccione Información local.

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.

Es habitual reservar una carpeta del sitio para contener los archivos de imagen utilizados en las páginas y situarla un nivel por debajo de la carpeta raíz.

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 Guardar 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.

Desde el panel Archivos puede crear nuevos archivos y nuevas carpetas.

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.

Generalmente se usa el nombre index para identificar la página inicial del sitio.

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.

010Aplicar un color y una imagen de fondo

IMPORTANTE

En Dreamweaver CS5 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.

ENTRE LOS ASPECTOS CONFIGURABLES mediante etiquetas se encuentran el color de fondo, el título y la codificación de las páginas. También es posible aplicar una imagen de fondo a una página. Al insertar una imagen en un documento, el programa genera automáticamente una referencia al archivo en el código HTML.

1.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.

Recuerde que puede acceder al cuadro Propiedades de la página usando el botón del mismo nombre del Inspector de propiedades, esa opción del menú Modificar o la combinación de teclas Ctrl.+J.

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 y elija la penúltima muestra de la última columna de la paleta, por ejemplo.

Pulse la rueda de color de a paleta para acceder al cuadro Color y poder agregar así muestras a los colores personalizados.

5.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 principal y pulse Aceptar.

6.Repita la misma operación con la página texto, aplíquele el mismo color de fondo y nómbrela secundaria.

7.Ahora aplicaremos una imagen de fondo a la página. En primer lugar haremos una copia de la página texto. En el panel Archivo haga clic con el botón derecho sobre la página texto, seleccione el comando Edición y pulse la opción Duplicar.

8.Renombre la nueva copia con el texto foto.htm y ábrala.

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

10.Pulse el botón Examinar, situado a la derecha del campo Imagen de fondo.

11.En el cuadro Seleccionar origen de imagen pulse el botón Subir un nivel, que muestra una carpeta y una flecha verde y cree una nueva carpeta en el escritorio.

12.Descargue desde nuestra web los archivos necesarios y guárdelos en esta carpeta, que puede denominar Dreamweaver CS5

13.Desde el cuadro Seleccionar origen de imagen abra dicha carpeta, seleccione el archivo casa.jpg y pulse Aceptar.