Kitabı oku: «Aprender Dreamweaver CS6 con 100 ejercicios prácticos», sayfa 2

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 Tamaños de ventana 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 Para realizar este ejercicio, descargue desde nuestra web el archivo muestra.htm y ábralo en Dreamweaver mediante el comando Abrir del menú Archivo.

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. Haga clic en el botón Código de la barra de herramientas Documento. Para cambiar de una vista a otra también puede utilizar las opciones disponibles en el 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. Vuelva a la vista Diseño.

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 la imagen de la página y pase a la vista Código.

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.

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.

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.

006	Conocer los elementos de una página web

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.

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.Cuando divida el área de trabajo en las dos vistas, los elementos de head continuarán en la parte superior de la vista Diseño.

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 panel de propiedades. 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. Seleccione el texto del campo Título de la Barra de herramientas Documento, escriba la palabra muestra y pulse la tecla Retorno para confirmar el cambio. También 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 del Inspector de propiedades.

5 La codificación del documento se almacena en una etiqueta meta en el área de encabezado del documento. Para comprobarlo, haga clic en el segundo icono de la sección head. 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.

6 Esta etiqueta 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.

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

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

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

10 El texto definido como enlace aparece en el campo Vínculo. Los enlaces también pueden añadirse a imágenes. 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, videos y diversos tipos de elementos multimedia. Seleccione la imagen para ver sus propiedades y dar por acabado el ejercicio.

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.

007	Guardar y editar básicamente un documento

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 cuadro de diálogo que aparece al ejecutar el comando Pegar permite insertar un texto descriptivo del elemento pegado; dicho texto servirá de ayuda para aquellas personas con problemas visuales.

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. Hágalo.

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 todos los archivos relacionados 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 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.

4 En el cuadro de diálogo que aparece, pulse en Sí para actualizar los vínculos, aunque no hayamos realizado ningún cambio sobre los mismos.

5 Ahora contamos con dos documentos iguales, siendo la copia, muestra2, la que se muestra activada para su edición. En la segunda parte del ejercicio trabajaremos con la barra de herramientas Estándar, la cual proporciona acceso directo a las funciones más utilizadas de los menús Archivo y Edición y que, 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. Como en cualquier otro programa que trabaje en el entorno Windows, el comando Cortar responde a la combinación de teclas Ctrl + X y el comando Pegar, a la combinación Ctrl + V.

6 La barra de herramientas Estándar se sitúa por debajo de la barra Documento. Seleccione la imagen situada en el centro de la página.

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

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

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

IMPORTANTE

El comando Guardar todo ordena el almacenado simultáneo de los documentos en uso. Por su parte, el comando Guardar como plantilla sólo es posible si previamente se ha creado un sitio.

008	Crear sitios locales

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 configuración del sitio para…

1 Para crear un nuevo sitio haga clic en el enlace Administrar sitios del panel Archivos, en la parte inferior derecha del área de trabajo, y, en el cuadro de diálogo del mismo nombre, pulse en el botón Nuevo Sitio.

2 Se abre de este modo el cuadro Configuración del sitio para… En primer lugar es necesario nombrar y ubicar el nuevo sitio. En el campo Nombre del sitio introduzca elemental.

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

4 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 con el nombre elemental.

5 Abra la nueva carpeta y pulse el botón Seleccionar.

6 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 y, en el cuadro de advertencia que aparece, pulse el botón Aceptar.

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

8 El nuevo sitio se ha creado y podemos comprobarlo desde el panel Archivos. Haga doble clic sobre la palabra elemental que se encuentra en el botón desplegable de la parte superior del panel Archivo.

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

009	Administrar sitios locales

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. El panel Archivos permite su generación, así como el del resto de documentos que el programa permite editar.

IMPORTANTE

Además de cambiar su aspecto, el cuadro Administrar sitios presenta como novedad los botones Importar sitio de Business Catalyst y Nuevo sitio de Business Catalyst.

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 y, en el cuadro del mismo nombre, seleccione el sitio elemental y haga clic en el botón Editar el sitio seleccionado actualmente, representado por un lápiz en la parte inferior del cuadro. Los iconos de las carpetas y archivos pertenecientes a un sitio son verdes.El cuadro Administrar sitios dispone de un nuevo aspecto en esta versión del programa, aunque gran parte de su funcionalidad continúa siendo la misma.

4 En el cuadro de diálogo Configuració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.

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.

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 Para finalizar el ejercicio, abra el menú Archivo y seleccione el comando Cerrar todos para cerrar así todos los documentos abiertos.