Kitabı oku: «Manual de Dreamweaver CS5», sayfa 4
Lección 7. Elementos básicos 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 la cabecera de la página también de forma visual. Para ello, debe mostrarse el denominado contenido head. Cada una de las etiquetas de esta sección puede ser modificada mediante el Inspector de propiedades, el panel de Dreamweaver sensible al contexto. Este panel de la aplicación muestra las propiedades del elemento seleccionado y permite modificarlas. De este modo, el usuario puede definir fácilmente las propiedades del documento, como el título, las etiquetas meta o los estilos de color empleados en el mismo. El panel de propiedades también se emplea para modificar los elementos contenidos en el cuerpo de la página. El texto, los vínculos y las imágenes son elementos fundamentales en la composición de una página Web. Dreamweaver permite insertar y editar este tipo de objetos, entre otros (archivos multimedia, tablas, formularios), en los documentos y facilita su edición visual.
RECUERDE
No debe confundirse el título de la página con el nombre del archivo. El título, que también aparece en la Barra de título de la ventana del documento de Dreamweaver, se muestra en la Barra de título del navegador cuando se visualiza la página publicada, a diferencia del nombre del documento.
1 Las páginas web contienen elementos que describen la información de la página y que son utilizados por los navegadores de búsqueda. Ya en la lección anterior comentamos que una página HTML se divide principalmente en dos secciones: head y body. La primera de ellas por defecto no tiene representación visual en la vista Diseño; sin embargo, Dreamweaver permite definir las propiedades de elementos head para controlar cómo se identifican las páginas. Para consultar este contenido despliegue el menú Ver y seleccione la opción Contenido de Head. (1)
El comando Contenido de Head también puede ejecutarse mediante la combinación de teclas Ctrl + Mayús + H.
Debe saber que si la ventana de documento está configurada para mostrarse sólo en la vista Código, el comando Contenido de Head del menú Ver no se encontrará activo.
2 Aparece la representación visual de la sección head bajo la barra de herramientas Estándar. (2) Para mostrar el código correspondiente, haga clic en el botón Dividir de esta barra. (3)
3 Dreamweaver muestra un icono por cada uno de los elementos de la sección head, permitiendo de este modo su selección directa. Seleccione, con un clic de ratón sobre su icono, el primer elemento de dicha sección.
4 Compruebe el cambio tanto en la ventana de código como en el panel de propiedades y en el Selector de etiquetes. La etiqueta correspondiente, title, queda seleccionada. El primer elemento de la cabecera es, por tanto, el título del documento y consta de una sola propiedad, la que se refleja en el campo Título. Desde el panel de propiedades podemos modificar el texto del título. Seleccione el contenido del campo Título, escriba la palabra muestra y pulse la tecla retorno para confirmar el cambio.
5 El título también puede ser modificado en el campo Título de la barra de herramientas Documento, así como en la correspondiente línea de código. Compruebe como el nuevo título se refleja tanto en el inspector de propiedades como en el mencionado campo, así como en la línea de código correspondiente. (3) Haga clic en el segundo icono de la sección head. (4)
Al mostrar el código y el diseño de la página, el contenido de head se sitúa siempre en la parte superior de la ventana del diseño.
El Inspector de propiedades presenta como principal característica su sensibilidad al contexto, cambia su contenido adaptándose a la herramienta o el elemento seleccionado.
6 La codificación del documento se almacena en una etiqueta meta en el área de encabezado del documento. Una etiqueta meta es un elemento de head que contiene información sobre la página actual, como la codificación de caracteres, el autor, el copyright o las palabras clave; también pueden facilitar información al servidor, como la fecha de caducidad o el intervalo de actualización de la página. Toda esta información consta de tres propiedades y queda establecida automáticamente durante la generación del documento, en función del formato que éste presente. Seleccione el tercer y último elemento de la sección head. (5)
7 La sección head del documento se completa con un estilo CSS que define atributos de formato de los elementos contenidos en el cuerpo de la página. Puede consultar estos atributos en las líneas de código seleccionadas en este momento. Haga clic en el botón Diseño de la barra de herramientas Documento.
8 En la segunda parte de esta lección realizaremos un acercamiento a los contenidos más usuales de las páginas Web. Ocultaremos por tanto el contenido de la cabecera en la vista Diseño. Para ello, despliegue el menú Ver y pulse sobre el comando Contenido de Head. (6)
Es posible insertar y editar cualquiera nuevos componentes de head. Para agregar un componente de head, es preciso dirigirse al menú Insertar, desplegar el comando HTML y seleccionar la opción Etiquetas head.
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 texto es un componente básico de las páginas Web, ya que resulta fundamental para transmitir la información. Dreamweaver permite introducir y editar el texto de las páginas, así como configurar su aspecto. El panel Propiedades, sensible al contexto, presenta los atributos del texto que encabeza la página, actualmente seleccionado. Haga doble clic sobre la palabra Texto, en la primera celda de la tabla.
11 La información contenida en el Inspector de propiedades se actualiza automáticamente, mostrando los atributos de la selección. De este modo, por ejemplo, el panel muestra activo el botón B, indicativo de la aplicación del atributo negrita al texto seleccionado. Haga doble clic en la palabra Bienvenido, en la primera celda de la segunda columna de la tabla.
12 En cambio, este texto no presenta el atributo negrita y, por tanto, el botón B del Inspector de propiedades se muestra desactivado. Los enlaces son otros elementos importantes de las páginas web. Seleccione con un doble clic la palabra Pulse.
13 Los enlaces permiten la navegación, conectan las páginas con otras y suelen presentarse con aspecto de texto subrayado. Pero la única propiedad fundamental que diferencia un enlace de un texto normal puede apreciarse en el Inspector de propiedades. El texto definido como enlace se muestra en el cuadro Vínculo de este panel. En este caso, el texto seleccionado enlaza con la página principal del sitio de la empresa desarrolladora de este curso, MEDIAactive. Seleccione la imagen con un clic de ratón. (7)
14 Las imágenes también son un componente fundamental de las páginas, ya que las dotan de un mayor atractivo visual. Para distribuir los diferentes elementos de forma ordenada suelen utilizarse tablas. Nuestra página de ejemplo cuenta con una. Tras la selección de los elementos contenidos en ella han aparecido en su parte superior unas ayudas visuales, de color verde. Haga clic en la punta de flecha que aparece a la derecha de la cifra 175 de la ayuda visual.
Los enlaces también pueden ser incluidos en imágenes.
15 Las ayudas visuales, activas por defecto, facilitan la realización de algunas acciones. Haga clic en el comando Seleccionar tabla. (8)
16 Para desactivar las ayudas visuales puede optarse por utilizar el comando Ocultar todo del submenú Ayudas visuales del menú Ver o acudir al menú emergente del botón Ayudas visuales. Pulse dicho botón de la barra Documento, que muestra la imagen de un ojo, y haga clic en el comando Ocultar todas las ayudas visuales.
17 Evidentemente las páginas Web pueden contar con más elementos. Pueden ser insertados sonidos, vídeos y diversos tipos de elementos multimedia. También se puede dotar de interactividad a las páginas. Iremos conociendo todas las posibilidades de edición con Dreamweaver así como el funcionamiento del Inspector de propiedades durante este curso. De momento, para finalizar este ejercicio, volveremos a mostrar las ayudas visuales, en este caso de un modo distinto. Despliegue el menú Ver, haga clic sobre el comando Ayudas visuales y, en el submenú que se despliega, pulse sobre la opción Ocultar todo para activarla de nuevo. (9)
18 Por último, pulse en una zona libre de la ventana del documento para eliminar la selección actual. (10)
El comando Ocultar todas las ayudas visuales puede ejecutarse mediante la combinación de teclas Ctrl + Mayús + I.
RECUERDE
Al seleccionar un elemento en la ventana del documento, aparece un icono; se trata de un indicador que permite abrir el navegador de código. El navegador de código muestra una lista de fuentes de código relacionadas con la selección actual de la página, como reglas CSS internas y externas, server-side includes, archivos JavaS-cript externos, archivos de plantilla padre, archivos de biblioteca y archivos de origen de iframe. Conoceremos todos los detalles del nuevo Navegador de código en una lección posterior de este curso.
Lección 8. Uso de comandos básicos en Dreamweaver
Entendemos por comandos básicos aquellas funciones que, por su aplicación, suelen utilizarse y ejecutarse con cierta frecuencia durante el trabajo con Dreamweaver. Se trata de comandos comunes a prácticamente todas las aplicaciones informáticas: copia y pegado de contenido, almacenamiento de archivos, anulación de acciones, etc. Todas estas funciones básicas se encuentran repartidas entre el menú Archivo y el menú Edición, aunque también son accesibles desde la barra de herramientas Estándar. Los comandos relativos al almacenado de documentos son accesibles desde el menú Archivo. 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, habitual en todas las aplicaciones que trabajan bajo el entorno de Windows. En esta lección realizaremos un acercamiento a estas funciones y conoceremos el modo de ejecutarlas.
1 En la práctica anterior hemos modificado el documento muestra.htm, cambiando su título. Es por este motivo que aparece un asterisco en la pestaña del documento. (1) El método más sencillo para almacenar los cambios efectuados en un documento consiste en la ejecución del comando Guardar. Accesible desde el menú Archivo, este comando puede ser ejecutado directamente pulsando el botón del mismo nombre de la barra de herramientas Estándar, identificado por el dibujo de un disquete acompañado de una flecha. Para empezar, pulse dicho botón. (2)
Si en la pestaña del documento no aparece ningún asterisco significa que no está pendiente de almacenar cambio alguno.
La combinación de teclas que ejecuta el comando Guardar es Ctrl + S.
2 El programa almacena los cambios efectuados, conservando la ubicación original y el nombre del documento. Observe que el asterisco situado en la pestaña del documento ha desaparecido. (3) Seguidamente, vamos a guardar una copia del documento actual. Para ello, debemos utilizar el comando Guardar como. Despliegue el menú Archivo.
3 El menú Archivo da acceso a todos los comandos relacionados con el almacenamiento de documentos. Así, la opción Guardar, utilizada anteriormente, se ve complementada por los comandos Guardar como, Guardar todo, Guardar todos los archivos relacionados y Guardar como plantilla. Seleccione el comando Guardar como. (4)
La combinación de teclas Ctrl + Mayús + S también ejecuta el comando Guardar como.
4 La utilización del comando Guardar como está indicada para almacenar los documentos editados como copia de los originales. La selección de este comando 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. Para ello presenta el cuadro desplegable Guardar en y el panel de accesos directos. Además permite el cambio del nombre del documento. 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. (5)
El comando Guardar todo, también disponible en la barra de herramientas Estándar, ejecuta el almacenado simultáneo de los documentos en uso.
5 Ahora contamos con dos documentos iguales, siendo la copia, muestra2, la que se encuentra en primer plano en Dreamweaver para su edición. (6) Despliegue nuevamente el menú Archivo y seleccione el comando Guardar como plantilla.
6 El uso de plantillas sólo es posible si previamente se ha creado un sitio. Como trataremos la creación de sitios locales a partir de la lección siguiente, cancelaremos este proceso. De momento, pulse el botón Cancelar.
7 La barra de herramientas Estándar proporciona acceso directo a las funciones más utilizadas de los menús Archivo y Edición. Seleccione, con un clic de ratón, 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 accesibles desde el menú Edición. De ese modo, el primero de ellos, que presenta el dibujo de unas tijeras, ejecuta el comando Cortar y el siguiente, representado por dos hojas, el comando Copiar. Haga clic en el botón Cortar de esta barra. (7)
La combinación de teclas que ejecuta la función Cortar es Ctrl + X, y la que ejecuta el comando Copiar es Ctrl + C. Estos atajos de teclado coinciden con los de cualquier otra aplicación que se ejecute en el entorno Windows.
9 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. (8) Ambos envían el elemento al Portapapeles de Windows, una memoria temporal del sistema que guarda la información necesaria para utilizarla con posterioridad. Despliegue el menú Edición.
10 El elemento cortado o copiado puede ser pegado en el documento actual o en otro. Seleccione el comando Pegar. (9)
La combinación de teclas que ejecuta el comando Pegar es Ctrl + V.
11 El comando Pegar también puede ejecutarse pulsando el antepenúltimo botón de la barra de herramientas Estándar o mediante la típica combinación de teclas Ctrl + V. Al pegar el elemento copiado, en este caso concreto una imagen, el programa lanza el cuadro de diálogo Descripción de la imagen (texto alt), relacionado directamente con la accesibilidad en Dreamweaver. Gracias a esta descripción, personas con problemas visuales que utilizan herramientas de lectura para páginas web podrán tener acceso a un texto descriptivo de la imagen. Como éste no es el tema propuesto en esta lección, haga clic en Cancelar en este cuadro de diálogo.
12 Ahora puede comprobar cómo la imagen se ha pegado en el punto de origen, por ser el punto en que se encontraba el cursor de edición. La barra de herramientas Estándar se cierra con los también botones básicos Deshacer y Rehacer. Haga clic en el botón Deshacer, penúltimo de dicha barra. (11)
13 El comando Deshacer anula la última acción realizada, en este caso, el pegado de la imagen. La pulsación del último de los botones de la barra de herramientas Estándar, el comando Rehacer, la recuperaría. En esta práctica, aprovechando que la información necesaria sigue en el Portapapeles, volveremos a pegar la imagen. En este caso, pulse sobre el comando Pegar de la barra de herramientas Estándar (12) y pulse el botón Cancelar en el cuadro de accesibilidad que aparece.
La combinación de teclas Ctrl + Z deshace la última acción realizada.
14 Ya por último almacenaremos los cambios realizados en el documento. Pulse el comando Guardar de la barra de herramientas Estándar.
15 Terminaremos esta lección cerrando los dos documentos abiertos. Para ello, despliegue el menú Archivo y haga clic en el comando Cerrar todos.
Gestión de sitios y páginas
Introducción
El segundo apartado de este manual está dedicado íntegramente a la gestión de sitios locales y de los archivos que forman parte de este tipo de sitios. Un sitio Web es un conjunto de archivos enlazados con atributos compartidos: temas relacionados, diseño similar u objetivo común. Dreamweaver se presenta como un editor visual de sitios web, hecho que implica un uso y un funcionamiento del programa completamente intuitivo y, sin lugar a dudas, cada vez más sencillo para aquellos usuarios que no se consideran experimentados.
La versión CS5 de Dreamweaver, la que nos ocupa en este manual, ha simplificado todavía el proceso de creación y configuración de sitios; así, ha rediseñado y mejorado funcionalmente el cuadro de diálogo destinado a tal fin para que el usuario sólo necesite, de entrada, dar un nombre al sitio y otorgar una ubicación para los archivos que formarán parte de él. Una vez creado el sitio local, resulta realmente sencillo administrarlo, es decir, crear y manipular las distintas carpetas que albergarán documentos, imágenes y otros elementos que suelen aparecer en un sitio web.
El cuadro de diálogo Configuración del sitio para..., denominado en versiones anteriores del programa Definición del sitio para..., ha sido mejorado en la versión CS5.
Una vez creado el sitio local, resulta muy sencillo gestionarlo gracias a la accesibilidad al mismo desde el panel Archivos y el trabajo en el cuadro Administrar sitios.
En este apartado, el lector tendrá una primera toma de contacto con algún aspecto relacionado con el diseño de las páginas de un sitio; en concreto, aprenderá de un modo básico y sencillo, a insertar en una página colores e imágenes como fondo de la misma. Además, también conocerá unos elementos concretos que pueden servir de ayuda en el momento de la creación de un sitio web: las llamadas imágenes de rastreo.
El uso de imágenes de fondo para las páginas de un sitio web es una buena solución visual, siempre y cuando no dificulte la correcta visualización del contenido de las mismas.
Las imágenes de rastreo son meras guías visuales que ayudan al desarrollador de un sitio web a configurarlo; son recomendables, por tanto, en aquellos casos en que sea más de una persona la que está trabajando en un mismo proyecto.
Este tipo de imágenes son estructuras que pueden ser creadas en otros programas e insertadas como fondo en una página web para que sirva de guía. Las imágenes de rastreo sólo se visualizan en Dreamweaver, nunca en el navegador web en el que se muestra el sitio.
En las últimas lecciones de este apartado el lector aprenderá a realizar distintas tareas de administración y gestión de un sitio local, como exportarlo, importarlo y duplicarlo. Todas estas acciones se llevan a cabo desde un mismo cuadro de diálogo, el denominado Administrar sitios, cuyo uso acaba siendo imprescindible para la realización de muchos procedimientos.
