DREAMWEAVER 3

INTRODUCCION

Dreamweaver es, a grandes rasgos, una de las mas potentes y versátiles herramientas de creación, edición y publicación de sitios web. Las características que definen a Dreamweaver son:

-Versatilidad. Permite realizar muchas mas operaciones que otros editores.

-Potencia. Permite integrar elementos realizados con otras herramientas, como son imágenes procedentes de Photoshop, secuencias animadas procedentes de Flash, bases de datos, hojas de cálculo, etc.

-Facilidad de uso. Una vez que se conoce bien su funcionamiento es muy fácil de usar, explotando los recursos que ofrece. Además de contar con una buena herramienta de ayuda y distintas opciones que facilitan aún mas su uso.

Dreamweaver es una herramienta de autor imprescindible para todo webmaster que se precie. Este temario está dirigido , principalmente, a personas con un amplio y profundo conocimiento de HTML, DHTML y Scripts, aunque también le sacarán partido aquellos que se están introduciendo en el mundo de la realización de páginas web, así como a aquellos otros que, estando ya introducidos quieren poder contar con una buena herramienta de trabajo. Dreamweaver no es solo un editor de páginas web; es un completo gestor de sitios que ofrece una amplísima gama de posibilidades incluyendo, como no, las mayores facilidades a la hora de publicar nuestro sitio. El funcionamiento de Dreamweaver se explica aquí desde el principio, por lo que no se suponen conocimientos previos al respecto; sin embargo, si supongo que, si estás en este oficio, conoces perfectamente HTML, DHTML y JavaScript, al menos. Lógicamente también te encuentras familiarizado con los conceptos básicos del Web, así como con el uso fundamental de Windows 98. Dreamweaver es una herramienta que puede operar bajo entorno Windows o Macintosh pero, por ser el primero mas popular y de uso mas extendido, será sobre el que desarrollemos este temario.

Este manual está dividido en dos partes. La primera describe el funcionamiento de todas las principales herramientas y opciones de Dreamweaver, de forma individual. Cada explicación puedes probarla y aplicarla, de forma inmediata sobre una página en blanco, sin necesidad de más. En la segunda parte se contempla el desarrollo de un sitio web en conjunto, así como la publicación del mismo. En esta segunda parte, veremos el uso de algunas de las herramientas analizadas en la primera parte, así como conceptos y herramientas nuevas.

Lo primero que necesitarás para trabajar con Dreamweaver será contar con el CD original y un equipo dotado de, al menos, procesador Pentium y 32 MB de RAM, así como de lector de CD-ROM y Windows 98 instalado. Lógicamente, si te dedicas, o pretendes dedicarte, al diseño web, deberás contar con un editor de imágenes para crear las que necesites. Este manual no se decanta por ninguno en particular, ya que “cada maestrillo tiene su librillo” y aquí no pretendo enseñar a nadie el uso de un programa de este tipo. Sin embargo, me voy a permitir el lujo de aconsejarte que consideres como opciones PhotoShop, PhotoFinish o Fireworks. La versión 3 de éste último te será necesaria, además, para la creación de páginas con miniaturas de imágenes, tal como verás en su momento. Una versión shareware, válida durante 30 días, te la podrás descargar gratuitamente, del sitio de Macromedia (www.macromedia.com).

Inserta el CD de Dreamweaver en el lector. Si tienes activada la función Autorun se disparará el mecanismo de instalación. Esta es guiada por un asistente, con lo que no tendrás problemas para completarla. Una vez finalizada totalmente, créate un icono de acceso directo en el escritorio. A partir de ahí puedes empezar a trabajar haciendo doble clic en el icono.

PRIMERA PARTE.

1. INICIANDO DREAMWEAVER

Lo primero que verás al arrancar Dreamweaver es la pantalla de bienvenida con el logo de Dreamweaver. Tras unos segundos verás la interface de Dreamweaver. El aspecto inicial de Dreamweaver desconcierta un poco, dado que, sobre la ventana de edición (o área de trabajo) aparecen otras ventanas, conteniendo una serie de botones y herramientas que producen un poco de despiste al neófito. Estas barras de herramientas son flotantes; se pueden arrastrar fuera del área de edición. Además pueden ocultarse y volver a mostrarse si es necesario, mediante el uso de la tecla F4. Nada más iniciar Dreamweaver vemos, sobre la ventana de edición, tres ventanas desplegadas (aunque Dreamweaver dispone de muchas mas), tal como muestra la siguiente figura.

2. LAS VENTANAS DE DREAMWEAVER

2.1. LA VENTANA DE OBJETOS

Vamos a fijarnos, en primer lugar, en la ventana de objetos. Contiene todos los objetos o elementos individuales que podemos insertar en nuestra página web, agrupados en distintos tipos, según su propia naturaleza. El tipo de objetos que aparecen por defecto en esta ventana es el que corresponde al grupo llamado “Común”, como se aprecia en el detalle de la siguiente figura:

Si pinchamos en la etiqueta de “común” se abrirá un menú emergente donde podremos ver el resto de los grupos y elegir uno. Los posibles grupos son: Caracteres, Común, Formularios, Head, Invisibles y Marcos. Estos grupos, cuyos contenidos y funcionamiento vamos a estudiar a continuación, son los propios de Dreamweaver. Además, se pueden incorporar a la ventana de Objetos otros grupos definidos por el usuario. Hablaremos de esto en el capítulo de Personalización. Cada uno de los grupos de objetos estándar de Dreamweaver contiene una serie de iconos que insertan distintos elementos en una página. Aclaremos una cosa; estos botones insertan distintos elementos en la página, con las opciones mínimas necesarias para configuración. Mas adelante veremos como podemos establecer otras propiedades de los objetos, una vez se hallen insertados. Veamos los iconos de los distintos grupos.

2.1.1. OBJETOS COMUNES.

Contiene las herramientas de uso mas habitual en cualquier página web. Veamos cuales son:

Insertar imagen. Permite incluir un archivo gráfico en la página que se halle en edición en ese momento. Este archivo deberá estar en formato GIF, GIF 89, GIF 89ª, JPG o PNG. Al pinchar en éste botón se abre un cuadro de diálogo como el mostrado a continuación:

Este cuadro es el mismo que el que usan la mayoría de las aplicaciones Windows para abrir un archivo. Seleccionamos la carpeta donde se halle la imagen que queremos insertar en nuestra página, elegimos la imagen y pulsamos “Seleccionar”. La imagen quedará, automáticamente, insertada en la posición del cursor en la página.

Imagen de sustitución. El nombre de éste botón es una desafortunada traducción del original en inglés. Lo que hace es permitirnos insertar una imagen y crear un código Javascript en la página, de tal forma que genera un efecto rollover. En tiempo de ejecución, cuando el usuario pase el ratón por la imagen esta se cambiará por otra. Al pulsar este botón se nos abre el siguiente cuadro de diálogo:

En la primera línea introduciremos un nombre para la imagen. Este nombre no tiene por qué coincidir con el del fichero que contiene la imagen. Es sólo una etiqueta para que el código Javascript pueda identificar la imagen. El nombre deberá ser único, es decir, no se podrá asignar a ningún otro objeto de la página ni, como medida precautoria, a ningún otro objeto del sitio. A continuación deberemos introducir el nombre (incluyendo la ruta relativa de acceso, del fichero que contiene la imagen original, es decir, la que aparece al cargar la página. Lo siguiente que teclearemos es el nombre de la imagen de sustitución, es decir, la que aparece en lugar de la original al pasar el ratón por encima. La casilla de verificación correspondiente a “Carga previa de imagen de sustitución deberemos dejarla activada. Con esto logramos que, al cargar la página, se cargue en memoria, en segundo plano, la imagen de sustitución; así, al pasar el ratón sobre la imagen original el cambio de una a otra será inmediato. La casilla “Al hacer clic, ir a URL” habla por si misma. El uso normal de imágenes de sustitución es para indicarle al usuario que esa imagen es un vínculo. En está casilla estableceremos el destino de dicho vínculo. Si desconocemos la ruta o el nombre exactos de alguno de los tres ficheros que se nos piden podremos pulsar el correspondiente botón “Examinar” para localizarlo manualmente. Una vez especificados todos los datos, pulsaremos en “Aceptar” y la imagen de sustitución se insertará inmediatamente en nuestra página.

Insertar tabla. Este botón permite insertar una tabla en la página. Como sabemos, las tablas son elementos fundamentales en el diseño web. Al pulsar el botón, se abre el siguiente cuadro de diálogo:

En primer lugar se nos pide el número de filas y columnas que tendrá la tabla. La casilla “Ancho:” sirve para indicar la anchura de la tabla. Se puede expresar en porcentaje de la ventana de navegación o en número absoluto de píxeles. La casilla “Borde:” permite especificar el grueso del borde de la tabla, en píxeles. Si queremos que la tabla sea invisible, teclearemos un 0. La casilla “Relleno celda:” se usa para indicar el espacio que deberá haber, en píxeles, entre el mayor de los contenidos y los bordes de la celda que lo contenga. La casilla “Espacio celda:” se usa para expresar el espacio, en píxeles, entre celdas contiguas. Una vez configurada la tabla, se pulsa el botón “Aceptar”.

Insertar datos tabulares. Este botón se usa para insertar en nuestra página una tabla de datos procedente de Excel, Access u otras aplicaciones. Al pulsarlo aparece el siguiente cuadro de diálogo:

En el podemos teclear el nombre del fichero que contiene la tabla, así como el delimitador que separa los datos entre sí. Además podemos hacer que se establezca una anchura en función de los datos contenidos o pre-establecerla en píxeles o en porcentaje. Los campos “Relleno celda:” y “Espacio celda:” son idénticos a sus homónimos en las tablas. En “Formatear primera fila:” elegiremos si la queremos en negrita, cursiva, ambos formatos o ninguno. En “Borde:” elegiremos el ancho, en píxeles, del borde de la tabla. Una aclaración. Los datos tabulares no podrán estar guardados, directamente, en el formato de origen, sino que deberán haber sido exportados a un formato compatible con Dreamweaver.

Insertar barra horizontal. Este botón permite insertar una barra horizontal para la separación de contenidos. Al pulsarlo se inserta, automáticamente, una línea horizontal negra y la ventana de propiedades ofrece el siguiente aspecto:

En ella se puede establecer un identificativo para el objeto, con vistas a su posterior tratamiento mediante scripts. Este identificativo se escribe en la casilla en blanco que aparece debajo de “Regla horizontal”. Además de puede establecer el ancho de la raya (en píxeles o en porcentaje) y el alto, en píxeles. La alineación puede establecerse a la derecha, al centro o a la izquierda. El sombreado se controla mediante una casilla de verificación. Para cambiar el color es necesario acceder al Quick Tag Inspector de Dreamweaver. Para ello pulsaremos el icono que aparece a la derecha en la ventana de propiedades. Con esto veremos el código HTML correspondiente a la línea y añadiremos a mano el parámetro color.

Insertar barra de exploración. Sirve para insertar un conjunto de elementos que se comporten como botones activables excluyentes. Es decir, que si está pulsado uno, los demás permanecen sueltos. Si se pulsa otro, el que estaba pulsado vuelve a estar suelto. Para cada botón deberemos contar con cuatro imágenes:

• La que representa al botón suelto y sin el ratón.

• La que representa al botón pulsado y sin el ratón.

• La que representa al botón suelto cuando pasamos el ratón.

• La que representa al botón pulsado cuando pasamos el ratón.

El cuadro de diálogo para construir una barra de exploración tiene el siguiente aspecto:

La casilla “Elementos de barra de exploración” muestra la lista de los botones que contiene la barra. Estos elementos deben definirse uno a uno en las siguientes casillas. La casilla “Nombre de elemento:” Nos permite asignarle un nombre al botón. La casilla “Imagen arriba” recibe el nombre de la imagen que representa al botón suelto sin el ratón. La casilla “Sobre imagen” recibe el nombre del fichero de imagen que representa al botón suelto cuando el usuario pasa el ratón. La casilla imagen abajo recibe el nombre del fichero de imagen que representa al botón pulsado, sin tener el puntero del ratón encima. La casilla “Sobre mientras imagen abajo recibe el nombre del fichero de imagen que queremos que aparezca cuando el botón está pulsado y el usuario pasa el ratón por encima. La casilla “Al hacer clic ir a URL” recibe el nombre de la página, marcador, etc. a la que es vínculo el botón. A la derecha aparece una casilla marcada “en”; por defecto ofrece la opción “Ventana Principal”, pero si nuestra página tiene marcos, podremos fijar el marco de destino del vínculo. La casilla de verificación “Carga previa de imágenes” permite que las imágenes necesarias se carguen en memoria, en segundo plano, al cargar la página. De esta forma, la reacción visible de los botones será inmediata. La casilla de verificación “Mostrar imagen abajo inicialmente” permite mostrar la imagen correspondiente a botón pulsado al cargar la página. Una vez definido el botón, si queremos definir otro pulsaremos sobre el icono . Si queremos borrar alguno de los botones, lo seleccionaremos en la casilla “Elementos de barra de exploración” y pulsaremos sobre el icono . Una vez definida la barra de exploración, decidiremos si la queremos insertar en horizontal o en vertical y si queremos que los botones estén situados como elementos de una tabla. Esta última opción es muy aconsejable. Por último, pulsaremos en el botón “Aceptar”.

Dibujar capa. Este botón solo es útil si se emplea DHTML. Permite trazar una capa situando el cursor en la esquina superior izquierda, pulsando el botón izquierdo, arrastrando hasta la esquina inferior derecha y soltando el botón. Una vez trazada la capa, sus contenidos y propiedades pueden editarse independientemente. En la parte superior izquierda de la página aparece un icono por cada capa que haya en el documento. Estos iconos solo son visibles en tiempo de edición. No en tiempo de ejecución.

Insertar salto de línea. Inserta un salto de línea simple, como el que se obtiene pulsando Mayúsculas + Enter.

Insertar vínculo de correo electrónico. Inserta un vínculo de correo electrónico asociado a un texto que se hallará seleccionado en el momento de pulsar este botón. Muestra el siguiente cuadro de diálogo:

En él se nos pide un texto y la dirección de correo electrónico que constituirá el vínculo. Si queremos asociar un vínculo de correo electrónico a una imagen deberemos establecer la sintaxis de este tipo de vínculos en la correspondiente casilla de la barra de propiedades de imágenes. Mas adelante hablaremos de ello.

Inserción de fecha. Permite insertar la fecha y hora del sistema. Muestra el cuadro de diálogo que puedes ver en la siguiente página:

En él se da opción a elegir el aspecto del día de la semana y el formato de fecha y hora.

Insertar Flash. Permite insertar un archivo desarrollado mediante Flash.

Insertar Shockwave. Permite insertar un archivo desarrollado mediante Director.

Insertar Generator. Permite insertar una plantilla de servidor desarrollada mediante Generator. Al pulsarlo se abre el siguiente cuadro de diálogo:

En él se teclean los parámetros necesarios para el funcionamiento de la plantilla.

Insertar HTML de Fireworks. Permite insertar un fragmento de código exportado desde Fireworks. Abre el cuadro de diálogo siguiente:

En el se nos pide el nombre del archivo de HTML procedente de Fireworks que será el referente a un rollover o algún tipo de animación. Además se nos da opción a borrar el archivo original una vez insertado. Esta opción no es aconsejable.

Insertar subprograma. Permite insertar un Applet de Java. Una vez insertado, y pulsando en el botón
de la ventana de propiedades, se abrirá, para introducir los parámetros necesarios, el siguiente cuadro de diálogo:

En él se permite incluir todos los parámetros necesarios para el correcto funcionamiento del Applet.

Insertar Active X. Permite insertar un control Active X para alguna de las funciones de Windows.

Insertar Plug-in. Permite insertar contenido de los Plug-ins de Netscape.

Insertar Server-Side include. Los servidores añaden determinadas instrucciones a los documentos en ejecución. Con este objeto es posible simular el comportamiento de un servidor y controlar la ejecución de esas instrucciones.

2.1.2. OBJETOS DE CARACTER.

Esta ventana permite insertar caracteres como el del euro y monedas extranjeras. Además contiene algunos caracteres ortográficos predefinidos. Su aspecto es el que se ve a la derecha. Además tiene un botón (el que tiene este aspecto ) que permite incluir otros caracteres no definidos en la ventana. El uso de esta ventana es, sobre todo, para páginas cuyos contenidos sean de origen extranjero. El uso de caracteres especiales es bastante difícil en otras aplicaciones, ya que se hace necesario conocer el código ASCII (o Unicode, según de que aplicación hablemos) para poder introducirlos. Dreamweaver facilita esta tarea mediante los botones de la ventana que ves a la derecha. Como ves, los caracteres pre-definidos son los mas habituales. El del Euro, por ejemplo. En cuestión de pocos meses será impensable expresar cantidades económicas sin usar esta divisa.

2.1.3. OBJETOS DE FORMULARIO.

Esta ventana permite insertar los elementos necesarios para construir cualquier formulario. Cuenta con los siguientes botones.

Insertar formulario. Este objeto es la estructura básica de todo formulario. Traza un par de delimitaciones en forma de líneas rojas punteadas que contendrán el formulario. La Ventana de propiedades adquiere el aspecto que puedes ver en la siguiente imagen:

En ella se puede teclear el nombre del formulario, así como la acción a realizar y el método de envío.

Insertar campo de texto. Sirve para insertar un campo de texto de un formulario. El campo podrá ser normal, de varias líneas o de contraseña. Al seleccionar un campo de texto, la ventana de propiedades adquiere el siguiente aspecto:

En ella se puede establecer el número máximo de caracteres del campo, el número máximo de los que se visualizarán por pantalla, el tipo de campo de texto (con los botones de opción) y el valor inicial. Además se puede fijar el nombre del campo de texto en la casilla que se halla debajo de “Campo de texto”. Por último, si es un campo de varias líneas, podemos establecer el tipo de ajuste que hará el texto cuando el usuario lo teclee.

Insertar botón. Permite insertar un botón de formulario. Este botón puede ser de Envío (Submit), de Reposición (Reset) o sin acciones preprogramadas (Ninguno), tal como se aprecia en la ventana de propiedades asociada:

Además se puede establecer el nombre del botón y su etiqueta.

Insertar casilla de verificación. Permite insertar una casilla de tipo checkbox, que lleva asociada la siguiente ventana de propiedades:

En ella se fija el nombre de la casilla, el valor y el estado inicial.

Insertar botón de opción. Permite insertar un botón de un grupo para que el usuario elija una posible opción de varias. Los botones se agrupan en función de su nombre, que se fija en la ventana de propiedades que vemos a continuación:

Este nombre se teclea en la casilla que hay debajo de “Botón opción”. Además podemos fijar el valor inicial y si el botón está, por defecto, activado o desactivado. Si en tiempo de edición se dejan activados varios botones correspondientes a un mismo grupo de botones, en tiempo de ejecución solo aparecerá activado el último.

Insertar lista desplegable. Inserta una lista desplegable a la que le podremos dar un nombre y una serie de posibles valores. La ventana de propiedades tiene el siguiente aspecto:

El nombre se teclea en la casilla que aparece debajo de “Lista/menú”. A continuación se elige entre un menú desplegable y una lista de un número determinado de filas. Si elegimos lista podemos especificar la altura de la lista y si deseamos selección múltiple. Esto último no es aconsejable salvo casos muy especiales. A continuación pincharemos en el botón
y se abrirá un cuadro de diálogo donde podremos teclear las etiquetas y los valores de los diferentes elementos de la lista o menú. Asi:

Una vez tecleados y, tras pulsar en “Aceptar”, volvemos a fijarnos en la Ventana de Propiedades, en cuya parte inferior vemos la lista de elementos para que seleccionemos el que deberá aparecer activado por defecto.

Insertar campo de archivo. Sirve para darle al usuario la opción de incluir un archivo de su unidad local como parte de un formulario, a fin de que lo envíe al servidor. Esto es útil, por ejemplo, si nuestra página permite al usuario gestionar cuentas de correo electrónico. De esta forma, se pueden adjuntar ficheros a los mensajes enviados. Este objeto presenta la siguiente ventana de propiedades.

El nombre del campo se teclea en la casilla que hay debajo de “Campo archivo”. Luego se añaden las longitudes del campo y de la casilla en pantalla y el Valor inicial.

Insertar campo de imagen. Este objeto permite insertar una imagen como si fuera parte de un formulario, a fin de dotarla luego de algún tipo de interactividad mediante el uso de eventos. La ventana de Propiedades asociada tiene el siguiente aspecto:

Si pinchamos en el botón
se dispara el programa de edición de imágenes que tengamos instalado.

Insertar campos ocultos. Permite insertar campos con un valor predeterminado que no se hallen a la vista del usuario. En tiempo de edición, el icono es visible en el lugar en que se halla el campo oculto. En tiempo de ejecución no se ve nada. Este objeto lleva asociada la siguiente ventana de propiedades:

En ella vemos que se puede establecer el nombre del campo y su valor.

Insertar menú de salto. Permite insertar un menú de respuesta inmediata. Cuando el usuario seleccione una opción, se disparará inmediatamente un vínculo. Al pulsar este botón en la ventana de objetos, se abre el siguiente cuadro de diálogo:

En el se describe cada una de las opciones del menú de salto. Estas opciones, según las vayamos definiendo irán apareciendo en la casilla marcada “Elementos del menú”. Para ello teclearemos la etiqueta que debe ver el usuario en la casilla “Texto”. En la casilla “Al seleccionarse, ir a URL” escribiremos la dirección del vínculo. Si nuestra página usa marcos, el marco de destino lo podemos determinar en la casilla “Abrir URL en”. También teclearemos el nombre del menú en la correspondiente casilla. Además tenemos dos checkbox que nos permiten insertar un botón de IR junto al menú, par que el salto no sea inmediato, sino tras pulsar ese botón y seleccionar el primer elemento del menú después de un salto.

2.1.4. OBJETOS DE HEAD.

Contiene objetos que van en la cabecera (Head) de una página web. Incluye los siguientes botones.

Insertar meta. Permite insertar una línea con los llamados identificadores ocultos. Estos identificadores pueden recibir uno de los siguientes atributos: Nombre y Equivalente http. Esto se fija en el cuadro de diálogo que aparece al pulsar el icono de “meta”:

Además establecemos el valor y el contenido del tag.

Insertar palabras clave. Este icono permite crear una variante específica de meta. La variante Keywords para que nuestra página sea localizada y clasificada por los principales motores de búsqueda. Al pulsar el icono se abre una ventana donde podemos teclear las palabras clave, separadas por comas. Así:

Insertar descripción. Nos permite insertar una descripción de la página para completar la información ofrecida a los servidores. Se abre el cuadro de diálogo que ves en la siguiente imagen, en el que puedes introducir un texto libre que describa tu página lo mejor posible. Cuando mejor descrita esté, mas atraerá al público interesado.

Insertar vínculo automático. Este objeto permite que nuestra página dé paso a otra página de nuestro sitio o de otro sitio pasado un determinado periodo de tiempo. Al pulsar el icono se abre el siguiente cuadro de diálogo:

En él podemos fijar el retardo en segundos y la acción que se debe desencadenar tras ese retardo. Puede ser ir a otra página (en ese caso añadiremos la dirección de la otra página) o, menos habitual, actualizar la que ya hay cargada.

Insertar base. Nos permite fijar una ruta de base para todo el documento, según el siguiente cuadro de diálogo:

Además de una ruta base, podemos establecer un marco de destino para todos los vínculos, si nuestra página usa frames.

Insertar vínculo. Permite insertar un vínculo a una hoja de estilos CSS. Al pulsarlo se abre el siguiente cuadro de diálogo:

En el rellenamos las correspondientes casillas y queda programada la carga de la hoja de estilos.

2.1.5. OBJETOS INVISIBLES.

Son objetos que no se ven de ningún modo en tiempo de ejecución, aunque cumplen misiones de total importancia (tres de ellos, al menos). Son los siguientes:

Insertar punto de fijación con nombre. Es la inserción de lo que, comúnmente se llama un marcador para vínculos internos. Al pulsarlo se abre el siguiente cuadro de diálogo:

En él se nos pide el nombre del marcador, que deberá ser único para la página.

Insertar comentario. Permite insertar comentarios para documentar el código. Estos comentarios no serán visibles en tiempo de ejecución. Al pulsarlo, se abre un cuadro de diálogo en el que podemos insertar el comentario.

Insertar secuencia de comandos. Permite introducir manualmente código de Script. Al pulsar se abre el siguiente cuadro de diálogo:

En el se elige el lenguaje que vayamos a emplear (Javascript o VBScript) y se teclea el código directamente.

Insertar espacio indivisible. Se usa para alinear diferentes elementos, como un texto y una imagen. Su uso está muy limitado, debido a su escasa precisión y fiabilidad. No te acostumbres a él. Usa mejor tablas. Es un buen consejo. En realidad con tablas siempre se obtienen los resultados adecuados.

2.1.6. OBJETOS DE MARCOS.

Estos objetos permiten dividir la pantalla en marcos, siguiendo distintas estructuras. Al pulsar en una de estas estructuras se divide la pantalla en los correspondientes marcos. Las propiedades de cada uno, como son el nombre y la página que cargan al origen las podemos cambiar en la correspondiente ventana de propiedades, como aparece aquí. Además podemos establecer que aparezcan o no las barras de desplazamiento, el tamaño y el color de los bordes, etc. Una opción interesante es la casilla “Mismo tamaño:” Si la activamos, el usuario no podrá cambiar el tamaño de los marcos. Deberemos activarla siempre. Un buen diseño no necesita que el usuario re-escale los marcos y no lo permite.

Hasta aquí la descripción de las distintas ventanas de objetos. Este capítulo nos ha permitido familiarizarnos un poco con el entorno Dreamweaver. Todas las opciones que hemos recorrido a vista de pájaro las usaremos mas adelante en los ejercicios de este temario y las iremos conociendo a fondo. Sin mas, pasemos ya a ver otras ventanas, también en una vista preliminar de las mismas.

2.2. LA VENTANA DE PROPIEDADES

La ventana de propiedades permite establecer las características y del objeto seleccionado en cada momento. Ya hemos visto algunos ejemplos cuando hablábamos de la ventana de objetos. Ahora vamos a entrar un poco mas en detalle. Veamos, por ejemplo, cual es su aspecto cuando no hay ningún objeto seleccionado. En ese caso, la ventana de propiedades afecta al texto de la página en construcción. Si hay un texto seleccionado, lo que hagamos en la ventana de propiedades afectará a ese texto. Si no lo hay, afectará a lo que escribamos a continuación. En ese caso, la ventana de propiedades tiene el siguiente aspecto:

La casilla con lista desplegable marcada como “Formato” permite elegir si el texto será un párrafo independiente, si estará preformateado o si tendrá uno de los seis tamaños de encabezado que contempla HTML. Su aspecto es el que ves a la derecha:

Justo a la derecha vemos otra lista desplegable que por defecto contiene “Fuente predet.” y que sirve para escoger la tipografía.

Podemos elegir una de las opciones que nos ofrece, incluyendo cada una de ellas, algunas fuentes o podemos optar por “Editar lista de fuentes”. Supongamos que elegimos la línea que contiene “Verdana, Arial, Helvetica”. La página buscará en nuestro PC (y en el de los usuarios cuando esté en La Red) la tipografía Verdana. Si no la encuentra, buscará

Arial, y así sucesivamente. Es la forma de decirle a nuestra página que tipografía debe usar. Por supuesto la tipografía no tiene por que ser la misma en toda la página. Y otra cosa. Si pinchamos en Editar lista de fuentes, se nos ofrece el siguiente cuadro de diálogo:

En él Podemos crear una lista propia de fuentes que se incorporará a las ya existentes. Las fuentes las elegiremos de la lista “Fuentes disponibles”. Supongamos que queremos crear una opción que incluya las fuentes Algerian y Comic Sans MS. En la lista de fuentes disponibles pulsaremos con el botón izquierdo sobre Algerian, para que quede resaltada.
Después pulsaremos en el icono , con lo que Algerian nos aparecerá en la lista de “Fuentes elegidas”. Repetiremos los mismos pasos con “Comic Sans MS”. Ahora los dos nombres de letra están en la lista “Fuentes elegidas y, en una sola línea, en la “Lista de fuentes”. Si queremos añadir otra línea en la lista de fuentes pulsaremos el icono . Si queremos suprimir alguna línea en la “Lista de fuentes” la seleccionaremos y pulsaremos el icono .

Una vez este la lista a nuestro gusto, pulsaremos “Aceptar” y veremos como en la lista de fuentes de la ventana de propiedades han quedado grabados los cambios, tal como muestra la figura de la izquierda. Podemos crear tantas listas de fuentes como deseemos y almacenarlas para un uso posterior. Lo único a tener en cuenta es que sean de tamaños similares entre sí, para que no nos descuadren el tamaño de la página.

Si queremos convertir una secuencia del texto en un vínculo, la seleccionaremos y pulsaremos el icono de la ventana de propiedades. Se nos abrirá un cuadro de diálogo que nos permitirá elegir el fichero al que deba dirigirse el vínculo. También podemos, si se trata de una URL que no está en nuestro disco local, escribir la dirección en la casilla que aparece como
. Si queremos anular un vínculo, seleccionaremos el texto o imagen objeto del mismo, pondremos el cursor en casilla “Vinculo” y borraremos su contenido. Una vez creado un vínculo, y si nuestra página emplea marcos, deberemos fijar el nombre del marco de destino en la casilla
.

Y ¿Qué pasa si queremos crear un vínculo interno?. Nada mas fácil. Primero crearemos el marcador en la posición deseada con la herramienta Insertar punto de fijación con nombre” de la ventana Objetos Invisibles. Después seleccionaremos la imagen o texto de la página que queremos que sea vínculo a ese marcador. Por último engancharemos con el ratón el icono de la ventana de propiedades y lo llevaremos (drag and drop) sobre el marcador. Et voilá. Ya está creado el vínculo interno.

La casilla
se usa para fijar el tamaño de la escritura. Incluye una lista desplegable con varios tamaños predefinidos que podemos usar.

La casilla
se usa para elegir el color de la fuente. Pinchando en el icono de la izquierda se abre una paleta con los colores llamados “Seguros para Internet”, es decir, aquellos que se visualizan correctamente en PC y Macintosh.

Los botones
Fijan la letra en negrita y/o en cursiva, como en un procesador de texto normal.

Los botones
establecen la alineación horizontal para el elemento seleccionado.

Los botones
establecen y anulan sangrías.

El botón convierte unas líneas de texto en una lista sin numerar.

El botón convierte unas líneas de texto en una lista numerada. En estos dos últimos casos, las líneas de texto deberán estar terminadas con un retorno de carro duro (Enter) en lugar de un retorno de carro blando (Mayúsculas-Enter).

El icono abre la ventana de ayuda de Dreamweaver. Es muy útil. Pruébala.

El icono abre el Quick Tag Inspector, que permite editar a mano la etiqueta HTML correspondiente al elemento seleccionado en el momento de pulsarlo.

Por último, el botón permite desplegar la ventana de propiedades ofreciendo otras posibilidades si se hallan disponibles.

Hay otra ventana de propiedades especialmente interesante, que vamos a estudiar ahora: la ventana de propiedades de imágenes. Está disponible si tenemos una imagen seleccionada y tiene el siguiente aspecto:

Lo primero que vemos es la casilla imagen, que nos da una indicación del tamaño de la imagen que tenemos seleccionada. En el ejemplo, ocupa 6 Kb. En esta casilla fijaremos el identificativo con el que queremos que se reconozca la imagen. En el ejemplo hemos puesto “ratoncito”. Las casillas “An” y “Al” permiten establecer la anchura y la altura, en píxeles, con que se visualizará la imagen. En nuestro caso hemos establecido que se visualice con 32 x 32 píxeles. Este es el tamaño estándar de los iconos del escritorio de Windows. En la casilla “Origen:” Aparece el nombre del fichero que contiene la imagen, con la ruta si fuera distinta de la carpeta actual de trabajo. En la casilla “Vínculo:” podemos indicar que la imagen sea un vínculo. Podremos elegir uno interno con el icono , o bien uno externo o de descarga mediante el icono . En la casilla “Alt” podremos fijar un texto alternativo para la imagen. En la casilla “Alinear”, que como vemos es una lista desplegable, podemos elegir donde queremos alinear la imagen con respecto a la página o a una celda de una tabla, si se halla colocada dentro de una.

La parte inferior de la ventana de propiedades es bastante interesante, ya que nos permite definir mapas de imágenes. Para ello, lo primero es establecer un nombre para el mapa, en la casilla “Mapa”. A continuación pincharemos en un de los tres iconos que aparecen en azul, según la forma de la “zona caliente” o “hot spot” que queramos definir. Pulsaremos en para definir una zona rectangular, en para obtener una zona circular o en si queremos definir una zona poligonal. Al pinchar en una de estas zonas podemos llevar el cursor sobre la imagen y trazar la zona que deseemos. Esta zona aparecerá remarcada sobre la imagen en azul semitransparente y con unos manejadores para poder cambiar su tamaño. Por supuesto, en tiempo de ejecución será invisible. Una vez trazada, la ventana de propiedades de imagen se convierte, automáticamente, en la ventana de propiedades de zona activable. Ahora tiene el siguiente aspecto:

En ella vemos la casilla “Mapa”, en la que fijamos, si no lo hicimos antes, el nombre del mapa de imágenes. En la casilla “Vínculo” podemos establecer el vínculo para la zona, ya sea interno, externo o de descarga. Si queremos establecer un vínculo de correo, deberemos teclear en la casilla mailto:direccion@dominio.com como haríamos si lo estuviéramos programando a mano (en lugar de direccion@dominio.com teclearemos la verdadera dirección del vínculo, por supuesto). En la casilla “Destino” estableceremos el marco de destino del vínculo, en el caso de que nuestra página use marcos. En la casilla “Alt” estableceremos el texto alternativo para el vínculo. De igual manera definiremos todas las zonas calientes que deseemos en nuestra imagen.

2.3. LA VENTANA DE ESTILOS HTML

Esta ventana se obtiene seleccionando en el menú “Ventana” la opción “Estilos HTML” o pulsando la combinación de teclas Ctrl-F7. También podemos hacerla aparecer pulsando el icono
que aparece en la parte inferior de la pantalla, en la barra de estado. El grupo de iconos que aparecen recibe el nombre de mini-lanzador, y hablaremos de él más adelante. Bien. La ventana de estilos HTML se usa para establecer las características de un párrafo de texto seleccionado (o de una línea, una frase, una palabra o, incluso, de un solo carácter). Recuerda, cuando mas adelante veas los estilos CSS (capítulo “Personalización”), que los estilos HTML son menos potentes, pero el navegador les da preferencia. La ventana en cuestión tiene el aspecto que ves en la página siguiente:

Lo que nos interesa en ella son las líneas que aparecen en el área blanca central. Si seleccionamos un texto y, a continuación, pulsamos un estilo, éste se aplicará sobre el texto seleccionado. Si está activada la casilla de verificación que hay abajo a la izquierda, el estilo se aplicará inmediatamente. Si no, se aplicará cuando pulsemos el botón “Aplicar” que hay junto a la casilla de verificación.

El botón sirve para crear nuevos estilos. Al pulsarlo se abre el siguiente cuadro de diálogo:

En el vemos lo siguiente: En primer lugar la casilla “Nombre:”. En ella introduciremos el nombre del nuevo estilo que queremos crear. Con este nombre aparecerá luego en la ventana de estilos HTML. A continuación podemos elegir que el estilo se aplique al texto seleccionada o a todo el párrafo que comprende a dicha selección. Son los botones marcados como “Aplicar a:”. Después tenemos los botones de opción “Al aplicar:” Podemos hacer que nuestro estilo se agregue a uno que ya estuviera aplicado sobre el texto seleccionado o bien que se aplique en lugar del estilo que hubiera. El siguiente grupo de elementos corresponden a los atributos de la fuente. Podemos elegir la tipografía y el tamaño de forma similar a como lo hacíamos en la ventana de propiedades. Para ello empleamos las listas desplegables “Fuente:”

y “Tamaño:”. De igual forma, podemos indicar el color de la fuente y si la queremos en negrita o en cursiva. El siguiente grupo de opciones se aplica al párrafo y solo está disponible si en “Aplicar a:” hemos escogido “Párrafo”. En el podemos escoger la alineación horizontal en la página y el formato de párrafo (si es un encabezado, un preformateado u otro). Además hay que reparar en el botón
que aparece junto a los estilos de fuente. Si lo pulsamos se abrirá toda una gama de opciones que podemos aplicar a la fuente seleccionada.

Una vez que pulsemos el botón “Aceptar”, el nuevo estilo HTML estará disponible para usarlo cuando lo deseemos. Si queremos eliminar de la lista alguno de los estilos, lo seleccionaremos con el ratón y pulsaremos el botón que se encuentra abajo a la derecha de la ventana de estilos HTML.

También podemos hacer doble clic sobre alguno de los estilos y se abrirá un cuadro de diálogo como el anterior, de nombre “Definir estilo HTML”, que nos permitirá editar el estilo elegido.

2.4. LA VENTANA DE ESTILOS CSS

Esta ventana se refiere a las llamadas Hojas de Estilo en Cascada. Se obtiene pulsando la tecla F/. También se puede obtener seleccionando el menú “Ventana y la opción “Estilos CSS”. Otra forma de obtenerla es pulsando el icono en el mini lanzador. La ventana de estilos CSS tiene un funcionamiento muy similar a la de estilos HTML, aunque con algunas diferencias debidas a su propia naturaleza, que vamos a ver aquí. El aspecto de la ventana es el siguiente:

Esta ventana permite establecer todas la características de apariencia de la página durante su ejecución. Dado que es una herramienta destinada a personalizar la página, estudiaremos su comportamiento y funciones en el capitulo de “Personalización”.

2.5. LA VENTANA DE PLANTILLAS

La ventana de plantillas permite definir ciertas regiones de la página no editables, de forma que, una vez construida la página, esas zonas no se puedan modificar, para evitar accidentes. La ventana de plantillas tiene el siguiente aspecto:

Como ves, aparece vacía. Esto se debe a que, a priori, no hay plantillas definidas. Además, se da la circunstancia de que las plantillas solo pueden usarse cuando hay un sitio definido. Hasta ahora no hemos definido sitios web. Solo hemos visto el comportamiento de algunas herramientas sobre una página sin nombre, aislada. Mas adelante hablaremos de sitios completos y veremos como funciona esta herramienta.

2.6. LA VENTANA DE BIBLIOTECA

Esta ventana se usa para contener elementos comunes a todas las páginas de un sitio. Por ejemplo, un fondo. Cuando se cambie ese fondo en la ventana de biblioteca, el cambio repercutirá a todas las ventanas del sitio. Su aspecto es el siguiente:

Por la misma razón que en el caso anterior, hablaremos de ésta ventana durante el desarrollo de sitios.

2.7. LA VENTANA DE MARCADOR

Esta ventana guarda un histórico de los distintos comandos y acciones que se han ejecutado durante nuestra sesión con Dreamweaver. Tiene un aspecto similar al siguiente:

En la ventana vemos varias líneas que representan cada una de las acciones realizadas. En la parte izquierda vemos un mando deslizante. Si lo enganchamos con el puntero del ratón y lo subimos hacia arriba, veremos como en la ventana de edición se van deshaciendo cada uno de los pasos que recorremos en la ventana de marcador. A su vez, en la ventana de marcador, estos pasos aparecen cubiertos por una sombra gris.

Aparte de esto, podremos seleccionar un conjunto de pasos con el ratón. Para ello pondremos el ratón sobre el primer paso a seleccionar, pulsaremos el botón izquierdo y lo arrastraremos hasta donde queramos extender la selección. Los pasos seleccionados aparecen resaltados como en la imagen de la derecha. Ahora podemos pulsar en el botón de copia que tenemos en la parte inferior y el total de los pasos seleccionados se copia al portapapeles. Si ahora nos vamos al menú “Edición” y elegimos “Pegar”, los pasos del

portapapeles se copian al final de la ventana marcador... y se ejecutan al final de lo que tengamos editado como documento. Eso nos permite reproducir un conjunto de pasos durante la edición. ¿Qué hacemos si queremos reproducir unos pasos sin copiarlos al portapapeles? Imagina que el portapapeles lo tienes ocupado con otra cosa y no quieres usarlo para esto. Pues muy fácil. Seleccionas con el ratón los pasos que deseas reproducir, como hiciste antes. En lugar de usar el botón de copiar al portapapeles, pinchas en el botón
. Solucionado. Pero ¿Y si deseas guardar esa selección de pasos como un comando único? Por ejemplo, imagina que quieres guardar la selección para usarla otro día, en otra página. También puedes hacerlo. Seleccionas el grupo de pasos deseados con el ratón; a continuación pinchas en el botón . Se te abrirá un cuadro de diálogo que te preguntará con que nombre deseas guardar el conjunto de pasos. Le asignarás un nombre, como si fuera un comando de tu elección. A partir de ese momento, cada vez que quieras ejecutar ese conjunto de pasos, solo tienes que pinchar en el menú “Comandos”. Al final del menú aparecerá el nombre con el que grabaste tu secuencia de pasos. Pínchala y se ejecutará como si fuera un comando mas de Dreamweaver.

2.8. LA VENTANA DE MARCOS

La ventana de marcos nos muestra una representación de los marcos que tengamos en la pantalla. Por ejemplo, así:

Esta es la ventana de marcos que nos aparece si nuestra ventana de edición está dividida en tres marcos: uno superior, uno a la izquierda y un principal a la derecha. Como vemos, a los marcos Dreamweaver les asigna un nombre por defecto. En este caso les ha llamado topFrame, leftFrame y mainFrame. Bien. Pues seleccionemos con el cursor uno de los marcos en la ventana de marcos y vemos dos cosas. Por una parte, el nombre del marco aparece resaltado. Por otra parte, y esto es lo realmente importante, Tenemos a la vista la ventana de propiedades de marco, referida al marco seleccionad. Veamos en detalle que podemos controlar. La ventana de propiedades de marcos tiene el siguiente aspecto:

En la casilla “Marco” es donde estableceremos el nombre del marco, con el que se le identificará luego para los enlaces. En la casilla “Origen:” Estableceremos el nombre del fichero que contiene la página que se cargará por defecto en el marco. Si no recordamos el nombre o la ruta, podemos encontrarla pinchando en el icono . En la casilla “Bordes:” estableceremos si queremos que el marco tenga los bordes visibles o no. En la casilla “Desplaz.” seleccionaremos si queremos que el marco tenga barras de desplazamiento, que no las tenga, o que solo las tenga si son necesarias. En marcos que vayan a contener cabeceras o índices, no debería de ser necesario el uso de barras de desplazamiento, y no deberían existir. En marcos que vayan a tener contenidos, es posible que si resulten necesarias. La casilla de verificación “Mismo tamaño:” indica que el usuario no podrá re-escalar los marcos durante la ejecución. Si el diseño es bueno, el usuario no tiene porque re-escalar los marcos, así que esta casilla la dejaremos activada. La casilla “Color borde:” permite definir el color del borde. Las casillas “Ancho del margen” y “Alto del margen” se refieren a los márgenes izquierdo y superior que separan los contenidos de los bordes del marco. Con todo esto, podemos configurar completamente cualquier estructura de marcos. Además vemos que la ventana de propiedades tiene los iconos de ayuda y Quick Tag Inspector de cualquier otra ventana de propiedades.

2.9. LA VENTANA DE CAPAS

Esta ventana se obtiene pulsando la tecla F-11, o bien seleccionando el menú “Ventanas”, opción “Capas”. Sirve como pauta de referencia de las capas que incluye nuestra página, así como para el control de las mismas. Tiene el siguiente aspecto:

En el ejemplo estamos usando dos capas, aparte de la propia ventana normal de edición. Estas capas han sido insertadas usando el botón de la ventana de objetos comunes. En la ventana de capas, así como en la ventana de propiedades de capa, se puede establecer el comportamiento inicial de la capa aunque, como ya veremos, este comportamiento, al menos en parte, se podrá modificar en tiempo de ejecución mediante lo que se conoce como “Líneas de Tiempo”. Hablaremos de eso mas adelante.

Lo primero que observamos en la ventana de capas es
. Si activamos esta casilla de verificación, no podremos situar las capas de forma que se solapen unas a otras. Cada una tendrá que estar situada en su propia zona de la página. Recuerda que, para mover una capa, la seleccionas y arrastras el cuadradito que aparece en la parte superior izquierda de la capa.

Lo siguiente que vemos en la ventana de capas es una barra que encabeza la lista de capas. Tiene tres zonas, así:
. La primera, con un icono que representa a un ojo abierto, es un botón. Si lo pulsamos, aparecerá, al lado de cada capa en la lista un ojo, que estará abierto si la capa es inicialmente visible; estará cerrado si la capa está, inicialmente, oculta. Pulsando sobre el ojo de la lista que aparece a la izquierda del nombre de una capa, conmutaremos su estado inicial. Además, si pulsamos el ojo del encabezamiento, veremos que todas las capas adquieren el mismo estado (visible o escondida).

La etiqueta “Nombre:” nos indica el nombre de cada capa. Por defecto son “Layer1”, “Layer2”, etc.

La columna encabezada como “Z”, se refiere al índice Z de la capa. Este índice corresponde con el eje Z de un sistema de coordenadas cartesianas. Así pues, una capa de índice Z=2 está por encima (mas cerca del usuario, por así decirlo) que una capa de índice Z=1. Como es lógico, además en cada capa podemos establecer unos contenidos, simplemente introduciendo el cursor dentro de la capa y escribiendo o insertando los elementos deseados.

Sobre la ventana de capas podemos seleccionar la línea correspondiente a una de ellas con el ratón, de forma que aparezca resaltada, de la siguiente manera:
. Con eso se activará (si está disponible) la ventana de propiedades de capa. Tiene el siguiente aspecto:

En la casilla que aparece debajo de “ID de capa”, establecemos el nombre de la capa seleccionada.

En las casillas “Iz.” y “Sup.” Establecemos la distancia de la capa a los límites izquierdo y superior de la página. En las casillas “An.” Y “Al.” Establecemos la anchura y altura de la capa. Estas cuatro medidas pueden estar expresadas en píxeles (px), picas (pc), milímetros (mm), centímetros (cm), pulgadas (in) o porcentaje del tamaño de la página (%). Como vemos en el ejemplo en detalle
la medida se expresa con el número deseado y el indicativo de unidades elegidas todo seguido, sin espacios, comas, etc.

En la casilla “Im. Fondo” introduciremos el nombre y la ruta relativa del fichero que contiene la imagen que deseamos para el fondo. Si desconocemos el nombre del fichero o su ruta, pincharemos en el icono para localizarlo.

En la casilla “Vis.” Aparece una lista desplegable. Al pulsarla obtendremos los posibles estados iniciales de visibilidad de la capa. Estos son: Visible (visible), Oculta (hidden), Heredada (inherit) y Predeterminado (default). Una capa visible se verá en tiempo de ejecución, hasta que la página indique lo contrario en las líneas de tiempo. Una capa oculta no será visible hasta que se indique lo contrario. Una capa con visibilidad heredada tendrá la misma propiedad de visibilidad que su capa padre. Una capa padre es la que contiene a otra capa; a su vez la capa contenida se llama capa derivada. El valor default es interpretado por los navegadores como inherit.

La casilla “Col.” Especifica el color de fondo de la capa. Pulsando en el icono accedemos a la paleta de colores para escoger uno. A la derecha del icono aparece la notación hexadecimal del color elegido.

En la casilla “Etiqueta:” contamos con una lista desplegable para escoger con que etiqueta de DHTML se gestionará la capa. Las opciones son DIV y SPAN para el navegador Microsoft Internet Explorer y las etiquetas LAYER e ILAYER para el navegador Netscape Navigator. Dado que Explorer está mas difundido y que las etiquetas DIV y SPAN también son soportadas (en teoría, al menos) por Netscape, intentaremos desarrollar con una de estas dos nuestras capas.

A continuación vemos la casilla “Desb.” (Desbordamiento), con una lista desplegable para elegir que acción realizar con la capa si en algún momento de la ejecución el contenido de la capa supera el tamaño de la misma. Las posibles opciones son: Visible (la capa se hace mas grande, hacia abajo y a la derecha, para que se vea todo su contenido); Hidden (no se puede ver el contenido que excede de los límites de la capa); Scroll (añade barras de desplazamiento a la capa, independientemente de que el contenido exceda o no el tamaño de la misma); Auto (añade barras de desplazamiento a la capa si el contenido excede del tamaño de la misma).

La casillas “Rec” (Recorte) sirven para determinar una zona visible dentro de una capa oculta.

Con esto tenemos totalmente definidas nuestras capas (al menos, al inicio de la ejecución de la página, tal como hemos mencionado anteriormente).

2.10. LA VENTANA DE COMPORTAMIENTOS

La ventana de comportamientos sirve para asignarle a un objeto de la página (una imagen, cadena de texto, párrafo, e incluso toda la página) unas acciones asociadas a eventos. Podemos determinar, por ejemplo, que, al cargarse la página (evento onLoad) se active un fichero de sonido. O que al arrimar el puntero a una imagen (evento onMouseOver) se abra una nueva ventana con la carga inmediata de otra página. En realidad podemos generar casi cualquier comportamiento que seamos capaces de imaginar. Estos comportamientos están constituidos por bloques de código Javascript que Dreamweaver genera automáticamente. Una cosa al respecto. En teoría, el código Javascript funciona igual de bien con Netscape que con Explorer. De hecho, Dreamweaver contempla la posibilidad de generar código Javascript para ambos navegadores. Después de todo, el propio lenguaje Javascript es un invento de Netscape, así que no debería de haber problemas para que funcionara. Bueno. Eso es la teoría. A la hora de la verdad, la experiencia nos da una patada en el trasero mientras, con voz socarrona, exclama: “¡Bienvenido al mundo real, hijo!”. En realidad Netscape da problemas no solo con los comportamientos, sino con las capas, las tablas, y muchas otras cosas. Mi consejo es que diseñes tus páginas asegurándote de que funcionan con Explorer. Si, además, logras que funcionen con Netscape, cuélgate una medalla; te la has ganado. Si no, tampoco pierdas el sueño. Y si piensas que este consejo es muy partidista reflexiona un instante: ambos navegadores son gratuitos. Sin embargo, la inmensa mayoría de los internautas se decantan, antes o después, por Explorer. ¿Por qué será? Bien. Tras esta breve reflexión, echémosle un vistazo a la ventana de comportamientos:

Lo primero que ves es la barra de título de la propia ventana. En ella observa que aparece el tag <p>.
Esto significa que está preparada para definir comportamientos sobre un párrafo de texto. Si aparece el tag <body> podrás definir comportamientos que afecten a toda la página. Si tienes seleccionada una imagen aparece el tag <img> y puedes definir comportamientos relativos a esa imagen. El objeto que tengas seleccionado mostrará su tag en la barra de título de esta ventana y los comportamientos se aplicarán con respecto a dicho objeto. Como sabes, ningún objeto soporta todos los eventos posibles que Javascript reconoce.

Lo siguiente que ves en la ventana de comportamientos es la barra de herramientas. En ella ves una lista desplegable como la de la derecha en la que puedes seleccionar la familia de navegadores para la que quieres diseñar tus comportamientos. Sólo recuerda lo que te dije a la hora de elegir el navegador.

Además ves el icono que te permite generar un nuevo comportamiento. Cuando lo pulsas, se abre un menú emergente en el que se te permite elegir un comportamiento. No todos los comportamientos está disponibles para todos los objetos. Los que no estén disponibles para el objeto que tengas seleccionado aparecen atenuados, y no los puedes elegir. La figura de la izquierda te muestra la lista de comportamientos. En ella puedes apreciar los que están disponibles y los que no. Esta lista se ha obtenido teniendo seleccionado el <body>. Si tienes seleccionado otro objeto, la lista será diferente. Fíjate que, al final de la lista, tienes una opción que pone “Obtener mas comportamientos”. Esta opción te permite conectarte a la página de Macromedia para descargarte una ampliación de la lista de comportamientos disponibles. Observa que, además, algunas opciones tienen una flechita a la derecha, lo que indica que, a su vez, incluyen mas opciones.

Vamos a ver un ejemplo de la creación de un comportamiento. En concreto, se trata de lo siguiente. Tenemos una imagen y queremos que, al pasar el ratón por encima, cambie a otra imagen. Este ejemplo es particularmente interesante, porque nos obliga a crear dos comportamientos para realizar correctamente la acción. Por una parte deberemos establecer que, a la carga de la página, se cargue en memoria, en segundo plano, la imagen que aparecerá, en lugar de la original, al pasar el ratón. Esta imagen no es visible tras la carga de la página. Insisto; sólo aparecerá cuando pasemos el ratón sobre la imagen que debe ser reemplazada. El cargar la imagen en memoria, aún cuando todavía no es necesario visualizarla, se debe a que, de ésta forma, el cambio se produce inmediatamente cuando el usuario lo solicite. Por otra parte deberemos tener la imagen original insertada en la página y asignarle un comportamiento tal que, al pasar el ratón, se remplace por la imagen que hay en memoria.

Lo primero que debemos hacer es seleccionar toda la página para que, en la barra de título de la ventana de comportamientos aparezca el tag <body>, tal como muestra la imagen que vemos aquí:
. A continuación pulsamos el botón , con lo que se abre el menú emergente que muestra los comportamientos disponibles. En el seleccionamos
y ejecutamos la opción haciendo clic. Se abrirá el siguiente cuadro de diálogo:

En el vemos que podemos hacer una carga previa de varias imágenes para tenerlas en memoria. Para ello solo tendríamos que introducir el nombre de una de ellas (incluyendo la ruta relativa) en la casilla de “Archivo de origen de la imagen:” y pulsar el botón , con lo que la imagen se añadirá a la lista. En nuestro caso solo vamos a hacer una carga previa de una imagen. La imagen se llamará foto_nueva.jpg. Suponemos que está en la carpeta donde estamos trabajando, por lo que no es necesario especificar ninguna ruta. La casilla del nombre de archivo quedará así:
. Hecho esto, pinchamos en el botón “Aceptar”. En la ventana de comportamientos aparece una línea que indica que acabamos de programar la carga previa de imágenes. Debe aparecer resaltada. Si no es así, selecciónala con el ratón. Deberá tener el aspecto que puedes ver a continuación:
. A la izquierda aparece el evento onLoad, que indica que el comportamiento se producirá al cargar la página. A la derecha nos indica que el comportamiento programado es una carga previa de imágenes. Distintos objetos y distintos comportamientos se pueden asociar mediante distintos eventos. No es objetivo de este temario dogmatizar a fondo sobre la Programación Orientada a Objetos, aunque se mencionen algunas cosas importantes. Presuponemos que tú, avispado lector, ya estás familiarizado con estos conceptos.

Si pulsas sobre el botón obtendrás un menú emergente en el que puedes cambiar el evento si lo deseas. Este menú tiene el aspecto que ves a la izquierda y refleja una lista de los eventos que se hallan disponibles para el objeto <body> (recuerda que este comportamiento se ha programado para toda la página). Para otros objetos, la lista será diferente. Otros eventos pueden ser aceptados por el objeto body, pero son tan poco usuales que Dreamweaver no los contempla.

Bien. Ya tenemos programado este comportamiento. Ahora llega el momento de insertar la imagen original en nuestra página. En este ejemplo se llama foto_vieja.jpg y se halla también en la misma carpeta en la que estamos trabajando, por lo que no será necesario hablar de rutas. La insertaremos con el botón de la ventana de objetos comunes, que ya conocemos. Una vez insertada, la seleccionaremos y dispondremos de la ventana de propiedades de imagen que también vimos anteriormente.

En la casilla “Imagen”, donde, además, aparece el tamaño del archivo de imagen en el disco, teclearemos una etiqueta identificativa para la imagen.

En nuestro caso esta etiqueta será vieja. Esto es imprescindible siempre que a una imagen se le vayan a asignar comportamientos, y muy aconsejable en cualquier caso.

Una vez asignado un identificativo a la imagen, y teniéndola todavía seleccionada, volvemos a la ventana de comportamientos. Ahora, en la barra de título, aparece el tag <img>, lo que indica que el comportamiento que programaremos a continuación se realizará sobre un objeto de imagen (en concreto sobre el que está seleccionado, foto_vieja.jpg). Así es como se ve:
. Bien. Observa que la lista de comportamientos aparece vacía. Ya no se ve el comportamiento “Carga previa de imágenes” que habíamos programado anteriormente. Esto se debe a que se programó sobre el objeto body, y ahora estamos trabajando sobre un objeto img. Pincha en el botón para crear un comportamiento para este objeto. En el menú emergente selecciona
y haz clic. Se te abrirá un cuadro de diálogo como el siguiente:

En primer lugar ves una casilla con una lista desplegable rotulada como “Tipo de objeto”. Deberás seleccionar IMG, puesto que el comportamiento se va a aplicar sobre una imagen y este cuadro de diálogo es común a otros objetos.

A continuación en la casilla “Objeto con nombre:” debe aparecer esto
. En caso de que no sea así, despliega la correspondiente lista y ajusta el contenido de la casilla.

Junto al rótulo “Propiedad:” ves dos botones. El primero de ellos pone “Seleccionar:” y te permite referirte a alguna de las propiedades mas habituales del objeto que estás tratando. El segundo botón pone “Introducir:”. Lo pincharemos cuando queramos definir a mano una propiedad que no nos aparezca en la lista desplegable que hay junto al botón “Seleccionar:”. En nuestro caso elegimos “Seleccionar:” y en la lista desplegable fijamos src (la única propiedad predefinida para este objeto). Como sabes, src es un parámetro del tag <img> que hace referencia al archivo de la imagen. La casilla correspondiente tiene ahora este aspecto:
. A continuación, en la casilla nuevo valor, introduciremos el nombre, con la ruta relativa si fuese necesario, del archivo por el que vamos a cambiar la imagen original. Este archivo es el que anteriormente habíamos cargado en memoria. Como está en la misma carpeta en la que estamos trabajando, en este caso no es necesario escribir una ruta. La casilla tiene ahora este aspecto:
. Por último pulsamos el botón “Aceptar”. Ahora el comportamiento que acabamos de programar aparece en la ventana de comportamientos. Vamos a seleccionarlo con el ratón para resaltarlo (si no lo está ya). Debes verlo así:
. El evento que aparece es onMouseDown, pero nosotros queremos que la imagen se cambie al pasar el ratón, es decir, mediante el evento onMouseOver. Pulsa en el botón y, en el menú emergente que aparece, selecciona el evento deseado. Ahora la línea correspondiente al comportamiento que hemos programado aparece con el nuevo evento, que será el que active el cambio de imágenes:
. Ya solo nos queda grabar la página en el disco. Para ello iremos al menú “Archivo” y a la opción “Guardar como...”, propias de cualquier aplicación Windows. Le daremos un nombre al archivo y lo guardaremos. Aquí es importante asegurarnos de que se guarde en la carpeta donde están las imágenes que hemos utilizado, ya que, si recuerdas, no hemos establecido para las mismas ninguna ruta relativa. Si ahora ejecutamos la página en el explorador, veremos que, al cargarse, nos aparece la imagen correspondiente a foto_vieja.jpg y, al pasar el ratón por encima, aparece la imagen correspondiente a foto_nueva.jpg. Al quitar el ratón ya no cambia la imagen, sino que permanece foto_nueva.jpg. Esto se debe a que no hemos programado otro comportamiento que restaure la imagen original. Si lo deseamos, deberemos programar un comportamiento impulsado por el evento onMouseOut.

Una consideración final. Si foto_nueva.jpg tiene unas dimensiones, en píxeles, diferentes a la imagen original, se adaptará, automáticamente, al tamaño de ésta, con el fin de no descuadrar la página.

3. LOS MENÚS DE DREAMWEAVER

Dreamweaver cuenta con los menús típicos de cualquier aplicación Windows (Archivo, Edición, Contextual de pantalla, etc), aunque, en el caso de Dreamweaver, éstos cuentan con algunas opciones específicas. Además, implementa sus propios menús. Vamos a echarle un vistazo a estos menús, con el fin de familiarizarnos con ellos.

En las siguientes páginas veremos las distintas posibilidades de uso que nos ofrece Dreamweaver a través de la barra de menús. Muchas de estas posibilidades están disponibles a través de las Ventanas de Propiedades de distintos objetos. Otras, en cambio, no.

La barra de menús de Dreamweaver tiene el siguiente aspecto:

3.1.EL MENU CONTEXTUAL

Este menú se obtiene pulsando con el botón derecho del ratón sobre el área de edición de Dreamweaver. Según pulsemos en una parte “vacía” (sin contenidos) de la página, o en un objeto seleccionado de la misma, estarán disponibles unas u otras opciones. La figura de la izquierda corresponde a las opciones que se hallan disponibles en el caso de pulsar sobre una zona vacía. Las opciones que tiene un símbolo a la derecha despliegan otro menú al seleccionarlas, como es típico en todas las aplicaciones Windows. En el caso de , se puede elegir uno de los seis encabezamientos predefinidos en HTML, así como la aplicación del pre-formateado, o establecer un párrafo de texto. En el caso de se puede iniciar una lista sin numerar, una lista numerada, una lista de definiciones, o establecer sangrías. La se refiere a la alineación de los elementos seleccionados (o los nuevos que se inserten) con respecto a la página (izquierda, centro o derecha). La permite establecer la tipografía de la escritura

de la misma forma que lo hacíamos desde la Ventana de Propiedades. El sub-menú de permite determinar como queremos la letra (Negrita, cursiva, etc). El apartado
permite fijar los mismos estilos de presentación del texto que podemos establecer desde la Ventana de Estilos HTML, tal como hemos comentado anteriormente.

La opción funciona de manera similar a la Ventana de Estilos CSS; hablaremos de ese tema en el capítulo de “Personalización”. La opción
permite utilizar un mapa de zonas editables y zonas bloqueadas. Hablaremos mejor de este concepto cuando estudiemos a fondo el funcionamiento de la Ventana de Plantillas. La opción
abre una ventana como la de la imagen. En ella vemos la lista desplegable que se genera automáticamente con todos los posibles tags de HTML. Podemos

elegir cualquiera de ellos y añadir los parámetros que consideremos necesarios. De esta forma el código tecleado se insertará en la página. Justo en el punto donde estuviera el cursor a

la hora de abrir el menú emergente. Es una forma de flexibilizar aún mas, si cabe, el uso de Dreamweaver.

La opción
abre una ventana similar a la anterior, donde es

posible cambiar, manualmente, los parámetros generales de la

página.

Las opciones
,
y
sólo se hallan disponibles en el caso de que haya una selección. Las dos últimas, además, solo estarán disponibles si en la selección ya existe un vínculo.

La opción
abre un sub-menú que permite establecer el marco contra el que se dirigirá un vínculo. Por supuesto, esto solo es posible si nuestra página emplea marcos.

Las opciones , y son funciones de edición idénticas a las de cualquier otra aplicación en entorno Windows, por lo que no entraremos en mas detalles.

La opción
permite editar unas notas de diseñador asociadas a esa página, de forma similar a como hacen los escritores de libros con las llamadas “concordancias”. Son notas para el diseñador, que no estarán disponibles para el usuario. Para poder usar esta opción es necesario que el documento forme parte de un sitio que tenga habilitadas las Design Notes. Hablaremos de esto en el capítulo de “Creación de un Sitio Web”.

La opción
permite establecer todas las características generales de la página, como el color o la imagen de fondo, el color de los vínculos y el texto, etc. Al seleccionarla se abre el siguiente cuadro de diálogo:

En él podemos establecer las mencionadas características. En la casilla
teclearemos el título de la página. Este será el que aparezca en la barra de título del navegador en tiempo de ejecución. En la casilla
indicaremos el nombre del archivo que contiene la imagen que queremos como fondo. En principio, esta imagen se repite en mosaico, hacia la derecha y hacia abajo, para rellenar la ventana de navegación, aunque mas adelante, en el capítulo de “Personalización” veremos como podemos redefinir el comportamiento de la imagen de fondo. A continuación tenemos cinco casillas de selección de color que permiten establecer los colores del fondo de la página, del texto y de los tres posibles estados de un vínculo. Las casillas
y
permiten establecer la distancia, en píxeles, entre los contenidos de la página y los bordes izquierdo y superior, respectivamente, de la ventana de navegación. Solo Internet Explorer reconoce estas separaciones. Para que sean operativas también en Netscape las deberemos establecer, además, en las casillas
y
. Estos márgenes (tanto los de un navegador como los de otro( no se reflejan durante la edición en Dreamweaver, siendo necesario, para visualizarlos, usar la
(ya veremos, un poco mas adelante, como realizar esta operación). La casilla
permite elegir, en una lista desplegable, la codificación de caracteres para la página, de forma que resulte posible escribir páginas que muestren caracteres cirílicos, japoneses, chinos, coreanos, etc. Utilice Occidental (Latín 1) si su página está diseñada para lenguas de Europa Occidental. La casilla
permite indicar el nombre del fichero que queremos usar como imagen de rastreo en el diseño de nuestra página. Una imagen de rastreo solo es visible en tiempo de diseño, no en tiempo de ejecución, y se usa para tomar medidas de zonas donde colocar o no colocar nuestros contenidos. Además, y debido a su misión específica, una imagen de rastreo puede tener un cierto grado de transparencia, que estableceremos con el cursor deslizante de la parte inferior. Una vez establecidas las características de la página, pulsaremos el botón “Aceptar”.

3.2. EL MENÚ DE ARCHIVO

Este menú se obtiene en la barra de menús de Dreamweaver. Al desplegarlo se obtienen las opciones que puedes ver a la izquierda. Una vez mas, ves que algunas de ellas aparecen inhabilitadas en determinados momentos. Esto depende de las circunstancias y del entorno de edición en cada caso. En el primer grupo vemos las opciones típicas de , y . Además vemos algunas opciones propias de Dreamweaver. permite definir una nueva plantilla de zonas editables y bloqueadas. Dado que esta prestación solo está disponible para sitios web y nosotros estamos todavía haciendo un reconocimiento del funcionamiento de las páginas “sueltas”, hablaremos de este tema mas adelante. La opción solo estará disponible si nuestra página emplea marcos. En el segundo grupo vemos las opciones , y . La primera solo estará disponible si la página que

estamos editando ya ha sido guardada y, por tanto, tiene asignado un nombre de fichero. En caso contrario usaremos
. La opción
nos permite guardar la actual configuración de regiones editables y bloqueadas en un archivo de plantilla.

El siguiente grupo está especialmente destinado a su uso con páginas de marcos. La opción
actúa de la misma forma que la opción que vimos anteriormente, pero referida a la estructura de marcos que estemos editando en ese momento. Algo similar se puede decir de la opción
. Estas dos opciones guardan solamente la estructura de marcos que estamos editando, no las páginas de contenidos alojadas en dichos marcos. Para esto último usaremos la opción
. La opción se usa para volver a la última versión guardada de la página de marcos y de sus contenidos, descartando los últimos cambios efectuados.

El siguiente grupo está constituido, únicamente, por la opción
, que permite acceder a la gestión de notas del diseño. Hablaremos de esto durante el desarrollo de sitios.

El siguiente grupo tiene tres opciones destinadas a poder combinar los ficheros generados con Dreamweaver con ficheros procedentes de otras aplicaciones. La opción nos permite insertar en nuestra página editada con Dreamweaver un código XML a una plantilla, un código HTML procedente de Word o una tabla de datos externos. La opción permite convertir un mapa de regiones editables a XML, exportar una hoja de estilos CSS (ya veremos como la creamos y/o editamos en el capítulo de “Personalización”) o exportar datos tabulares a otros formatos. La opción sirve para adaptar nuestra página a versiones anteriores de los navegadores. Dado que algunas de estas versiones no soportaban capas, se nos ofrece la posibilidad de convertirlas a tablas; como, además, algunas versiones no admitían las hojas de estilo CSS, también tenemos la posibilidad de convertirlas a formato HTML. En ambos casos se puede producir una pérdida de funcionalidad en la página, sobre todo si implementa estructuras complejas del uso de capas o CSS's, pero es la única manera de que funcione con navegadores antiguos.

El siguiente grupo incluye tres opciones muy interesantes. La primera de ellas es la de
. Si la seleccionamos se nos muestra una lista de los navegadores que tenemos para elegir en cual de ellos queremos ver la página. Para que todo vaya correctamente, la página debe estar guardada en el disco. Además se nos ofrece la posibilidad de
, cuyo funcionamiento veremos en el capítulo de “Personalización”. La opción de
solo funciona cuando la página es parte de un sitio, por lo que hablaremos del tema en su momento. La opción
nos abre un cuadro de diálogo con la lista de los principales exploradores. En ella seleccionamos los que deseemos y se comprobará, de forma automática, si la/s página/s que tenemos en el área de edición pueden ejecutarse sobre los exploradores seleccionados. Al final se abre una ventana del explorador que tengamos configurado por defecto con un informe del resultado de la prueba. Si hay alguna instrucción en la/s página/s que no pueda ejecutarse adecuadamente, se nos informará de ello.

El siguiente grupo incluye la lista de las últimas páginas editada para que las podamos abrir de nuevo con un solo clic de ratón.

La última opción, , permite salir de Dreamweaver. Como cualquier aplicación Windows, si no hemos guardado nuestro trabajo, nos avisará de ello, dándonos la opción de hacerlo ahora.

3.3. EL MENÚ EDICIÓN

Este menú cuenta con las opciones típicas de cualquier menú de edición de cualquier aplicación para entorno Windows. Quizá nos llaman la atención el cuarto grupo. Las opciones y hacen referencia al anidamiento de los objetos de una página web según su nivel de jerarquía. Por ejemplo, si tenemos seleccionado un campo de un formulario y pinchamos en , quedará seleccionado todo el formulario. La opción habla por si misma: selecciona el total de contenidos de la página. La opción permite realizar modificaciones en la página con un editor distinto de Dreamweaver. Para ello, la página deberá estar guardada en disco. Además,

tendremos que haber definido cual es el editor externo que vamos a usar. Lo haremos en el capítulo de “Personalización”, donde veremos, entre otras cosas, el funcionamiento de la opción
de este menú.

3.4. EL MENU VER

Este menú permite determinar que características de la ventana de edición serán visibles y cuales no. Las que aparecen con una marca a la izquierda están visibles. Las demás no lo están, de forma que funcionan internamente sin que el usuario se percate de su presencia. Las opciones que aparecen marcadas en la imagen de la izquierda constituyen la configuración que el autor, modestamente, ha encontrado mas cómoda para trabajar en la mayoría de los casos, aunque cada usuario puede activar y desactivar libremente las que desee.

La opción
muestra, encima del área de edición, una zona en la que aparecen unos iconos relativos a cada línea específica de cabecera de la página, en la siguiente forma:

En la imagen-detalle de la izquierda podemos apreciar la barra de fondo gris que aparece sobre la Zona de Edición. En ella vemos dos iconos que representan otros tantos comandos que nuestra página tiene en la cabecera (es decir, dentro de Head). El primero se refiere al tag

<TITLE> y el segundo se refiere a un tag <META> que especifica la codificación de la página (Europeo occidental, cirílico, coreano, etc.). Si seleccionamos cualquiera de ellos con el ratón y tenemos visible la Ventana de Propiedades, ésta cambia su apariencia para permitirnos modificar el tag seleccionado. Por ejemplo, si seleccionamos el tag
que pertenece al tag <TITLE>, la Ventana de Propiedades tendrá el siguiente aspecto:

La siguiente opción,
se refiere a los objetos insertados desde la ventana de Objetos Invisibles como, por ejemplo, los puntos de anclaje con nombre. Si está desactivada, estos elementos no serán visibles en tiempo de edición.

La opción
se refiere a los bordes de las capas activas que contiene el documento. La diferencia entre tenerla activada o desactivada solo se nota si la capa tiene una imagen de fondo.

La opción
activada permite que, si estamos usando una tabla de borde 0 se vea, en tiempo de edición, un punteado en el lugar que ocupan los bordes. Por supuesto, este punteado no será visible en tiempo de ejecución. Si nuestras tablas tiene un borde distinto de 0, no hay diferencia entre que esté activada o desactivada esta opción.

La opción
funciona de manera similar. Si los marcos tienen unos bordes de tamaño 0 y esta opción está activada, aún serán visibles en tiempo de edición. Cuando estamos usando marcos y queremos activar o desactivar esta opción el cursor debe estar situado sobre uno de los marcos, no sobre el borde, antes de pinchar en el menú “Ver”.

La opción
permite que se visualicen los mapas de imágenes como un sombreado de color azul cyan, semitransparente, encima de la imagen en la que estén situados. Si esta opción está desactivada los mapas de imágenes no serán visibles. Por supuesto, en cualquier caso, los mapas solo se podrán hacer visibles en tiempo de diseño.

La opción permite mostrar una reglas como las que se aprecian en la imagen-detalle de la derecha. Estas reglas están situadas en los bordes superior e izquierdo del área de edición y sirven para ver la posición o el tamaño exacto de los objetos de la página. Además podemos hacer que estas reglas aparezcan graduadas en píxeles (como en el

ejemplo, en centímetros o en pulgadas, según nos interese.

La opción muestra una cuadrícula en la pantalla para poder colocar con mayor precisión los objetos. Esta cuadrícula interesa, sobre todo, al uso de capas. La cuadrícula incluye el comando , que abre un cuadro de diálogo como el que vemos en la figura de la derecha. En él podemos establecer todas las

características de la cuadrícula y el comportamiento de las capas con respecto a la misma. La casilla
determinará si debemos de verla en tiempo de diseño o no. No debemos confundir el hecho de que sea visible con que esté o no activada. La cuadrícula puede estar activada aunque no sea visible. La cuadrícula estará activada si lo está la casilla
. Con
podremos determinar el tamaño de cada celdilla de la cuadrícula, expresando el número de unidades y el tipo (píxeles, pulgadas o centímetros). La casilla
nos permitirá fijar el color de la rejilla. Además, esta rejilla podremos visualizarla con líneas continuas o punteadas, como nos indican los botones de opción que hay a continuación. Por último la casilla
permite fijar el tamaño de los “saltos” que darán las capas al moverlas o escalarlas sobre una rejilla. En el ejemplo, si movemos una capa, se moverá de 50 en 50 píxeles. Si la re-escalamos crecerá o disminuirá también de 50 en 50 píxeles.

Volviendo al menú “Ver”, la opción
funciona de igual modo que la opción homónima de la Ventana de Capas.

La opción
permite ajustar la posición de una imagen de este tipo con respecto a los bordes de la página o a un objeto seleccionado.

La opción permite reproducir, en tiempo de diseño, los plug-ins que haya insertados en la página. Para ello es necesario que el reproductor de plug-ins (de video o audio) se encuentre en la carpeta Configuration/Plugins.

La opción
se refiere a que se visualice o no la barra de estado en la parte inferior de la ventana de navegación. Analizaremos esta barra después de terminar con los menús.

3.5. EL MENÚ INSERTAR

Este menú contiene las opciones necesarias para insertar los mismos objetos que veíamos en la ventana de objetos, por lo que no necesita un estudio específico. La opción
que aparece al final, nos conecta con la página de Macromedia con el fin de descargar mas objetos que podamos incorporar a la lista. Sin embargo, para ello es necesario ser usuario registrado.

3.6. EL MENU MODIFICAR

De la misma forma que el anterior menú se comportaba como la Ventana de Objetos, este se comporta como si fuera la Ventana de Propiedades de los distintos objetos. La única opción nueva que vemos aquí es
que, a su vez, tiene dos opciones complementarias. La primera de ellas es
. Convierte las tablas que tengan contenidos en capas (cada celda en una capa) que pueden manejarse de forma independiente. Cuando seleccionas esta opción se abre un cuadro de diálogo que te

permite configurar algunos aspectos de las capas. Tiene el aspecto que ves a la izquierda. Las opciones que aparecen ya las conoces. La única que puede inducir a confusión es la segunda, . Se refiere a la Ventana de Capas que ya

conoces.

La herramienta complementaria es
. Hace exactamente eso. Convierte todas las capas en celdas de una única tabla, respetando sus posiciones en la página y creando para ello las celdas adicionales que sean necesarias. Esta vez el cuadro de

diálogo que aparece es algo mas complejo que el anterior. A la derecha puedes verlo. Está dividido en dos grupos: y . Este es el segundo y funciona igual que en el caso anterior. El primero muestra dos botones

de opción para especificar la estructura de la tabla “en fino”. Si elegimos el botón
se crea una celda por cada capa, mas las celdas adicionales necesarias para conservar el espacio entre capas. Si elegimos el botón
especifica que los bordes de las capas deben alinearse si se sitúan a la distancia especificada en píxeles (o menor) en la casilla
. De esta forma, es habitual que se generen menos celdas vacías. La casilla de verificación
rellena la última fila con GIF transparentes. Como sabes, la última fila de una tabla da lugar a que, en ocasiones, se descuadre toda la tabla. De esta forma la tabla se visualizará correctamente en todos los navegadores (al menos en teoría; en la práctica nadie puede garantizar lo que ocurrirá si se usa Netscape Navigator). La casilla
habla por sí misma. Si está activada, la tabla aparecerá centrada horizontalmente en la página.

Esta herramienta tiene una limitación. No funciona si hay dos o mas capas superpuestas.

3.7. EL MENU TEXTO

Este menú contiene las mismas opciones que la Ventana de Propiedades de un párrafo de texto, por lo que no necesita un estudio específico, toda vez que este temario está destinado a ser eminentemente pragmático y no tiene sentido que nos detengamos en redundancias innecesarias.

3.8. EL MENU COMANDOS

El menú de comandos contempla todas las posibilidades necesarias para la creación y uso de “macros” (conjuntos de acciones que pueden repetirse). Acuérdate de lo que veíamos en el apartado de la Ventana de Marcador. La primera línea es . Si la eliges, las operaciones que realices a partir de ese momento

quedarán grabadas en la memoria. Además, para recordarte que estás grabando un comando, el puntero del ratón aparece con un icono que recuerda a una cinta de cassette. Lo entenderás mejor con un ejemplo: Abre el menú de comandos y pulsa en la línea
. Se cerrará el menú de comandos. A continuación escribe, en el área de edición, la frase Esto es una prueba de grabación de comandos y pulsa la tecla Enter. Ahora abre de nuevo el menú de comandos. La línea
ha sido sustituida por otra diferente:
. Elígela. Vuelve a abrir el menú de comandos. La primera línea ha vuelto a su apariencia original, pero ahora aparece disponible la segunda línea del primer grupo,
, que, hasta ahora aparecía inhabilitada. Elige esta opción y verás como en la zona de edición se escribe, automáticamente, la frase Esto es una prueba de grabación de comandos y se inserta un retorno de carro duro, es decir, se repiten los mismos pasos que diste desde que iniciaste la grabación. La línea
abre un cuadro de diálogo donde aparece una lista de los comandos que se grabaron desde la Ventana de Marcador (grupos de comandos grabados con nombre en el disco). En esa lista se puede eliminar cualquiera de los ficheros de comando. La eliminación es definitiva (no puede deshacerse).

La opción
te conecta con el sitio web de Macromedia con el fin de que te descargues nuevos comandos para ampliar la funcionalidad de tu instalación de Dreamweaver. Obviamente es necesario que seas usuario registrado.

La opción
se usa para eliminar tags “vacíos”, combinar tags FONT anidados y, en general, depurar el código de la página en edición. Al seleccionar esta opción se abre el siguiente cuadro de diálogo:

En el vemos las posibilidades de configurar la depuración. El primer grupo está destinado a determinar lo que queremos eliminar de nuestro código.
se refiere a aquellos tags que carecen de contenido. Por ejemplo, <b></b> y <FONT COLOR="FF0000"></FONT> se consideran tags vacíos, mientras que no se considera vacía la etiqueta <b> en <b>un texto</b>. La opción
elimina todas las repeticiones de una etiqueta. Por ejemplo, en el código <b>Esto es lo que <b>realmente</b> quería decir</b>, las etiquetas B que rodean a la palabra "realmente" están repetidas y se eliminarían. La opción
elimina aquellos comentarios que no han sido insertados usando Dreamweaver. Por ejemplo, <!--begin body text--> se eliminaría, pero no <!-- #BeginEditable "doctitle" --> (porque se trata de un comentario de Dreamweaver). La opción
elimina los comentarios insertados por Dreamweaver. Por ejemplo, <!-- #BeginEditable "doctitle" --> sería eliminado, pero no <!--begin body text--> (porque no es un comentario de Dreamweaver). La eliminación de los comentarios de Dreamweaver convierte los documentos basados en plantillas en documentos HTML ordinarios y los elementos de biblioteca en código HTML normal. Mas adelante hablaremos de plantillas y bibliotecas, para comprender lo que realmente sucede. De momento nos basta saber que esta opción deberemos dejarla desactivada, salvo excepciones que veremos en su momento. Además contamos con la opción
que elimina los tags especificados en el campo de texto contiguo. Utiliza esta opción para eliminar tags personalizados insertados por otros editores visuales que no desea que aparezcan en el sitio (por ejemplo, BLINK). Separa los diversos tags mediante comas (por ejemplo, FONT, BLINK). En el segundo grupo tienes dos opciones. La opción
consolida dos o más tags FONT cuando éstos controlan el mismo rango de texto. Por ejemplo, <FONT SIZE="7"><FONT COLOR="#FF0000">big red</FONT></FONT> se cambiaría a <FONT SIZE="7" COLOR="#FF0000">big red</FONT>. La opción
muestra un cuadro de alerta con detalles acerca de los cambios realizados en el documento inmediatamente después de concluir la limpieza.

Volviendo al menú de comandos nos encontramos con
. Esta opción efectúa una depuración del código HTML de una página editada con Word. Al pulsarla se abre un cuadro de diálogo específico que nos pide que seleccionemos la versión de Word con la que se ha escrito la página. Este cuadro de diálogo tiene dos pestañas, “Básico” y “Detalladas”. La segunda pestaña, como su propio nombre indica, no es mas que una lista detallada de las opciones de la primera. En la imagen de la izquierda puedes ver

cuales son las posibilidades del menú “Básico”. Lo mas significativo es la lista desplegable de la parte superior que te permite escoger la versión de Word con la que fue editada la página inicialmente. Esto es importante ya que, en función de la versión empleada se aplicarán unos u otros filtros a la depuración.

Como ves, tiene algunas opciones en común con la limpieza “normal” de HTML y otras que son propias de Word. En la pestaña “Detalladas” vemos dos grandes grupos.

El primero se refiere a características muy específicas de Word. El segundo se refiere a las CSS que son introducidas al usar Word. Lo que si es importante, una vez mas, es que tengas bien seleccionada la versión adecuada de Word. Este temario no pretende ser, además, manual de Word, con lo que no entraremos en mas detalle acerca de los

aspectos específicos que Word introduce en un código HTML.

Una vez mas volvemos al menú de comandos y lo siguiente que hallamos es
. Esta opción se usa para lo siguiente. Entre los muchísimos problemas que da el navegador Netscape, se ha logrado detectar uno muy significativo. En páginas con tablas, capas, contenidos dinámicos, etc. Se produce un desordenamiento de los objetos al cambiar el tamaño de la ventana de edición. Para solucionar esto se introduce en la cabecera una pequeña rutina en código Javascript que se inserta y elimina pulsando en esta opción. La rutina en cuestión aparece transcrita a continuación. Como puedes ver es muy simple y lo único que hace es recargar la página después de que se haya producido un cambio de tamaño. No vamos a entrar en una descripción mas detallada de la misma porque, tal como dijimos en la introducción, entendemos que ya conoces el Javascript y lo manejas con soltura.

function MM_reloadPage(init) { //reloads the window if Nav4 resized

if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {

document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}

else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();

}

MM_reloadPage(true);

De vuelta una vez mas en el menú de comandos nos encontramos con la opción
. Esta opción está normalmente inhabilitada y solo se halla disponible si hay una imagen seleccionada. Permite editar la imagen con Fireworks y es necesario que la página en edición se encuentre guardada en disco.

La opción
sirve para crear una página de miniaturas de las fotografías contenidas en una carpeta, de modo que cada miniatura sea un vínculo a la fotografía en tamaño real. Esta herramienta utiliza Fireworks 3 o superior para crear las miniaturas y preparar las imágenes en tamaño real. Después genera la página de miniaturas con Dreamweaver. Por lo tanto, es necesario tener Fireworks 3 instalado en el PC. Si no está, nos avisa de ello y nos da opción a descargar una versión de prueba de la página de Macromedia. Una vez instalado Fireworks 3 en nuestro PC podemos seleccionar esta opción y veremos el siguiente cuadro de diálogo:

En el podemos ver varias casillas para suministrar información. En la casilla
introduciremos el nombre de nuestro álbum de fotos. Este titulo aparecerá centrado en la cabecera de la página con el tamaño de letra equivalente al “Encabezado 1”. A continuación vemos la casilla
. Podremos introducir mas texto que aparecerá debajo del título con el tamaño correspondiente a “Encabezado 4”. En la línea
podemos teclear información adicional que aparecerá debajo del sub-encabezamiento con el tamaño de letra que tenga la página definido por defecto. A continuación vamos a la casilla
, donde tecleamos la ruta de la carpeta que contiene las imágenes originales. Si no la conocemos, haremos clic en
para localizarla. En
teclearemos la ruta donde queremos que se guarden la imágenes de tamaño real y las miniaturas necesarias para realizar el álbum. También disponemos de un botón
. A continuación tenemos la casilla de menú desplegable
donde escogeremos el tamaño de las miniaturas, expresado en píxeles. Las opciones son 36 x 36, 72 x 72, 100 x 100, 144 x 144 y 200 x 200. En la casilla
determinaremos si queremos que aparezcan los nombres de los archivos originales debajo de las correspondientes miniaturas. En
determinaremos el número de columnas en que se distribuirán las miniaturas en la página. La lista desplegable
nos permite elegir en que formato de imagen se crearán las miniaturas. Las posibles opciones son GIF WebSnap 128, GIF WebSnap 256, JPEG-Calidad superior y JPEG-Archivo mas pequeño. La siguiente casilla es muy similar.
se refiere al formato de la foto “en grande” y tiene las mismas opciones que la lista anterior. La casilla
nos permite determinar cual será el tamaño definitivo de las fotos “en grande” con respecto a las originales de las que partimos para crear el álbum. Por último, vemos una casilla de verificación con el aspecto
. Si está activada, junto a las fotografías “en grande” aparecerá un sistema de navegación con los enlaces “Anterior”, “Inicio” y “Siguiente”. Una vez completados los datos, pulsamos en “Aceptar” y se crea el álbum web.

Siguiendo en el menú de comandos, nos encontramos
. Esto permite que a todo lo que se edite a partir de ese momento, y hasta el próximo cierre de sesión, reciba el formato de código propio de Dreamweaver. No produce, por tanto, resultados visibles en la ejecución, ya que solo es una forma de disponer internamente el código HTML.

Lo siguiente que encontramos es
. Esta opción solo está habilitada si hay alguna tabla seleccionada. Esta opción sirve para establecer los distintos atributos de color, alineación, etc. De las tablas y de las filas. Al elegirla aparece el cuadro de diálogo que ves en la página siguiente. Como puedes apreciar, en la parte superior izquierda hay una lista de combinaciones predefinidas. Puedes elegir una cualquiera de ellas o crear tu propia combinación personalizada. Como ves, también tienes un menú desplegable para determinar cada cuantas filas se tiene que alternar el color. Además puedes elegir el estilo del texto (normal, negrita, cursiva, etc). También puedes determinar el ancho del borde de la tabla, expresado en píxeles. En el centro de la parte superior del cuadro de diálogo ves una muestra de cómo quedará la tabla. Opcionalmente puedes establecer los atributos necesarios en los tags <TD> o en los tags <TR>, mediante la casilla de verificación que aparece en la parte inferior. Hacerlo así es, únicamente, una cuestión de gustos. El formateo de tablas es un complemento a la Ventana de Propiedades de las tablas. Si se encuentran seleccionadas dos o mas tablas en el momento de hacer clic en está herramienta, el formato elegido se aplicara a todas ellas en el momento de pulsar el botón de “Aplicar” o el de “Aceptar”. Como hemos dicho anteriormente, si no se encuentra seleccionada ninguna tabla, está herramienta se encuentra deshabilitada y no puede utilizarse. A continuación te mostramos el cuadro de diálogo correspondiente:

Ya de vuelta en el menú de comandos, encontramos
. Esta opción sirve para reorganizar los contenidos de la tabla según distintos criterios. Al elegirla se abre el cuadro de diálogo que ves a continuación. En el se aprecia que puedes establecer una

ordenación en base a dos criterios como son, digamos, los contenidos de dos de las columnas que hay en la tabla. Las dos pueden ser elegidas a partir de unas listas de menús

desplegables y se pueden ordenar alfabéticamente o numéricamente. El orden puede ser ascendente o descendente y puede incluir o no incluir a la primera fila de la tabla, según la primera casilla de verificación de las dos que aparecen debajo. La segunda casilla de verificación debería estar activada siempre para que se respeten los tags <TR> originales.

La última herramienta del menú de comandos es
. Esto permite escoger unas combinaciones predefinidas de colores para el fondo ce la página, el texto y los tres estados posibles de un vínculo. Estás combinaciones están formadas por lo que se conoce como “Colores Seguros para Internet”. Estas combinaciones son las que se verán exactamente igual en las dos plataformas principales: PC y Macintosh. Al elegir esta opción, se muestra un cuadro de diálogo en el que aparecen distintas posibilidades para

combinar los colores para el fondo con los colores para el texto y los vínculos. Es necesario tener algún cuidado con determinadas combinaciones que producen resultados no adecuados.

Por ejemplo, vínculos invisibles, texto ilegible, etc. En la imagen del cuadro de diálogo ves que hemos seleccionado una combinación adecuada.

3.9. EL MENU SITIO

El menú de sitios es el que ves en la imagen de la izquierda. Como ves (como ya viene siendo habitual) algunas opciones está disponibles y otras se hallan inhabilitadas. En realidad este menú no lo vamos a estudiar aquí, sino que será objeto de un estudio a fondo en el capítulo que destinaremos al desarrollo de sitios. Allí veremos, a fondo, como funciona cada una de las opciones que nos ofrece y aprenderemos a sacarle partido, cosa que ahora todavía no estamos en condiciones de hacer.

3.10. EL MENÚ VENTANA

Este menú se comporta de una manera muy similar al menú “Ver”, pero refiriéndose a las distintas ventanas disponibles en Dreamweaver. Cada una de ellas puede activarse o desactivarse por separado. Además tiene una opción que permite ocultarlas todas o mostrar, en conjunto, aquellas que estén activadas (con una marca a la izquierda).

3.11. EL MENU AYUDA

Este menú contiene el acceso a un completo sistema de ayuda, que también se halla disponible pulsando, en cualquier momento, la tecla F-1. Además tiene la posibilidad de registrarnos en Macromedia como usuarios de Dreamweaver y de acceder al soporte técnico on-line de esta compañía. Por supuesto, para todo ello es necesario que nuestra copia de Dreamweaver sea “legal” (no una copia “pirata”). Desde aquí desaconsejamos fervientemente el uso de copias ilegales de software.

4. LA BARRA DE ESTADO

La barra de estado es aquella que aparece, normalmente de color gris claro, en la mayoría de las aplicaciones Windows. Contiene información genérica acerca de lo que pasa, o lo que podemos hacer que pase, en la ventana a la que pertenecen. La barra de estado de Dreamweaver solo tiene contenidos en la parte derecha, que ofrece el siguiente aspecto:

Lo primero que vemos es
. Parecen ser (y, de hecho, SON) unas medidas. Las medidas de ¿Qué?. Pues son, ni mas ni menos, que las dimensiones, expresadas en píxeles del área de edición. Cuando estamos trabajando para una resolución de, por ejemplo, 800 x 600, la ventana de navegación es de 760 x 420. Esto se debe a que la barra de título, la barra de herramientas y otras partes del navegador se “comen” parte de la pantalla durante la ejecución de nuestra página, con lo que el tamaño real de la ventana de navegación queda sensiblemente reducido. El área de edición de Dreamweaver adopta, exactamente, el tamaño que tendrá la ventana de navegación con la resolución elegida. Para ello es necesario contar, además, con que el navegador tendrá la barra de menús, la barra de título, la barra de herramientas y la barra de dirección. Las medidas de edición de Dreamweaver estar calculadas para esas premisas. Si hacemos clic en la casilla de las dimensiones se nos abrirá un menú emergente que nos ofrece varias medidas predefinidas. Seleccionando cualquiera de ellas, la zona de edición adoptará, inmediatamente, las medidas elegidas. Además contamos con la opción
, que nos permite crearnos unas medidas personalizadas. Como es lógico veremos su funcionamiento en el capítulo de “Personalización”.

La siguiente casilla es
. Nos informa del peso de la página en Kbytes y del tiempo en segundos que tardará en cargarse a una velocidad determinada. Por defecto se calcula el tiempo a 28.800 bps. Esta velocidad se puede modificar (también lo veremos en “Personalización”). De todas formas, es un cálculo aproximado, ya que las velocidades de transferencia de datos, en la vida real, rarísima vez se mantienen estables mas de tres o cuatro segundos.

El icono nos permite abrir una ventana para la gestión de sitios. Hablaremos de ello en el correspondiente capítulo, así como del icono , que abre la Ventana de Biblioteca.

El icono abre la Ventana de Estilos HTML, de la que hemos hablado anteriormente.

El icono abre la Ventana de Estilos CSS.

El icono abre la Ventana de Comportamientos.

El icono abre la Ventana de Marcador.

El icono abre el Tag Inspector. Se trata de una ventana en la que aparece el código HTML (y Javascript, si lo hay) de la página que estemos editando en la que podemos efectuar, si lo deseamos, modificaciones manuales.

Estas casillas e iconos constituyen lo que se conoce como el Mini-Lanzador de Aplicaciones de Dreamweaver.

Además contamos con el icono , que nos permite re-escalar, manualmente, la ventana de edición.

5. PERSONALIZACIÓN

Este capítulo está destinado a contemplar todos los aspectos que permiten personalizar la instalación de Dreamweaver de acuerdo con nuestros deseos, así como las posibilidades que tenemos de personalizar la página que estemos editando en un momento determinado.

5.1. PERSONALIZACIÓN DE DREAMWEAVER

Vamos a empezar por estudiar las posibilidades de personalizar Dreamweaver. La instalación del programa crea unas prestaciones estándar que nosotros podemos modificar para que el programa cubra, más aún si cabe, todas nuestras necesidades de diseño. Las posibilidades son muchas y extensas, flexibles y potentes. Vamos a empezar a analizarlas con calma y método.

5.1.1. LA VENTANA DE OBJETOS

La Ventana de Objetos de Dreamweaver tiene, como vimos anteriormente, posibilidad de ofrecer varias ventanas distintas (Comunes, Invisibles, Marcos, etc.), cada una de ellas con un conjunto de iconos que insertaban en nuestra página unos objetos específicos. Sin embargo, nosotros podemos añadir nuestra propia ventana de objetos personales. Supongamos que necesitamos un botón que inserte en nuestra página el texto siguiente: Esta página solo se ve correctamente con Internet Explorer a una resolución de 800 x 600. Es un texto muy habitual, que probablemente queramos insertar en todas las páginas que hagamos. Además, queremos que el texto aparezca en letras rojas, con un tamaño correspondiente al “Encabezado 2” y centrado horizontalmente en la página. Teclearlo y adaptar sus características cada vez que empecemos una página resultaría una tarea aburrida y monótona, además de una pérdida de tiempo. Sería mucho mas fácil si contásemos, en la Ventana de Objetos, con un icono que insertase, de forma automática, nuestro aviso. Veamos como hacerlo. Para empezar es necesario entender la estructura del directorio raíz de Dreamweaver. Si abres el explorador de Windows y echas un vistazo a la columna de la izquierda, podrás ver algo como esto:

Por supuesto, para llegar a ver esto, tendrás que abrir las carpetas adecuadas, hasta ver la carpeta de Macromedia (suele estar en la carpeta de Archivos de Programa, salvo que tu la hubieras instalado en otra parte del disco). Recuerda que “pinchando” en el icono que aparece a la izquierda de algunas carpetas, se despliega la lista de subcarpetas que hay

dentro. Si pinchas en el icono , la lista de subcarpetas se repliega y desaparece de la vista. Pincha en el icono que ves a la izquierda de
. Se desplegará la lista de subcarpetas que están contenidas dentro de “Configuration”. Verás una carpeta como esta:
. Sitúa el cursor sobre el icono de la carpetita amarilla que aparece y haz clic. Ahora el icono tiene este aspecto:
y en la ventana de la derecha del Explorador de Windows tienes seis carpetas cuyos nombres son la traducción al inglés de las seis Ventanas de Objetos que ya conocemos. Abre una nueva sub-carpeta dentro de la carpeta “Objects” y llámala Avisos. Ahora necesitas usar un programa de edición gráfica para crear el icono que insertará el aviso en tu página. Puedes usar Paint Shop Pro, Photo Shop, Photo Finish, Photo Impact, o cualquier otro de tu elección. Debes crear un icono de 18 x 18 píxeles. En nuestro caso hemos creado este icono . Como ves, el color de base es un gris idéntico al de los iconos que ya existen en las Ventanas de Objetos. Este gris es el que corresponde a R=227, G=227 y B=227. El icono se guarda en formato GIF en la carpeta que hemos creado (Avisos). Lo vamos a guardar con el nombre aviso_1.gif. Lo siguiente es generar, con un editor de texto, el código HTML para que se forme nuestro aviso en una página. Podemos usar el Tag Inspector de Dreamweaver o, simplemente, el bloc de notas de Windows, o cualquier otro editor de texto plano. Al código le quitaremos todos los tags adicionales como <HTML>, <HEAD> o <BODY>. En este caso nos quedaremos solo con el fragmento que aparece listado a continuación:

<h2 align="center">

<font face="Comic Sans MS" color="#FF0000">

Esta p&aacute;gina s&oacute;lo se ve correctamente con Internet Explorer a una resoluci&oacute;n de 800 x 600.

</font>

</h2>

<br>

Este código lo grabaremos en la misma carpeta en la que habíamos grabado el icono que hicimos. Deberemos de poner especial atención a grabar el código con el mismo nombre que le dimos al icono y con la extensión .htm. En este caso, lo grabaremos como aviso_1.htm. Y ya está. Ahora iniciamos Dreamweaver con una página en blanco y abrimos la Ventana de Objetos. Por defecto se abre la Ventana de Objetos Comunes. Pinchamos en el botón
para que se despliegue la lista de Ventanas de Objetos disponibles. Aparecen las que ya conocíamos y una más. La que corresponde a la carpeta Avisos que hemos creado. Lo seleccionamos y aparece una Ventana de Objetos con el siguiente aspecto:

En esta Ventana de Objetos vemos, en la parte superior, el nombre , que corresponde a la carpeta que hemos creado. Dentro de la ventana vemos el icono que nos hicimos. Si arrimamos el puntero a dicho icono aparece una etiqueta colgante con el nombre del mismo. Su aspecto es éste . Ahora veremos que, si pulsamos el icono, en la página se inserta, de forma automática, nuestro mensaje.

Hazlo y verás lo siguiente:

Naturalmente podemos crear cuantos iconos y funciones específicas deseemos. Además, podemos meter nuestro icono y su función asociada en las Ventanas de Objetos ya existentes. Para ello, en lugar de crear una carpeta específica, usaremos alguna de las que, por defecto, aparecen dentro de la carpeta “Objects”. Y lo mejor de todo: el nuevo objeto que te has creado, también puedes insertarlo en tu página desde el menú “Insertar”.

5.1.2. PREFERENCIAS

Dentro del menú de “Edición” tenemos una opción muy interesante a la hora de configurar el comportamiento de Dreamweaver:
. Esta opción permite configurar 16 categorías distintas, tal como se aprecia en el cuadro de diálogo que aparece al seleccionar la opción:

Como ves, a la izquierda aparece la lista con las 16 categorías personalizables. Por defecto, aparece seleccionada la primera de ellas,
, y a la derecha aparecen las opciones que podemos configurar en dicha categoría. Si seleccionamos cualquiera de las otras 15, en la zona de la derecha veremos las opciones que ofrecen. Vamos a estudiarlas todas, con el fin de poder adaptar el funcionamiento de Dreamweaver a nuestras necesidades.

5.1.2.1. CATEGORÍA GENERAL

Esta categoría ofrece el cuadro de diálogo que hemos visto en la figura anterior. La primera opción es
. Determina que es lo que hará Dreamweaver si se cambia el nombre, o la ruta de una página de nuestro sitio, a la que tenemos algún vínculo establecido. Si elegimos “Siempre”, los vínculos se actualizarán automáticamente. Si elegimos “Nunca”, los vínculos no se actualizarán y tendremos que actualizarlos a mano. Si elegimos “Mensaje”, los vínculos se actualizarán mediante un mensaje de confirmación.

La siguiente opción es
. Como todos los programas capaces de gestionar texto (aunque no sean específicamente procesadores de textos), Dreamweaver cuenta con unos diccionarios ortográficos a fin de advertirnos si tecleamos alguna palabra erróneamente. Este diccionario es muy limitado, ya que solo cuenta con un corrector para Español, otro para Ingles de Estados Unidos y dos para Ingles británico, pero es suficiente para la mayoría de los casos (al menos yo no tengo idea de escribir ninguna página en alemán, ruso o italiano).

La tercera opción es
. Esta opción solo está disponible en la plataforma Windows; no la verás si estás ejecutando Dreamweaver sobre Macintosh. Esta opción sirve para determinar las distintas tonalidades de gris que pueden adoptar las Ventanas de Objetos, Comportamientos, etc. La posibilidad por defecto es “Dreamweaver dos tonos”.

A continuación tienes
. Te permite que, en la ventana de objetos se vean solo los iconos (aunque aparece una etiqueta colgante al arrimarles el cursor), que se vea el nombre de los iconos permanentemente junto a estos o que sólo se vea el nombre de los iconos, pero no los propios iconos).

La siguiente opción es
. Si la casilla de verificación de la izquierda está activada, al guardar un fichero editado con Dreamweaver, se le asignará, automáticamente, la extensión especificada en la casilla de la derecha.

La opción
sirve para agilizar la introducción de contenidos en una tabla. Si el contenido es mayor que la celda, iremos introduciendo los contenidos y sólo cuando excedamos realmente el tamaño de la celda se actualizarán los tamaños. Si esta opción no está seleccionada, Los tamaños se irán actualizando según introduzcamos los contenidos.

Lo siguiente que vemos es
. Permite que si, abrimos una página distinta de la que estamos editando, se abra en una nueva ventana de Dreamweaver. Esto es útil si tenemos que editar, de forma compaginada, dos o mas documentos. Si esta opción se halla desactivada, los documentos que abramos se alojarán en una única ventana, cerrando los ya existentes. Esta opción sólo está disponible para Windows.

La siguiente opción de que disponemos es
. Si está opción está activada, al iniciarse Dreamweaver solo veremos la Ventana de Sitio, para editar alguna página de un Sitio que estemos preparando. Deja la opción desactivada para que se te abra una página nueva en blanco y tengas posibilidad de ir a donde te convenga en cada momento.

A continuación ves la opción
. Determina si Dreamweaver mostrará o no un cuadro de diálogo al insertar imágenes, tablas, películas, etc. Si esta opción esta desactivada, estos objetos se introducirán sin cuadro de diálogo, siendo necesario cambiar luego sus atributos desde la correspondiente Ventana de Propiedades. Los objetos “Imágenes de sustitución” y “HTML de Fireworks” siempre muestran cuadro de diálogo, aunque esta opción se halle desactivada.

La opción
permite la entrada, directamente sobre el documento, de caracteres de doble byte (japoneses, cirílicos, etc), siempre que contemos con el kit de lenguaje adecuado. En caso de estar desactivada, el texto que emplee estos caracteres debe ser creado y modificado en un editor externo.

La siguiente opción es
. Permite a Dreamweaver advertirnos si tratamos de abrir un archivo que esté marcado como de “sólo lectura”.

Por último tenemos la opción
. Determina cuantos pasos de edición recuerda y muestra la Ventana de Marcador. Si superamos este máximo, los menos recientes se perderán para dejar paso a los nuevos.

5.1.2.2. CATEGORÍA BARRA DE ESTADO

Es la segunda categoría de Preferencias. Al seleccionarla vemos el siguiente cuadro de diálogo:

Esta categoría es la misma a la accedemos si, en la barra de estado hacemos clic en
y, a continuación en
. Lo primero que vemos es la lista de tamaños

predefinidos. Esta lista tiene el aspecto que vemos en la figura de la izquierda. Podemos elegir cualquiera de ellos o crear uno nuevo. Para ello basta con poner el cursor debajo del último que hay y teclear el ancho y el

alto en píxeles, así como un nombre descriptivo. Después de pulsar el botón “Aceptar” el nuevo tamaño aparecerá junto a los tamaños disponibles cuando hagamos clic en
, en la barra de estado y en la lista de éste cuadro de diálogo. Si queremos eliminar alguno de los tamaños predefinidos, nos bastará con ir seleccionado cada uno de sus campos y pulsar la tecla Supr.

La siguiente opción es
. Como ves, se gestiona mediante una lista desplegable y permite fijar una supuesta velocidad de conexión para calcular el tiempo de carga de la página. Por supuesto, es sólo un cálculo teórico, ya que la velocidad real de conexión nunca es estable.

Lo siguiente que podemos determinar es la casilla de verificación
. Esta opción, activada, permite que se muestre, en la barra de estado, el conjunto de iconos que constituyen el mini-lanzador. Y ya está. Ya podemos pulsar en “Aceptar” o ir a la siguiente categoría.

5.1.2.3. CATEGORÍA CAPAS

Esta categoría permite establecer una serie de parámetros generales defectivos para las capas que insertemos en nuestra página, aunque cada una de ella podrá, posteriormente, editarse de forma individual. Al seleccionar la categoría, vemos el siguiente cuadro de diálogo:

Lo primero que vemos es
. Permite seleccionar el tag que se usará para la implementación de capas. Las posibilidades son “DIV”, “SPAN”, “LAYER” e “ILAYER”. Las dos primeras son soportadas por Internet Explorer, mientras que Netscape soporta, en teoría, las cuatro. Mi consejo es que selecciones siempre una de las dos primeras; así, al menos, sabrás que tu página funciona con Internet Explorer.

La opción
permite fijar si, a priori, las capas estarán visibles u ocultas.

Las casillas
y
sirven para definir la medida, en píxeles, que tendrán las capas por defecto en el momento de crearse.

La opción
permite establecer el color de fondo defectivo para las capas. Pinchando en el icono accederemos a un mapa de colores donde podremos escoger uno predefinido o crear uno personalizado (ya puestos a personalizar...). También podemos escoger un color tecleando directamente su código hexadecimal en el formato típico de los colores de HTML: #FFFFFF.

La opción
permite escoger una imagen de fondo para las capas. Al igual que ocurre con las páginas y las tablas, el funcionamiento de esta posibilidad implica que, si la imagen es menor que la capa, se repetirá en mosaico, hacia la derecha y hacia abajo, hasta rellenar por completo la capa.

La opción
permite que, si creas una capa dentro de otra, queden, automáticamente, anidadas. Si pulsas la tecla Control mientras creas la segunda capa, la anidación no tendrá lugar, auque esta opción esté activada.

La siguiente opción está destinada a solucionar un problema del que ya hemos hablado. Cuando se usa Netscape, al cambiar durante la ejecución el tamaño de la ventana de navegación las capas se descolocan todas. Vimos como implementar en nuestro código una rutina de Javascript que resolvía este problema. Al activar la opción
se obtiene el mismo efecto.

5.1.2.4. CATEGORÍA COLORES HTML

El inspector de código, o Tag Inspector de Dreamweaver es un editor de textos integrado en la aplicación que permite revisar y/o editar el código de nuestra página. Este editor está dotado de lo que se conoce como “Chroma-Code”, es decir, un sistema de colores para identificar las distintas partes del código escrito a primer golpe de vista. Así, por ejemplo, el código en Javascript aparece en un color, los tags HTML en otro, los parámetros en otro, los comentarios en otro, etc. Desde la categoría Colores HTML podemos establecer los distintos colores que usará el editor. El cuadro de diálogo correspondiente tiene el siguiente aspecto:

La opción
permite fijar el color de fondo del Tag Inspector.

Las siguientes tres opciones,
,
y
, permiten determinar el color del texto, de los comentarios y el genérico de los tags. A su vez, cada uno de los tags de HTML se puede personalizar. De esta forma, se logra, por ejemplo, que el código Javascript aparezca en un color específico. Fíjate en la lista deslizante que contiene todos los posibles tags de HTML. Es la que aparece a continuación. En ella ves que puedes desplazarte arriba y abajo para seleccionar un tag en concreto y establecer sus características de color de forma individual. La lista

tiene tres columnas. En la primera aparece el nombre del tag. En la segunda aparece el color con el que lo verás en el editor. Si pone predet. te dice

que el color es el que viene “de fábrica” para ese tag en concreto. En la tercera columna indica si el color afectará también a lo que está contenido en el tag. Por ejemplo. En el caso del código Javascript, aparecen todas las instrucciones del mismo color. La línea del tag Script tiene el siguiente aspecto:
. La indicación en la columna
nos dice que todo el código comprendido entre los tags <SCRIPT> y </SCRIPT> se verá afectado por el color elegido para el tag.

A continuación vemos dos opciones que, normalmente están inhabilitadas y solo se hallan disponibles cuando hay un tag seleccionado en la lista.

La primera de ellas es
. Nos permite indicar si queremos el tag con el color predeterminado por Macromedia o queremos elegir un color propio.

La segunda opción,
, es la que permite establecer que SI queremos que el color elegido se aplique al código comprendido en el tag, tal como mencionábamos hace un momento.

Ya sólo queda insistir una vez mas. Estos colores afectan a los tags en el Tag Inspector, no modifican nada en la Ventana de Edición.

5.1.2.5. CATEGORÍA EDITORES EXTERNOS

Esta Categoría permite determinar que editor externo usaremos, en caso de que usemos alguno. Se refiere a un editor de páginas web que pondremos como complemento a Dreamweaver. En realidad, esta función se podría haber eliminado, ya que Dreamweaver nos ofrece todas las prestaciones necesarias como para que no necesitemos recurrir a editores externos. Algunos pensamos que los chicos de Macromedia incluyeron esta posibilidad para que comparemos. Desde luego, en la comparación salen ganando de largo. Esta categoría genera el cuadro de diálogo que puedes ver, completo, en la página siguiente. En él vemos todo lo necesario para configurar un editor externo. Recuerda que para usar el editor externo deberás seleccionar el menú Edición y la opción
.

La primera opción es, lógicamente,
, que permite indicar que programa será el que uses como editor externo. Por supuesto, el programa elegido deberá estar instalado en tu ordenador, si sólo usas uno. Si estás usando una red local, deberá estar instalado en alguno de los ordenadores que componen la red. Lo ideal es que instales el editor al que estuvieras acostumbrado hasta ahora y los uses de forma simultánea con Dreamweaver hasta que conozcas a fondo éste último. Así, la migración es mas suave.

La opción
sirve para lo siguiente. Cuando editas tu página con un editor externo, al cerrarlo y volver a Dreamweaver, es necesario volver a cargar la página para que las modificaciones realizadas fuera se apliquen también dentro. Si seleccionas “Nunca” la página no se recargará por sí misma y tendrás que recargarla a mano. Si seleccionas “Siempre” la página se recargará automáticamente al cerrar el editor externo. Si seleccionas “Mensaje”, Dreamweaver te mostrará un mensaje de confirmación pidiendo permiso para recargar la página.

La opción
se refiere a guardar la página ANTES de abrir el editor externo, a fin de que el editor externo “coja” la última versión de la página. Las posibilidades son las mismas que en el caso anterior. A continuación vemos el cuadro de diálogo completo de esta categoría:

En el vemos, en la parte inferior, un par de listas. Una de ellas está encabezada como “Extensiones” y la otra como “Editores”. En la lista de extensiones vemos las extensiones de todos los distintos tipos de fichero que pueden formar parte de una página web. Por ejemplo, la extensión .js se refiere a ficheros que contienen, exclusivamente, código Javascript. Podemos añadir extensiones a esta lista con el icono , o suprimir una extensión seleccionándola y pulsando el icono . Cuando seleccionamos una extensión en la lista de la izquierda, vemos, a la derecha, que editores contempla Dreamweaver para los ficheros que tengan esa extensión. Por ejemplo. En el caso de los ficheros con extensión .js, Dreamweaver tiene configurado el uso del bloc de notas de Windows (Notepad). A esta lista, también se pueden añadir y quitar elementos con los botones y que tiene en la parte superior. Si para una extensión determinada tenemos varios editores en la lista de la derecha, deberemos elegir uno que sea el principal. Para ello, seleccionamos el editor deseado y pulsamos el botón
. Y ¿cómo editamos un fichero con la extensión registrada en esta lista? Supongamos que tenemos en la página una imagen de tipo .gif y la tenemos seleccionada. En la correspondiente ventana de propiedades veremos un botón con el siguiente aspecto:
. Lo pulsamos y, automáticamente se abre el programa que tenemos seleccionado como principal para la extensión .gif.

5.1.2.6. CATEGORÍA ELEMENTOS INVISIBLES

Los Objetos Invisibles, tales como puntos de fijación con nombre, comentarios, etc. Suelen incluir unos pequeños iconos específicos que sirven para indicar la existencia en la página de estos elementos. Estos iconos, de tamaño muy reducido y de color amarillo no son, por supuesto, visibles en tiempo de ejecución, pero sí en tiempo de edición. Hay ocasiones en las que resultan incómodos para continuar con la edición y preferiríamos que no se vieran. Esto podemos lograrlo desde el cuadro de diálogo de esta categoría, que tiene el siguiente aspecto:

En él vemos la lista de todos los objetos invisibles que se pueden insertar con Dreamweaver y los correspondientes iconos asociados. Activando o desactivando las casillas de verificación que hay a la izquierda, lograremos que se vean o que no se vean los iconos en tiempo de edición. Es necesario aclarar una cosa. El que los iconos no se vean no significa que los objetos no estén insertados. Esta categoría afecta, exclusivamente, a los iconos, no a los objetos en sí.

5.1.2.7. CATEGORÍA ESTILOS CSS

Como sabes, los estilos CSS (de cuya programación en Dreamweaver hablaremos un poco mas adelante, en este mismo capítulo) admiten ciertas formas abreviadas. Esta categoría permite definir que estilos re-escribirá Dreamweaver en su forma abreviada. De todas formas, recuerda que algunas versiones de los navegadores no soportan las formas abreviadas, así que mi consejo es que no las emplees. En cualquier caso, yo te cuento como funciona esto y tú decides. En el cuadro de diálogo de esta categoría ves dos apartados: el que está encabezado con
y el que está encabezado con
. En el primero ves una lista de cinco estilos CSS para los que se puede usar una forma abreviada. Decide en cuales usarla activando o las casillas de verificación de la izquierda. En el segundo apartado ves dos opciones junto al rótulo
. Si seleccionas la opción
, lograrás que, en caso de importar hojas CSS de otras páginas, o realizadas con otras aplicaciones, se apliquen las formas abreviadas que habías elegido anteriormente, solo si el original las empleaba. Si seleccionas
lograrás que las abreviaciones que habías elegido se apliquen en cualquier caso. Concluyendo. Mi consejo es que dejes desactivadas las cinco casillas de verificación de la parte superior y selecciones la segunda opción en la parte inferior. A continuación, puedes ver el cuadro de diálogo de esta categoría completo, en la configuración aconsejada:

5.1.2.8. CATEGORÍA FORMATO HTML

Esta categoría abre el siguiente cuadro de diálogo:

Esta categoría es complementaria de la de Colores HTML. Su misión es personalizar aún mas la ventana de código HTML, mediante sangrías, tabulaciones, etc.

La primera opción es
y se refiere al hecho de si se usarán sangrías automáticas. Si la activamos, al escribir código en el Tag Inspector se sangrará sin que tengamos que ocuparnos de ello.

La segunda opción es
. Se refiere a si la sangría se creará usando espacios en blanco o tabulaciones.

La siguiente opción es
. Si está activada se sangrarán las líneas de código de los tags <TR> y <TD>.

A continuación vemos
. Si activamos esta opción, se indentarán (sangrarán) las líneas de código que contengan los tags <FRAMESET> y <FRAME>.

Lo siguiente que vemos es
. En esta casilla introducimos el número de espacios o tabulaciones (según hayamos escogido anteriormente) que se desplazará el cursor en cada indentación.

A continuación tenemos
. En esta casilla se indica el número de espacios que constituyen cada tabulación.

La siguiente opción es
. Sirve para indicarle al editor de código el número máximo de columnas que queremos que escriba antes de partir una línea de código. Así, en el ejemplo que vemos, si una línea de código tiene más de 76 caracteres (incluyendo las tabulaciones), a partir del carácter 77 se escribirá, automáticamente, en la siguiente línea física.

Lo siguiente que encontramos es
. Esta lista desplegable permite indicar como se producirán los saltos de línea, en función de la plataforma que empleemos. Las posibilidades son: CR LF (Windows), CR (Macintosh) y LF (Unix). Escogeremos la que corresponda a la plataforma en la que estemos trabajando.

A continuación tenemos
. Sirve para determinar si los tags se escribirán con mayúscula o con minúscula.

Lo siguiente que vemos es
. Funciona de la misma forma que la opción anterior, pero referida a los parámetros o atributos que reciben los tags.

Las dos opciones anteriores se pueden neutralizar mediante el uso de las casillas de verificación
.

Por último vemos la opción
, PATRA indicar que tag queremos que se ocupe de los centrados en la página.

Hay que aclarar dos cosas importantes. La primera es que los cambios que introduzcamos en este cuadro de diálogo se aplicarán a los ficheros de nueva creación. La segunda es que tendrán efecto sobre el código generado por Dreamweaver mientras editamos nuestra página en la zona de edición.

5.1.2.9. CATEGORÍA FTP DEL SITIO

Esta categoría permite definir las propiedades y configuración del envío, mediante FTP de nuestro sitio web al servidor. Son varios los parámetros que permite configurar y es el paso previo para lo mas importante de una creación web: subirla al servidor. Esta categoría será objeto de un estudio detallado en el capítulo destinado a creación de sitios web con Dreamweaver.

5.1.2.10. CATEGORÍA FUENTES / CODIFICACIÓN

Esta categoría permite determinar la forma en que se mostrará el documento en el explorador en el caso, por ejemplo, de que desarrolles un sitio web para países que empleen otro conjunto de guarismos diferente del occidental. La codificación que establezcas en esta categoría se introducirá, de forma automática en la meta-información del fichero que estés editando... y de los que edites en lo sucesivo. Si tu objetivo es cambiar solo la codificación del fichero que están editando en la actualidad, mejor que no toques nada aquí y uses la opción
del menú “Modificar”. Esta catoría ofrece el siguiente cuadro de diálogo:

En el ves que puedes establecer la codificación predeterminada mediante
, La configuración de fuentes mediante
y la tipografía y el tamaño de las fuentes proporcionales (
), las fuentes fijas (
), y el código en el Tag Inspector (
).

5.1.2.11. CATEGORÍA PALETAS FLOTANTES

Esta categoría permite determinar cuales serán las paletas flotantes que estarán siempre visibles sobre el área de edición. Aquellas que se encuentren desactivadas en el cuadro de diálogo de esta categoría se ocultarán detrás del área de edición cuando hagamos clic sobre ésta. Es decir. Si desactivas, por ejemplo, la casilla de verificación de la Ventana (paleta) de Objetos, podrás verla si la seleccionas en el menú de “Ventana”, pero cuando hagas clic sobre el área de edición, la Ventana de Objetos se colocará detrás. Permanecerá abierta pero no estará a la vista, con lo que no molestará para trabajar. Si la cierras y la vuelves a abrir (mediante el menú de “Ventana” o mediante la tecla F4) volverá a aparecer encima, pero si vuelves a hacer clic sobre el área de edición volverá a ocultarse detrás. En cambio, si su casilla de verificación en esta categoría esta activada, la Ventana de Objetos estará sobre el área de edición, aunque hagas clic sobre ésta. Lo mismo es válido para las demás ventanas (o paletas flotantes, como prefieras). El cuadro de diálogo correspondiente tiene el siguiente aspecto:

En la parte superior tienes las casillas correspondientes a las distintas paletas flotantes. En la parte inferior ves el apartado
. Sirve para determinar que ventanas serán accesibles desde la Ventana de Lanzador y desde el mini-lanzador de la barra de estado. A priori vemos una lista que coincide con los iconos disponibles en ambos lanzadores. Si queremos añadir algo mas, usaremos el botón . Veamos como. Supongamos que queremos tener acceso a la Ventana de Marcos en el mini-lanzador y en la Ventana de Lanzador. Pinchamos en . Se abre un menú contextual en el que seleccionamos . A partir de ese momento, la lista del cuadro de diálogo muestra también la línea . Si ahora hacemos clic en “Aceptar”. Veremos en el mini-lanzador el icono , que abre la Ventana de Marcos. Si queremos eliminar algún elemento de la lista, lo seleccionaremos y pulsaremos el botón . Si queremos cambiar el orden de algún elemento con respecto a los demás, lo seleccionaremos y usaremos los botones y .

5.1.2.12. CATEGORÍA QUICK TAG EDITOR

Esta categoría permite flexibilizar un poquito el uso del Quick Tag Editor. Esta herramienta es la que se usa cuando pinchas en el icono de la Ventana de propiedades. ¿Recuerdas?. Si estabas editando un texto, o una imagen, o cualquier otro objeto se abría una ventana con el correspondiente tag para que lo editaras a mano. Ahora vamos a aprender a configurar esta herramienta acorde a nuestras necesidades. En realidad es muy poco lo que tenemos que configurar, pero nos puede venir bien.

En primer lugar tenemos
. Si activamos esta casilla de verificación, los cambios que introduzcamos en el Quick Tag Editor se aplicarán, en tiempo real, sobre nuestra página.

Lo siguiente que vemos es
. Permite que, una vez abierto el Quick Tag Editor, se despliegue una ventana ofreciendo una lista de los posibles tags que puedes insertar. El retardo necesario para que se despliegue esta ventana estará entre 0,5 y 5 segundos y lo decidiremos usando el control deslizante que hay justo debajo.

5.1.2.13. CATEGORÍA REESCRITURA DE HTML

Esta categoría está destinada a determinar la forma en que se rescribirá el código HTML de páginas realizadas con otras aplicaciones para corregir los posibles errores sintácticos. Genera el siguiente cuadro de diálogo:

En el vemos un primer grupo encabezado por
. En el hay tres opciones que controlan la forma en que se rescribirá el código HTML si es necesario.

La primera opción es
. Si está activada, se rescribirán todos los tags que se encuentren mal anidados. Por ejemplo. Si en una línea de código aparece <B><I>Texto</B></I> lo convertirá en <B><I>Texto</I></B>, que es la forma correcta de realizar una anidación. También se insertarán las comillas y paréntesis que falten.

La segunda opción es
. Elimina los tags de cierre para las que no se ha realizado una apertura. Por ejemplo. Si encuentra el tag </P>, pero no encuentra antes un tag <P>, elimina el de cierre.

La opción
muestra un resumen del código HTML técnicamente no válido que Dreamweaver ha intentado corregir. En dicho resumen se indica la ubicación del problema (a través de números de línea y de columna) para que pueda localizar la corrección y asegurarse de que el resultado es el que usted desea.

El siguiente grupo esta formado por una única, aunque interesante opción con el siguiente aspecto:
. Permite que no se re-escriba el código de los ficheros con las extensiones especificadas.

El siguiente apartado que vemos es
. Consta de dos opciones adicionales que vemos a continuación.

La primera de ellas es
. Permite que se empleen códigos ASCII para representar los espacios en blanco y otros caracteres especiales en las URL's especificadas en los vínculos del código.

La segunda opción es
. Permite que se codifiquen adecuadamente los caracteres especiales, letras acentuadas, etc. En el código HTML. Por ejemplo. Si tenemos en nuestra página la palabra página, se codificará como p&aacute;gina.

Es importante que estas dos casillas de verificación siempre se encuentren activadas.

5.1.2.14. CATEGORÍA RESALTO

Esta categoría ofrece el siguiente cuadro de diálogo:

Esta categoría sirve para determinar si se verán las zonas bloqueadas y editables de la página, así como el color en el que se verán. Recuerda que estas zonas se gestionan desde la Ventana de Plantillas y solo están disponibles cuando estás trabajando sobre un sitio, no sobre una página aislada. Hablaremos de este concepto, por tanto, durante el desarrollo de sitios, pero vamos a ver como funciona el cuadro de diálogo de la categoría.

En primer lugar vemos la opción
. Si la casilla de verificación de la derecha está activada, las regiones editables se verán en el color especificado. Por supuesto, sólo se verán en tiempo de edición.

A continuación vemos
. Funciona del mismo modo que la opción anterior, pero referida a las regiones bloqueadas.

Lo siguiente que encontramos es
. Esta opción se refiere a los elementos de biblioteca (hablaremos de bibliotecas durante el desarrollo de un sitio). Funciona de igual modo que las dos anteriores.

Lo último que vemos en este cuadro de diálogo es la opción
determina como deben verse los objetos insertados mediante lenguajes ajenos a HTML (ColdFusion, ASP, JSP, etc).

5.1.2.15. CATEGORÍA TRADUCCIÓN

Esta categoría ofrece un cuadro de diálogo como el siguiente:

El objetivo de esta categoría es configurar las instrucciones que los servidores suelen incorporar a los documentos de tipo página web y que los editores no muestran. La traducción (desafortunado nombre) permite emular algunos aspectos del comportamiento de un servidor a fin de visualizar estos códigos. Dejemos clara una cosa. Esta seudo-emulación solo sirve para ver esos códigos. En ningún caso Dreamweaver hace que un ordenador cliente se comporte como un servidor. Mediante los cuatro botones de opción que incluye, determina en que archivos se visualizará el tipo de objetos de servidor que esté seleccionado en la parte superior.

5.1.2.16. CATEGORÍA VISTA EN EXPLORADOR

Esta categoría está destinada a determinar que navegadores se usarán para la visualización de las páginas o sitios que editemos. Por defecto, cuando usamos la opción
del menú de “Archivo”, Dreamweaver nos ofrece una lista con los navegadores que tuviéramos instalados en el momento de hacer la instalación de este programa en nuestro ordenador. A posteriori se han podido instalar otros navegadores. O podría ser que quisiéramos quitar alguno de la lista, sin desinstalarlo del ordenador. Para eso tenemos el siguiente cuadro de diálogo:

En la ventana de la parte superior ves la lista de exploradores disponibles. En este caso está compuesta, únicamente, por Internet Explorer (iexplore). También ves, a la derecha del nombre, la tecla de método abreviado para la vista previa en el explorador. En este caso es F12. Si pinchas sobre el botón
verás el pequeño cuadro de diálogo

que aparece a la derecha de este texto. En el ves que puedes cambiar el nombre con el que se reconocerá el navegador, así como la ruta en la que se halla en tu disco duro. Además, puedes establecer que sea el explorador principal, o un explorador secundario, si prefieres usar otro.

El explorador principal es el que se activa con la tecla F12, mientras que los secundarios se activan con otras teclas o combinaciones de teclas.

Una vez cerrado este último cuadro de diálogo, volvemos al de la categoría y vemos que podemos añadir mas navegadores a la lista mediante el uso del botón . También podemos suprimirlos, seleccionándolos y pulsando . Puedes establecer un navegador como principal y otro como secundario usando las dos casilla de verificación que tienes debajo.

La opción
sólo está disponible para plataformas Windows. Permite cargar una página en el navegador desde el servidor local, siempre, por supuesto, que tengas un servidor local con el software adecuado.

5.2. PERSONALIZACIÓN DE LAS PAGINAS

Ya hemos visto como podemos personalizar nuestra instalación de Dreamweaver. Ahora vamos a ver como podemos personalizar una página. En realidad, este apartado es una forma de ir un paso más allá en lo que respecta a todas las posibles propiedades que podamos establecer para cada objeto. Todo esto se controla mediante las Hojas de Estilo en Cascada (CSS). Una CSS es, como sabes, un conjunto de parámetros que se aplican a determinados tags para modificar su comportamiento. Este conjunto de parámetros, o propiedades modificadas, se almacenan al principio del código de una página, o bien en un fichero independiente (con extensión .CSS), al que se invoca desde el principio de la página. Este último sistema tiene, además, la ventaja de que el mismo fichero .CSS puede ser invocado desde diferentes páginas. Para incorporar CSS's a nuestra página, deberemos usar la Ventana de Estilos CSS. Esta ventana tiene el siguiente aspecto:

En el área blanca central aparece la lista de estilos CSS que hay definidos en nuestro documento. Como todavía no hemos creado ninguno, esto es, exactamente, lo que aparece reflejado. En la parte superior de esta ventana vemos una lista desplegable en la que indica:
. En ella podemos elegir sobre que elementos de la página queremos aplicar las CSS. Por ejemplo. Supongamos que creamos un estilo que le asigna a los encabezados de tipo <H1> el color verde para el texto afectado. Pero también queremos poder usar en nuestra página titulares con encabezado <H1> que no reciban el color verde, si no que conserven el negro que, por defecto, tiene la letra. Entonces seleccionaremos con el cursor el titular encabezado que deberá ser verde y en la lista desplegable estableceremos que, el estilo que vamos a crear, se aplicará a la selección. Cuando todavía no hay contenidos en la pagínalas únicas dos posibilidades de la lista son Selección y <body>. Dentro de un momento, veremos como le aplicamos distintos estilos a toda la página. Antes vamos a reparar en la parte inferior de la Ventana de Estilos CSS. A la izquierda tenemos una casilla de verificación. Si está activada, los estilos CSS que implementemos se aplicarán a la página (o a la selección, tag, etc.) de forma inmediata. En caso contrario, sólo se aplicarán cuando pulsemos en . El botón nos permite pasar a la ventana de diálogo para crear un estilo nuevo. El botón permite importar una hoja de estilos CSS. El botón permite eliminar un estilo. Por último, el botón permite eliminar un estilo CSS. Bien. Veamos como sacarle partido a esta ventana.

5.2.1. CONFIGURANDO LA PÁGINA

El primer estilo que vamos a crear va a ser sobre el total de la página que editaremos a continuación. De esta manera, veremos como el estilo CSS afecta a la página. Para crear este primer ejemplo, es indiferente lo que tengamos en la opción . Pulsaremos el botón para crear un nuevo estilo y se nos abrirá un cuadro de diálogo que

Incluye tres opciones. Nos aseguraremos de que esté seleccionada la opción del centro: . Esta opción permite redefinir cual será el comportamiento de cualquier tag de HTML. Al seleccionarla, la lista

desplegable de la parte inferior muestra la relación de tags del lenguaje, para que podamos decidir cual vamos a modificar. En el ejemplo hemos seleccionado body. A continuación pulsamos en “Aceptar” y se nos abre un cuadro de diálogo para que modifiquemos el comportamiento del tag. Es el siguiente:

En él vemos que hay ocho categorías. Este cuadro de diálogo es muy común en casi todas las opciones de uso de estilos CSS, por lo que lo estudiaremos a fondo un poco mas adelante. De momento vamos a ver como funcionan algunas posibilidades.

En primer lugar, establecemos la tipografía que queremos que use toda nuestra página. Vamos a utilizar la letra Arial, para darle un cierto toque informal. Además fijaremos el tamaño y otras características de la tipografía a emplear. Es necesario observar una cosa. En algunos campos del cuadro de diálogo aparece un asterisco. Si observamos el cuadro veremos una advertencia que puede asustar un poco, si la tomamos al pie de la letra:
. Esto no debe preocuparnos. Se refiere a que los campos indicados no producen el efecto deseado en tiempo de edición, pero funcionan perfectamente en tiempo de ejecución. Bien, para este ejemplo hemos configurado la tipografía de nuestra página como muestra la siguiente imagen:

A continuación pulsaremos el botón “Aceptar”. Aparentemente no se han producido cambios, pero, si ahora insertamos un texto de prueba en nuestra página, lo veremos en el navegador con el siguiente aspecto:

Es importante recordar que los cambios introducidos se aplican a toda la página (incluso a lo que hubiéramos escrito antes de crear el estilo) debido a que hemos actuado sobre el tag <body>. A continuación transcribo el código HTML generado por Dreamweaver en este ejemplo:

<HTML>

<HEAD>

<TITLE>Untitled Document</TITLE>

<META http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<STYLE type="text/css">

<!--

body { font-family: Arial, Helvetica, sans-serif; font-size: 16px; font-style: italic; line-height: normal; font-weight: bold; font-variant: small-caps; text-transform: capitalize; color: #FF6666; text-decoration: underline}

-->

</STYLE>

</HEAD>

<BODY bgcolor="#FFFFFF">

<SPAN class="unnamed1">Esto es una prueba de uso de las hojas de estilo CSS.<BR>

En este caso hemos aplicado un estilo a toda la p&aacute;gina.<BR>

</SPAN>

</BODY>

</HTML>

En el puedes comprobar como se ha generado el código acorde con las especificaciones que le dimos. Dejo a tu iniciativa el probar los cambios sobre otras etiquetas distintas de body.

5.2.2. CREAR UN ESTILO PERSONALIZADO

En el apartado anterior hemos visto como redefinir el comportamiento de un tag de HTML. En nuestro ejemplo hemos redefinido el comportamiento de body. Ahora vamos a ver como crear una clase personalizada y aplicarla a cualquier parte de nuestra página. Abrimos un documento nuevo y pulsaros el botón . Se abrirá el primer cuadro de diálogo,

donde nos aseguraremos, esta vez, de que esté activada la primera de las tres opciones, la que vemos que nos ofrece . Los estilos personalizados deben tener un nombre de usuario (es decir, un nombre que nosotros le

asignaremos). Por defecto, Dreamweaver nos ofrece .unnamed1. Nosotros vamos a cambiarlo por .estilo_1 para reconocerlo. Fíjate en que los nombres de las clases personales van precedidos por un punto, tal como se hace en el DHTML que ya conocemos. Es importante que no olvides ponerlo. Si no, la clase podría no funcionar adecuadamente. Una vez fijado el nombre, pincharemos en “Aceptar”. De esta forma damos paso al cuadro de diálogo que veíamos en el ejemplo anterior.

Una vez mas, de momento vamos a actuar sólo sobre la tipografía. Efectuamos una serie de indicaciones para establecer la tipografía de la clase que estamos creando, de tal forma que el resultado final es el que vemos a continuación:

A continuación pulsaremos en “Aceptar” y veremos que, a diferencia de lo que ocurría cuando editábamos un tag HTML, esta vez si hay cambios en la Ventana de Estilos CSS.

Ha aparecido una línea nueva con el nombre que le dimos a nuestro estilo (aunque, aquí, no veremos el punto que precedía al nombre). De momento dejaremos seleccionada la línea que pone (Ninguno).

Ahora escribimos en la zona de edición de nuestra página las siguientes tres líneas:

Ahora, con el cursor seleccionaremos la línea central, como ves en la siguiente imagen:

En la Ventana de Estilos CSS nos aseguraremos de que se vea el ámbito de aplicación de la siguiente forma:

A continuación seleccionaremos el estilo recién creado: . Y ya casi está. La página ofrece ahora el siguiente aspecto:

Solo nos falta quitar la selección del texto que tenemos resaltado. El resultado final coincide con lo que esperábamos:

El estilo así creado está ahora disponible para insertarlo en cualquier parte de nuestra página. A continuación transcribo, una vez mas, el código HTML íntegro, tal como ha sido generado por Dreamweaver.

<HTML>

<HEAD>

<TITLE>Untitled Document</TITLE>

<META http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<STYLE type="text/css">

<!--

.estilo_1 { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: xx-large; font-style: oblique; line-height: normal; font-weight: 300; font-variant: small-caps; text-transform: uppercase; color: #CC33CC; text-decoration: line-through}

-->

</STYLE>

</HEAD>

<BODY bgcolor="#FFFFFF">

<P>Esto no est&aacute; afectado por ning&uacute;n estilo.<BR>

<SPAN class="estilo_1">Esto est&aacute; afectado por el estilo que acabamos

de crear.</SPAN><BR>

Esto tampoco est&aacute; afectado por nada.<BR>

</P>

</BODY>

</HTML>

Y ¿si quiero guardar mi estilo como un archivo .css para un uso posterior? Pues fácil. Abriré el Tag Inspector (recuerda, el editor de HTML de Dreamweaver) y seleccionaré el código que corresponde a la definición de mi estilo. En el ejemplo es el siguiente fragmento:

.estilo_1 { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: xx-large; font-style: oblique; line-height: normal; font-weight: 300; font-variant: small-caps; text-transform: uppercase; color: #CC33CC; text-decoration: line-through}

Una vez que lo tenga seleccionado (resaltado), pondré el cursor encima y haré clic con el botón derecho. En el menú emergente que se abre seleccionaré “Copiar”. Con esto, el fragmento de código que me interesa estará en el portapapeles de Windows. Ahora puedo guardarlo en un archivo a través de cualquier editor de texto plano.

5.2.3. CREAR UN ESTILO PARA LOS VINCULOS

Hasta ahora hemos visto como crear estilos CSS para los tag de HTML y clases personalizadas. Dreamweaver incorpora la posibilidad de crear unos estilos CSS para los vínculos de la página. Para ello, abrimos un documento nuevo, a fin de que lo que hagamos ahora no se vea interferido por lo que ya habíamos hecho anteriormente. Abriremos la Ventana de Estilos CSS y pincharemos en . Se abrirá un primer cuadro de diálogo que ya

conocemos. En el deberemos seleccionar, en esta ocasión, la tercera opción, que aparece como . En la lista desplegable que se ofrece abajo vemos los cuatro posibles estados de un vínculo. Los tres mas habituales (propios de HTML básico) y el estado que

indica la presencia del puntero (hover). Este estado es propio de DHTML. En nuestro ejemplo vamos a elegir este último y pulsaremos “Aceptar”. Una vez más se abre el cuadro de diálogo de la definición de estilos. En este ejemplo solo vamos a introducir un cambio. Seleccionaremos el color rojo, así:
, y pulsaremos en “Aceptar”. A partir de ese momento, todos los vínculos de la página recibirán el efecto del estilo creado, es decir, volverse de color rojo al arrimarles el ratón. Este efecto no funcionará en la ventana de edición. Solo es operativo en tiempo de ejecución.

5.2.4. EL CUADRO DE DIALOGO DE ESTILOS CSS

En los ejemplos anteriores hemos visto como aplicábamos algunos efectos a la tipografía en diferentes estilos CSS. En realidad los estilos CSS permiten configurar mucho más que la tipografía de un fragmento de texto. En esta sección vamos a estudiar el funcionamiento de las ocho categorías que nos ofrece el cuadro de diálogo que Dreamweaver incorpora para la definición de CSS's.

5.2.4.1. TIPO

La primera categoría es, precisamente, la que corresponde a la tipografía. Recordemos que tenía el siguiente aspecto:

En la casilla
indicaremos la fuente o fuentes tipográficas que vamos a emplear.

En la casilla
estableceremos el tamaño de la tipografía, así como la unidad de medida empleada.

En la casilla
estableceremos el grosor del trazo.

En la casilla
indicaremos si la letra va a ser normal, cursiva u oblicua.

En
indicaremos si la letra será de tipo versales.

La siguiente casilla es otra medida:
. El nombre habla por sí mismo.

Lo siguiente que vemos es
. Nos permite indicar si queremos que la tipografía aparezca en mayúsculas, en minúsculas, la primera letra mayúscula o tal como tecleemos el texto.

A continuación vemos
, donde podemos establecer un color para el texto.

Aún nos quedan cinco casillas de verificación, para especificar si queremos alguna decoración adicional para el texto. La única que debe preocuparnos un poquito es
. Esta opción no funciona con Internet Explorer. Es el primer caso (y el único) de algo que sólo funciona con Netscape Navigator. Esto no quiere decir que con Internet Explorer no se puedan lograr textos intermitentes. Es sólo que habrá que lograrlos de otra manera. Durante el desarrollo de un sitio web veremos un ejemplo.

5.2.4.2. FONDO

La categoría “Fondo” permite definir los estilos CSS que afectarán al fondo de la página. Es una forma de dar un paso mas en las propiedades de la página que habíamos aprendido a configurar en el menú contextual. El cuadro de diálogo de esta categoría tiene el siguiente aspecto:

En él podemos ver, en primer lugar, la casilla
. En ella podemos establecer un color plano para el fondo ce la página, de la forma habitual.

La siguiente casilla es
. Nos permite seleccionar una imagen como fondo de la página.

A continuación tenemos
. Aquí tenemos la ocasión de indicar si queremos que la imagen se repita en mosaico a lo largo y ancho de la página. Las posibilidades que esta lista ofrece son: repetir x (produce la repetición en horizontal), repetir y (produce la repetición en vertical), no repetir (solo saca la imagen una vez) y repetir (repite en horizontal y en vertical).

La siguiente casilla,
,nos permite determinar si la imagen se desplazará con los contenidos (caso de que éstos sean mayores que la ventana de navegación) o permanecerá fija en su posición en la pantalla. Las posibilidades son fijo y desplazar.

Lo siguiente que vemos es
, que nos permite fijar la distancia desde el borde izquierdo de la imagen hasta el borde izquierdo de la ventana de navegación. Esta distancia se puede expresar, además, en diferentes unidades de medida, como vemos a la derecha. Si la imagen se repite en mosaico, aparecerá desplazada en la cantidad especificada. Además de establecer un valor, podemos establecer la alineación horizontal.

La siguiente casilla es
y funciona de igual modo, pero referida al borde superior de la imagen y de la ventana de navegación, así como a la alineación vertical.

5.2.4.3. BLOQUE

La siguiente categoría de estilos CSS es la de bloques, cuyo cuadro de diálogo es el siguiente:

En el vemos mas características que podemos establecer, en esta ocasión referidas a los bloques de texto (párrafos) de la página.

Lo primero que vemos es:
. Nos permite determinar la separación entre las palabras del párrafo. Las posibilidades son: Normal o un valor, que puedes expresar en diferentes unidades de medida, como ves en la parte derecha de la imagen.

La siguiente opción es
, que actúa de igual manera, respecto al espaciado entre las letras de una misma palabra.

A continuación encontramos
, que nos permite determinar cual es la posición de los caracteres con respecto a la línea de base de la escritura; es decir. Podemos querer que los caracteres aparezcan como subíndice, como súper-índice, etc. Además, podemos establecer un desplazamiento personalizado, que expresaremos en las unidades de medida que elegiremos a la derecha.

En la siguiente opción,
, podemos elegir que el texto aparezca alineado a la derecha, a la izquierda o al centro de la página, así como la alineación justificada.

A continuación vemos
. Esto nos permite, evidentemente, determinar el sangrado del texto. No confundas el sangrado del texto en la ventana de navegación, con el sangrado del código en el Tag Inspector que vimos en las “Preferencias” del menú de “Edición”.

La casilla
es una forma de rizar el rizo respecto a los espacios en blanco entre palabras. Es decir, complicarnos la vida innecesariamente. Permite definir que los espacios reciban un preformateado (tag <PRE>).

5.2.4.4. CUADRO

Esta categoría presenta el siguiente cuadro de diálogo:

Su uso es, en algunos aspectos, un poco redundante, ya que controla determinados estilos que son controlados, de una u otra manera desde otra parte de la aplicación. También contempla algunos aspectos de ajuste en fino de elementos que ocupan un cuadro en la pantalla (capas, imágenes). Veamos las opciones con las que contamos.

La primera opción está formada por las casillas
y
. Determinan el tamaño del elemento. Dreamweaver sólo muestra este atributo en la ventana de documento cuando se aplica a imágenes o capas.

A continuación tenemos
. Saca el elemento del flujo de la página y lo coloca en el margen izquierdo o derecho de la página. Otros elementos se ajustan alrededor del elemento flotante de la forma habitual. Dreamweaver sólo muestra este atributo en la ventana de documento cuando se aplica a la etiqueta IMG.

Lo siguiente que vemos es
. Define los lados que no permiten capas. Si aparece una capa en el lado libre, el elemento con esta configuración pasará a situarse debajo de él. Dreamweaver sólo muestra este atributo en la ventana de documento cuando se aplica a la etiqueta IMG.

A continuación tenemos cuatro casillas bajo el encabezamiento . Define la cantidad de espacio entre el contenido del elemento y su borde (o su margen si no hay ningún borde). Dreamweaver no muestra este atributo en la ventana de documento.

Lo siguiente que vemos son otras cuatro casillas bajo el encabezamiento
. Define la cantidad de espacio entre el borde del elemento (o el relleno si no hay borde) y cualquier otro elemento. Dreamweaver sólo muestra este atributo en la ventana de documento cuando se aplica a elementos de nivel de bloque (párrafos, encabezados, listas, etc.).

En la parte inferior del cuadro de diálogo vemos una indicación acerca de los estilos que no son visibles en tiempo de edición y de los que solo se aplican a los objetos especificados.

5.2.4.5. BORDE

Esta categoría es complementaria de la anterior. Se usa para determinar el borde de los objetos tales como las imágenes y capas. Su cuadro de diálogo es el siguiente:

En el vemos que podemos especificar el ancho y el color de cada uno de los cuatro bordes de una imagen. Además, con la casilla
podemos establecer un borde punteado, liso, etc. Estos estilos no son visibles en tiempo de diseño, y en tiempo de ejecución dependerán del navegador.

5.2.4.6. LISTA

Esta categoría sirve para configurar algunas de las propiedades de las listas generadas mediante los tags <UL> y <OL>.

En la primera casilla vemos
. En ella podremos determinar si los elementos de las listas irán precedidos por una viñeta circular, cuadrada, un número romano, una letra, etc.

En la segunda casilla vemos
. Las viñetas no tienen porque ser las predefinidas de HTML. Puede ser cualquier imagen. Si deseamos hacerlo así, en esta casilla estableceremos la ruta relativa y el nombre del fichero que contiene la imagen deseada.

A continuación vemos
. En ella especificaremos si nos referimos a la parte exterior de la lista (lista principal) o a la parte indentada.

A continuación podemos ver el cuadro de diálogo, en conjunto, de esta categoría:

5.2.4.7. POSICIÓN

Esta categoría se refiere al uso de las propiedades de las capas que insertemos en el documento.

En él podemos ver, en primer lugar, el encabezamiento
. Se refiere a la posición de la capa con respecto al documento.

Por una parte podemos determinar el tipo de posicionamiento mediante
. Las posibilidades son absoluta, relativa y estática.

Lo siguiente que vemos es
. Permite determinar la visibilidad defectiva de las capas afectadas por este CSS. Las posibilidades son: heredada, visible y oculto.

A continuación tenemos
. Nos permite establecer el índice Z para las capas afectadas por este CSS. Las posibilidades son: automático o un número.

La última opción de éste párrafo es
. Permite determinar qué harán las capas afectadas por este CSS ante un desbordamiento del contenido. Las posibilidades son: visible (agranda la capa para ver todo el contenido), oculto (no se puede ver el contenido desbordado), desplazar (genera barras de desplazamiento en le capa, independientemente del contenido) y auto (genera barras de desplazamiento si son necesarias).

Con el encabezamiento
establecemos la ubicación de la capa en la página con respecto a la esquina superior izquierda de la página (posición absoluta) o de los textos del contenido (posición relativa).

Con el encabezamiento establecemos la parte de la capa que será visible.

Esta categoría presenta, en conjunto, el siguiente cuadro de diálogo:

5.2.4.8. EXTENSIONES

Esta categoría es lo que podríamos llamar “Efectos especiales”, ya que incluye algunos recursos visuales interesantes a la hora de crear efectos dinámicos.

El cuadro de diálogo de ésta categoría es el siguiente:

En primer lugar vemos el encabezamiento
, donde podemos establecer que, al imprimir la página, se produzca un salto de página delante o detrás del objeto afectado por el CSS. Esta opción no funciona con los navegadores versión 4.0. Con superiores, funciona sólo bajo determinadas circunstancias.

Bajo el encabezamiento
vemos dos efectos que podemos aplicarle a los objetos. El primero es
. Nos permite determinar la forma que adoptará el cursor al posarlo sobre el objeto afectado por este CSS. Podrá ser una mano, una cruz, etc. La segunda opción es
. Nos permite aplicar sobre una imagen filtros de color, desenfocado, etc. Estos efectos sólo funcionan si se establece una forma específica para el cursor, aunque, si hay un filtro, la forma de cursor no funcionará. Algunos filtros incluyen parámetros con el signo ?. En ese caso habrá que indicar, a mano, algún valor (un color, una medida, etc). La mayoría de los filtros solo funcionan con Internet Explorer 5.5.

SEGUNDA PARTE

6. DESARROLLO DE SITIOS WEB

Hasta ahora hemos visto una serie de técnicas aplicadas a páginas independientes, que realizábamos sólo para efectuar las pruebas necesarias. Pero cuando se escribe para la Red, no se escriben páginas sueltas. Se escriben sitios completos. Un sitio web es un conjunto de páginas relacionadas entre sí que se alojarán en el mismo hosting. Un hosting es una dirección URL. Y si todo el conjunto de páginas que componen un sitio están alojadas en la misma dirección URL ¿Cómo logramos que cuándo el usuario teclea esa dirección acceda a la página principal del sitio? Los servidores web buscan, en la URL, una página llamada index.htm, que es la que ofrecen al usuario. Esta página deberá contener los enlaces necesarios para acceder al resto de las páginas del sitio. Por lo tanto es el autor el que deberá preocuparse de que la página principal de su sitio se llame indes.htm (y de establecer los adecuados vínculos. En ocasiones, el servidor no utiliza la terminología index.htm, sino index.html, default.htm o default.html. Será nuestro ISP quien nos informe de que nombre reconoce el servidor donde tenemos contratado el hosting para la página principal. La estructura básica de un sitio web podría tener un aspecto similar al de la siguiente figura:

Se trata de una estructura web evidentemente muy simple, pero que ilustra la forma genérica en que debe construirse cualquier sitio web. Además, junto a cada página reflejaríamos las imágenes, tablas, capas y otros objetos necesarios para el buen funcionamiento del sitio. Veamos como crear un sitio web con Dreamweaver.

6.1. LA ESTRUCTURA DE CARPETAS

Como, en principio, vamos a desarrollar nuestro sitio en modo local, lo primero que deberemos hacer es destinar una carpeta en el directorio raíz de nuestro disco duro local para alojar los documentos HTML que constituyan las páginas de nuestro sitio. De esta

carpeta colgarán otras, tal como se aprecia en la figura de la izquierda. En estas sub-carpetas colocaremos los distintos elementos que vayan a componer nuestro sitio: las imágenes, los sonidos, los ficheros Shockwave y Flash y los ficheros de tipo .zip para la descarga por parte del usuario. Naturalmente, si el

sitio que vamos a desarrollar no incluye alguno de estos tipos de elementos, no será necesario crear la correspondiente carpeta. En la carpeta principal del sitio, que, en este caso, hemos llamado mi_sitio, se alojarán, como hemos indicado anteriormente, los documentos HTLM. Al abrir Dreamweaver se abre una página en blanco por defecto. Esta primera página la grabaremos con el nombre index.htm en la carpeta raíz de nuestro sitio. Esto nos permite tener la estructura básica imprescindible para empezar a trabajar en serio. Es importante recalcar que la carpeta principal deberá estar colgando, directamente, del directorio raíz, no de otras carpetas, tal como hemos visto en la imagen. El motivo de esto es facilitarnos luego el trabajo a la hora de establecer rutas locales. La forma mas cómoda para crearnos esta estructura básica es utilizar el explorador de Windows. Y un buen consejo gratis: no se deje ganar por apresuramientos inoportunos. Antes de ponerse a trabajar en su sitio, diseñe sobre papel. El trabajo previo sobre papel es un buen hábito de todo informático que se precie. Cada hora que emplee en diseño previo serán, al menos, tres horas que ahorrará en buscar bugs.

6.2. CREAR UN SITIO NUEVO

Una vez pasada la fase previa del diseño y creación de la estructura básica entraremos de nuevo en Dreamweaver, iremos al menú de sitio y elegiremos la opción
. Con ello se abrirá el correspondiente cuadro de diálogo:

En el vemos, en la parte izquierda, que está compuesto por cinco categorías, cuyo funcionamiento veremos a continuación.

6.2.1. DATOS LOCALES

En esta categoría le daremos a Dreamweaver algunos datos genéricos acerca de la creación de nuestro sitio.

En primer lugar, vemos la casilla
, donde introduciremos el nombre que le queremos dar a nuestro sitio. En este caso hemos elegido “Mi primer sitio”.

A continuación, en
estableceremos, como ruta local predefinida, la carpeta que creamos en el explorador de Windows. Si no recordamos su nombre la buscaremos con .

Lo siguiente que vemos es
. Esta casilla activada permitirá que se actualice automáticamente la lista de los contenidos de nuestras carpetas según vayamos añadiendo, eliminando o renombrando ficheros.

Después vemos
. En esta casilla introduciremos la URL del alojamiento que hayamos contratado para la página.

Por último encontramos
. Permite, como su nombre indica, reservar un espacio de memoria caché para actualizaciones.

6.2.2. DATOS DEL SERVIDOR WEB

La siguiente categoría genera un cuadro de diálogo con el siguiente aspecto:

En el vemos, en primer lugar, la casilla
, con una lista desplegable. Las posibilidades son: FTP, Local/Red o Ninguno. Si seleccionamos Ninguno, en el resto del cuadro de diálogo no aparece nada. Esta opción se usa cuando vamos a desarrollar nuestro sitio, únicamente, para su uso en la misma máquina local en la que trabajamos. La opción Local/Red nos permite trabajar en una LAN. En ese caso se abrirá una sola casilla donde estableceremos cual es la ruta de la carpeta que alojará, finalmente, el sitio. Por último, si elegimos FTP, como en el ejemplo, veremos las siguientes opciones.

La casilla
nos permite introducir el nombre del servidor (en este caso ftp.mysite.com) o bien su dirección IP (Por ejemplo, 174.214.47.182).

A continuación vemos
. Si el directorio del servidor contiene sub-niveles y nosotros vamos a usar alguno de ellos como alojamiento de nuestro sitio, especificaremos aquí la ruta remota, como si fuera una ruta local.

Lo siguiente que vemos es
. En esta casilla introduciremos el login (nombre de usuario) con el que nos reconoce el servidor.

En la casilla
introduciremos nuestra contraseña de acceso al servidor. Si activamos la casilla
, Dreamweaver memorizará esta contraseña para usarla en el futuro.

Además podremos activar las casillas
(si vamos a utilizar un FTP pasivo) y
. Será en Preferencias, del menú Edición, donde estableceremos el nombre del FireWall que vamos a utilizar.

6.2.3. DESPROTEGER / PROTREGER

Esta categoría presenta el siguiente cuadro de diálogo:

Este cuadro de diálogo ofrece la posibilidad de proteger nuestro trabajo a fin de evitar que otras personas lo modifiquen por error. Debo añadir que esta protección no es, en ningún caso, un sistema de seguridad para evitar acciones malintencionadas, entre otras cosas, porque ni siquiera se establece una clave de acceso a los ficheros. En realidad esta “protección” se limita a poner una pequeña marca al lado de los ficheros en la Ventana de Sitio para indicarles a los demás que estamos trabajando en ellos. Es como decir “Por favor. No me toquéis este archivo.”. En la casilla
pondremos nuestro nombre, para que los demás usuarios sepan quien se ocupa de esos ficheros.

6.2.4. DISEÑO DE MAPA DEL SITIO

Esta categoría permite configurar el aspecto de la Ventana de Sitio. Su cuadro de diálogo completo lo vemos en la página siguiente.

En primer lugar encontramos la casilla
, donde estableceremos el nombre de la página principal de nuestro sitio.

A continuación vemos la casilla
. En ella fijaremos el número máximo de columnas de iconos que se verán en la Ventana de Sitio cuando activemos el mapa del sitio (Estudiaremos la Ventana de Sitio en el siguiente apartado).

En la casilla
expresaremos el ancho, en píxeles, reservado a cada columna.

Con el apartado
decidiremos si queremos que los iconos que representan a páginas aparezcan con el título de la página o el nombre del archivo que contiene a cada página.

Con la opción
, podremos ver, o no ver, según esté activada o desactivada esta casilla, los archivos ocultos en el mapa del sitio. Estos aparecerán con su nombre en cursiva.

Con la opción
activada, veremos también los iconos de los archivos de imagen, sonido, y otros que no son el propio código HTML, pero que forman parte de las páginas.

El aspecto completo del cuadro de diálogo de esta categoría es el siguiente.

6.2.5. DESIGN NOTES

Las Design Notes, o Notas de Diseño, son una serie de comentarios que el programador introduce para su propio uso. No afectan para nada al código de la página y se pueden revisar y mantener sólo desde Dreamweaver. Esta categoría de la ventana de definición de sitios muestra el siguiente aspecto:

En ella vemos dos opciones destinadas a mantener unas design notes para el sitio y permitir que estén disponibles para terceros programadores.

El botón
permite borrar las design notes del sitio.

6.3. LA VENTANA DE SITIO

Una vez que hemos definido un sitio nuevo con las anteriores categorías, tenemos a la vista la Ventana de Sitio. Su aspecto global es el siguiente:

En ella vemos dos zonas principales bien definidas: a la izquierda, el mapa del sitio (en nuestro caso solo contiene la página index.htm); a la derecha vemos la estructura del sitio.

Si pulsamos en el botón , en la parte izquierda veremos la estructura del sitio en el hosting remoto.

Si pulsamos en el botón volveremos a ver el mapa del sitio.

Con el botón
actualizaremos las listas de ficheros local y remota.

Con el botón
actualizaremos los archivos de nuestra carpeta local a partir de los de la carpeta remota.

Con el botón
actualizaremos los archivos en la carpeta remota a partir de los que hay en la carpeta local. Si previamente no hemos usado el botón
para establecer una conexión, esta se establecerá ahora de forma automática.

Usando la lista desplegable
podremos acceder a otros sitios sobre los que estemos trabajando. Si hacemos doble clic sobre la lista volveremos a la ventana de definición que habíamos visto en el apartado anterior. Además esta lista, una vez desplegada incluye una opción,
, que permite definir nuevos sitios. Al seleccionarla obtendremos una lista de los sitios disponibles, con la posibilidad de editarlos, borrarlos o crear otros.

6.4. DESIGN NOTES

Las design notes son, como mencionaba anteriormente, notas que el autor de un sitio utiliza para documentar su código. Para crear o editar una nota de este tipo necesitaremos tener abierta la Ventana de Sitio. Nos situaremos sobre la parte derecha, donde está la estructura del sitio en cuestión y seleccionaremos un archivo o carpeta del mismo, excepción hecha de la carpeta raíz. A continuación haremos clic con el botón derecho y, en el menú emergente que aparece seleccionaremos
. Con esto se abrirá el siguiente cuadro de diálogo:

En la primera casilla podemos elegir el estado en que se encuentra el documento para el que estamos editando estas notas. Puede ser borrador, beta, etc. En nuestro ejemplo fijaremos
.

En el campo introduciremos la fecha del sistema pulsando sobre el icono . Además teclearemos directamente los comentarios que deseemos. En nuestro ejemplo la ventana ofrece el siguiente aspecto final:

Además, contamos con la casilla de verificación
. Si está activada, la ventana de notas de diseño se abrirá cuando pretendamos abrir el fichero asociado desde la Ventana de Sitio.

Además vemos que el cuadro de diálogo de las Design Notes incluye otra pestaña:
. Si la pulsamos vemos el aspecto de la información que hemos acabado de introducir, tal como muestra la siguiente figura:

7. BIBLIOTECAS Y PLANTILLAS

Dreamweaver contempla varias herramientas de importancia capital cuyo estudio habíamos aplazado en la primera parte de este manual por estar su uso íntimamente ligado a la existencia de una estructura de sitio web. Sin duda, los mas significativos son las bibliotecas y las plantillas. Vamos a efectuar su estudio en este capítulo.

7.1. BIBLIOTECAS

Una biblioteca es una agrupación de objetos (imágenes, párrafos de texto, capas, etc.) que forman parte de una o varias de las páginas de un sitio y se almacenan mediante referencias para su uso posterior. Lo primero (una vez abierta una página del sitio en cuestión, es abrir la Ventana de Bibliotecas. Lo haremos desde el menú o pulsando F6. Recordemos el aspecto que tenía esta ventana:

En ella vemos dos zonas principales: una gris arriba y una blanca abajo. Para incorporar un objeto a la biblioteca lo seleccionamos en la página y lo arrastramos a la zona blanca de la Ventana de Bibliotecas. El objeto NO desaparece de la página, pero en la Ventana de Bibliotecas aparece un icono que lo representa. A este icono le podemos cambiar el nombre para que nos recuerde su contenido. Podemos insertar en la ventana tantos objetos como deseemos, siguiendo el mismo sistema. El objeto asociado al icono seleccionado se visualizará en la zona gris de la parte superior. En la siguiente imagen vemos el aspecto de la Ventana de Biblioteca con un objeto incorporado y seleccionado. En este caso se trata de una imagen.

Una vez insertado uno o más objetos y seleccionado alguno, vemos que está disponible el botón
. Si lo pulsamos, el objeto seleccionado se insertará en la página, en el punto donde se encuentre el cursor. Este objeto (se trate del que se trate) NO podrá ser editado directamente sobre la página. Supongamos que tenemos un párrafo de texto en la biblioteca y lo insertamos en la página (o en otra página). Aparece resaltado sobre un fondo de color y no lo podremos modificar. El color de fondo es el que se estableció en Edición / Preferencias /Categoría “Resalto” para los Elementos de Biblioteca (Repasa esa parte si no lo recuerdas).

Si pulsamos el botón podremos insertar un nuevo objeto en la Ventana de Biblioteca. Para ello se nos pedirá que pulsemos el botón (Abrir). En ese momento, la pantalla de edición cambiará su fondo a un color gris medio. Todo lo que edites en esa “ventana de edición” formará parte del objeto múltiple que vas a insertar en la Ventana de Biblioteca. Inserta, edita y elimina todos los objetos que desees. Cuando hayas terminado, pulsa la casilla de cierre de la ventana en la que estás editando. Es, como en cualquier aplicación en entorno Windows, la casilla que figura en la parte superior izquierda de la ventana de edición gris. A partir de ese momento, todo lo que editaste en esa ventana, se halla disponible, en la Ventana de Biblioteca, como un objeto único.

El botón permite eliminar el objeto seleccionado.

Bien. Supongamos que ya tenemos la biblioteca con todos los objetos que necesitamos. No importa desde que página/s los hayamos creado o incorporado a la Ventana de Biblioteca del sitio. El caso es que ya están ahí. Ahora sólo es necesario incorporarlos a la/s parte/s de la/s página/s donde los vayamos necesitando. Y todo eso con solo arrastrar y soltar.

Además. El que anteriormente hayamos dicho que un objeto procedente de una biblioteca no se puede editar en la ventana normal de edición de Dreamweaver, no significa que no se pueda editar de ninguna manera. Selecciona un objeto, por ejemplo un párrafo de texto, que hayas incorporado a tu página desde la Ventana de Biblioteca. Cuando lo tengas seleccionado abre la Ventana de Propiedades. Su aspecto para los objetos de biblioteca es el siguiente:

Pulsa el botón y el objeto (sea un objeto sencillo o múltiple) se abrirá en la ventana de edición de fondo gris. Ahora ya podemos editar el objeto. Cuando cerremos esta ventana de edición el objeto habrá quedado modificado en la Ventana de Biblioteca... y en todas las páginas del sitio en las que estuviera insertado.

La Ventana de Biblioteca es exclusiva de cada sitio. Está disponible para todas las páginas del sitio, pero no para las de otro (ni para páginas no encuadradas en un sitio).

7.2. PLANTILLAS

Las plantillas son unas estructuras, definibles por el autor, que dividen la página en dos tipos de zonas: las zonas editables y las zonas no editables o bloqueadas. El objetivo de esto es crear una serie de páginas con la misma estructura común (por ejemplo, un menú a la izquierda y dos botones adicionales de navegación en la parte inferior), de forma que esta estructura no sea modificable. Además dejaremos, por ejemplo, una zona en la parte central de la página que sí será editable.

Seguro que estás pensando: “Bueno, eso puedo lograrlo mediante el uso de marcos, sin complicarme mas la vida”. Parte de razón no te falta, salvo por dos detalles fundamentales (aparte alguna nimiedad adicional):

Los marcos (y sus contenidos) son editables y puedes modificar algo por error.

Si el usuario hace un scrolling en la parte central de la página, el contenido de los demás marcos no se desplaza. Si la página está dividida mediante plantillas, se desplaza toda ella globalmente.

¿Qué resulta mas conveniente? ¿Marcos o platillas? Es una cuestión de diseño. En ocasiones necesitarás recurrir a estructuras de marcos y otras veces será mejor utilizar plantillas. Evidentemente no hay una norma fija, pero si recuerdas los dos detalles anteriores será mas fácil decidir cuando recurrir a una cosa y cuando a otra.

7.2.1. CREAR Y USAR UNA PLANTILLA

Hemos dicho que una plantilla está formada por la estructura de zonas comunes, editables y no editables, de una página del sitio, para transportar esa misma estructura a otras páginas del sitio. Para lograr este apetecible resultado, necesitaremos crear una de las páginas, que será la que nos marque la estructura para las demás. Vamos a seguir los siguientes pasos:

Montaremos los menús, los formularios, los enlaces, las capas, las tablas, etc. Es decir, todos los objetos que compongan la página.

A continuación nos iremos al menú de Archivo y seleccionaremos la opción:
. Aparecerá un cuadro de diálogo pidiéndonos el nombre que queremos darle a la plantilla. Con esto logramos guardar la página como una plantilla... sin zonas editables ni bloqueadas, sino una sola región única.

Ahora seleccionaremos el objeto (o los objetos) que constituye (n) la (s) zona(s) que queremos dejar como editable (s). Nos iremos al menú Modificar y seleccionaremos
. Con ello se despliega otro menú en el que seleccionaremos
.

Con eso hemos logrado que la página, que ya habíamos guardado como plantilla, tenga unas zonas editables y, el resto, haya quedado como zona bloqueada. Si son varias las zonas que queremos definir como editables, repetiremos el paso 3)

Una vez mas, iremos al menú “Archivo” y seleccionaremos
. Ahora tenemos la plantilla disponible para su uso.

Una vez creada una plantilla abriremos un nuevo documento. Abriremos a continuación la Ventana de Plantillas, bien desde el menú “Ventana” o mediante la combinación de teclas Ctrl - F11. Esta ventana tiene un aspecto muy similar al de la Ventana de Biblioteca. En la parte inferior aparece la lista de las plantillas definidas para este sitio (de momento solo hay una, claro). Seleccionamos la que nos convenga y pulsamos el botón
. En ese momento, la plantilla se aplica sobre la página. A partir de ese momento, sólo podemos editar los contenidos de las zonas que habíamos definido como editables; el resto de la página permanece inamovible, tal como en la plantilla original.

8. LINEAS DE TIEMPO

Las líneas de tiempo permiten establecer comportamientos dinámicos sobre determinados objetos de una página, de forma que estos comportamientos se producen en una secuencia temporal programada. Por ejemplo. Podemos hacer que, al hacer clic sobre una imagen se inicie un periodo de un segundo y, al cabo del mismo, la imagen cambie a otra diferente. O que al pasar el ratón sobre una capa, esta se desplace por la pantalla, cambiando, no solo su posición, sino también su tamaño. O podemos hacer que esto suceda de forma automática, al cargar la página. Los dos únicos tipos de objetos sobre los que se pueden aplicar líneas de tiempo son las capas y las imágenes. En el caso de las capas, se puede programar en una línea de tiempo el cambio de varias de las propiedades de una capa. En el caso de las imágenes solo se puede cambiar el atributo SRC, es decir, la fuente de la imagen.

Veamos como funciona este invento. Lo primero que haremos será crear un documento nuevo donde probar el funcionamiento de las líneas de tiempo. En este primer ejemplo vamos a utilizar una imagen en la que haremos que, al hacer clic, tarde un segundo y después cambie a otra imagen. Hay que anotar que este cambio no se produce de forma gradual, sino repentina. La imagen original permanece intacta hasta que se cambia repentinamente por la otra. En este caso no se produce animación. En el caso de las capas es mas progresivo el cambio. Cuando se inicia la línea de tiempo se produce un cambio gradual desde la posición y/o tamaño iniciales hasta la posición y/o tamaño finales. En esta especie de seudo animación puede indicarse cuantos fotogramas queremos que se reproduzcan por segundo, como si se tratara de un sistema convencional de animaciones.

8.1. NUESTRA PRIMERA LINEA DE TIEMPO

Bien. Como decíamos, vamos a empezar con el ejemplo mas sencillo posible. En el documento nuevo que hemos creado, abriremos la ventana de las líneas de tiempo. Desde esta ventana se controlarán todas las características operativas de una línea de tiempo, de modo que siempre que vayamos a programarlas necesitaremos tener abierta esta ventana. Para ello podemos recurrir al menú de “Ventana” y pulsar
, o usar la combinación de teclas Ctrl-F9. Con ambos sistemas lograremos abrir la ventana de líneas de tiempo, que tiene el aspecto y componentes que ves detallados en la siguiente figura:

A lo largo de este ejercicio veremos que es cada cosa en esta ventana. De momento vamos a abrir el resto de ventanas necesarias para desarrollar el ejercicio. Son la Ventana de Objetos, La Ventana de Comportamientos, la Ventana de Líneas de Tiempo y la Ventana de Propiedades. La pantalla de edición, en conjunto, quedará con un aspecto similar al siguiente:

Bien. Empecemos. Pincharemos en el icono de la Ventana de Objetos comunes para insertar una imagen, sobre la que trazaremos la línea de tiempo. En nuestro caso vamos a usar la siguiente imagen:

que será sustituida, durante la ejecución por:
.

De momento insertamos sólo la imagen original. A continuación la seleccionaremos y la arrastraremos sobre la Ventana de Líneas de Tiempo. Esto NO la hará desaparecer de su ubicación en la página. Sobre la ventana de Líneas de Tiempo aparece el siguiente aviso:

Pincha en “Aceptar” y verás que la Ventana de Líneas de tiempo ha adquirido el siguiente aspecto:

En ella ves que la línea de tiempo para la imagen ocupa 15 fotogramas y que la velocidad de reproducción es de 15 fotogramas por segundo. Vamos a cambiar la velocidad de reproducción a la normal de vídeo de 25 Fps en la ventana
. Como queremos que la línea de tiempo dure un segundo, tendremos que prolongarla de los 15 fotogramas que ocupa en la actualidad a 25. Para ello pinchamos con el ratón en la zona marcada por la imagen, concretamente en el terminal que hay en el fotograma 15
y lo arrastramos hasta el 25. El aspecto de la ventana es ahora el siguiente:

Es importante que nos aseguremos de que el indicador del número de fotograma esté en 25, tal como aparece en la imagen anterior. Bien. Ahora nos desplazaremos a la Ventana de Propiedades y cambiaremos el origen de la imagen, mediante la casilla
. Si ahora desplazamos con el ratón el indicador de fotograma de la Ventana de Líneas de Tiempo, veremos que, durante los 24 primeros fotogramas aparece en la página la imagen original, pero en el fotograma 25 (y siguientes) aparece la imagen nueva. Es importante que las dos imágenes tengan el mismo tamaño en píxeles, ya que al haber quedado asociadas mediante la línea de tiempo, ambas ocuparán el mismo espacio físico en la página, y podría ocurrir que alguna de ellas sufriera deformación, o incluso pérdida de calidad, si no tuvieran el mismo tamaño.

Sin embargo, la línea de tiempo aún no funcionará. No hay ningún mecanismo, todavía, que la dispare. Si guardamos y ejecutamos nuestro documento, veremos que se carga la imagen original y allí permanece indefinidamente. Hemos dicho que queríamos que la línea de tiempo se iniciara al hacer clic sobre la imagen. Bien. Situemos con el ratón el indicador de fotograma en 1, de la siguiente manera:

Ahora seleccionaremos la imagen y nos situaremos sobre la Ventana de Comportamientos, donde haremos clic en el botón . En el menú que se abre, nos desplazaremos hasta
. Esto abre un menú adicional en el que seleccionaremos
. Con esto se nos abrirá un pequeño cuadro de diálogo para que indiquemos que línea de tiempo queremos reproducir. Por defecto nos ofrece Timeline 1, que es la única que hemos creado. Pincharemos en “Aceptar y en la Ventana de Comportamientos aparecerá la siguiente línea:

El evento onClick aparece por defecto. Como es el que deseábamos, no vamos a cambiarlo. Ahora grabamos el documento y lo ejecutamos en el explorador. Al hacer clic sobre la imagen, transcurre un segundo exacto y se cambia por la otra que habíamos seleccionado.

8.1.1. EJECUCIÓN AUTOMATICA

Supongamos que queremos que el segundo necesario para cambiar la imagen empiece a contar desde la carga de la página y no sea necesario el clic del usuario. Podríamos ir a la Ventana de Comportamientos, seleccionar el comportamiento que hemos creado y cambiar el evento por onLoad. O podríamos, simplemente, eliminar ese comportamiento y activar la casilla de verificación
de la Ventana de Líneas de Tiempo. En cualquiera de los dos casos, cuando se cargue el documento en el navegador se iniciará, automáticamente, la cuenta de un segundo, tras el cual se producirá el cambio de imagen.

8.2. ANIMANDO UNA CAPA

Hemos visto como lograr un cambio de imagen programado en el tiempo. Ahora vamos a crear una línea de tiempo a la que agregaremos una capa. Una vez mas, empezaremos con un documento nuevo, a fin de aislar y reconocer los procesos que vamos a realizar. En primer lugar abriremos las ventanas necesarias. Estas son, recordemos, la Ventana de Líneas de Tiempo, la Ventana de Objetos y la Ventana de Propiedades. En este caso no vamos a abrir la Ventana de Comportamientos, ya que estableceremos la Reproducción automática en nuestra línea de tiempo, a fin de que se ejecute al cargar el documento. Además crearemos la capa que vamos a animar usando el icono de la Ventana de Objetos. El aspecto de nuestra pantalla de Dreamweaver quedará, inicialmente, así:

Con la capa seleccionada (como aparece en la imagen) la arrastraremos sobre la Ventana de Líneas de Tiempo. Al hacerlo nos muestra el siguiente mensaje:

En el se nos recuerda que atributos de la capa podemos modificar mediante una línea de tiempo. Pulsaremos “Aceptar” para seguir adelante.

A continuación estableceremos la reproducción automática, la velocidad en 25 Fps y estiraremos la representación de la capa hasta los 25 fotogramas, como hicimos anteriormente con la representación de la imagen. La Ventana de Líneas de Tiempo quedará con el siguiente aspecto:

A continuación llevaremos el indicador de fotograma a la posición correspondiente al fotograma 25, y desplazaremos la capa a la posición que deseamos que tenga al final de la animación, así como cambiaremos, por ejemplo, su tamaño. Al final de estas operaciones, la pantalla de Dreamweaver tendrá el siguiente aspecto:

Recuerda que primero desplazamos el indicador de fotograma y luego cambiamos los atributos de la capa. Fíjate que, en la esquina superior izquierda de la capa aparece una línea negra que revela su trayectoria. Por supuesto, esta línea no será visible en tiempo de ejecución. Si ahora pulsamos F12, veremos como se abre el navegador, se carga el documento y se ejecuta la animación. Como ves, a nuestra capa la hemos dotado de un color de fondo para poder apreciar el efecto de la animación sin necesidad de introducir contenidos. Ahora solo es cuestión de seguir experimentando.

9. FORMULARIOS.

Al principio de este temario ya vimos cuales eran los posibles componentes de formularios que se podían incorporar a una página (échale un vistazo a la descripción de la Ventana de Objetos, en el capítulo 2, apartado 2.1.3.). Sin embargo, dada la importancia que los formularios tienen en la programación web actual, vamos a dedicarle un poquito de atención. Veamos como insertar un formulario en un página. En primer lugar, e independientemente de los datos que vaya a manejar el formulario, pulsaremos el icono , de la Ventana de Objetos de formulario, para insertar un formulario en nuestra página. Aparecerán dos líneas rojas punteadas que delimitan la zona de la página que contendrá el formulario. Todos los componentes del formulario los insertaremos entre estas dos líneas, que no serán visibles en tiempo de ejecución. Al situar el cursor entre estas dos líneas, la Ventana de Propiedades (si no está en pantalla la abriremos ahora) toma el siguiente aspecto:

En la casilla que hay debajo del rótulo , teclearemos el nombre de objeto con el que queremos reconocer el formulario, por si luego deseamos invocarlo, por ejemplo, desde un código Javascript. En la casilla que hay a la derecha del rótulo teclearemos la URL y el nombre del programa (normalmente un CGI) que va a procesar nuestro formulario. En la casilla indicaremos si nuestro formulario se enviará al servidor mediante pares nombre-valor (GET) o como correo (POST).

Supongamos que queremos que el usuario nos indique su nombre, el rango de edad en que se encuentra y una indicación acerca de si tiene o no Internet en casa. Podríamos insertar los distintos elementos de formulario usando los iconos que veíamos en el capítulo 2, junto con sus etiquetas. El formulario final podría tener el siguiente aspecto:

Como ves, hemos usado diversos componentes de formularios y los hemos dispuesto en una ubicación adecuada mediante el uso de tablas. Además, a las tablas las hemos dado un borde 0 para que no sean visibles en tiempo de ejecución.

Un consejo importante a la hora de crear formularios: ten presentes las normas de uso de los elementos de formulario que te doy a continuación. En realidad vamos a echarle un vistazo a los elementos de formulario que mas dificultades de uso puedan ofrecer.

9.1. LOS BOTONES DE OPCIÓN

Los botones de opción, también llamados de radio, se agrupan según sean posibles repuestas alternativas a una misma pregunta. En nuestro caso, los cuatro que aparecen son posibles repuestas alternativas a la pregunta de la edad. La forma de agrupar los botones de opción es dando el mismo nombre en la Ventana de propiedades a todos los que pertenezcan al mismo grupo. De esta forma, uno y solo uno podrá estar activado. Naturalmente, si en nuestro formulario hubiera otros grupos, deberán llevar otros nombres. Por ejemplo, suponte que además le preguntamos al usuario si es hombre o mujer. Esta pregunta también se podría contestar mediante el uso de los botones de radio, Pero estos dos últimos botones deberán agruparse mediante otro nombre. En conjunto, las Ventanas de propiedades de los botones del primer grupo podrían ofrecer este aspecto:

Fíjate que todos ellos tienen el mismo nombre de grupo (edad), pero cada uno tiene un valor activado diferente para que sean identificables de forma inequívoca. Si usas también los dos botones de opción correspondientes al sexo, sus Ventanas de Propiedades podrían tener el siguiente aspecto:

Como ves pertenecen al mismo grupo entre sí, aunque diferente de los anteriores. De esta forma, el usuario podrá activar un botón, y sólo uno, de cada grupo.

9.2. LOS BOTONES PULSABLES

Cuando insertas un botón pulsable mediante el icono de la Ventana de Objetos de formulario, puedes seleccionarlo y abrir su Ventana de Propiedades, que tendrá un aspecto similar al siguiente:

En la casilla que aparece debajo del rótulo estableces el nombre identificativo del botón. En la casilla
escribes la etiqueta que quieres que aparezca en el botón. A continuación puedes elegir que tipo de botón deseas insertar. Si insertas un botón de
, cuando el usuario lo pulse enviará el formulario al servidor, contra el CGI o programa que hubieras especificado. Es un botón de tipo Submit. Si eliges
, al pulsarlo se borrará el formulario. Es un botón de tipo Reset. Si escoges , habrás creado un botón que no tiene un fin específico. Para que sea útil deberás asignarle un comportamiento mediante la Ventana de Comportamientos.

9.3. CAMPOS DE ARCHIVO

Pulsando el icono de la Ventana de Objetos de Formulario insertaremos lo que se conoce con el nombre de un campo de archivo. Tiene el siguiente aspecto:
. Cuando el usuario pulse sobre el botón “Examinar” que aparece a la derecha se le abrirá un cuadro de diálogo que le permitirá escoger un archivo de su equipo local. Cuando lo haya seleccionado, el nombre completo del archivo, incluyendo la ruta, aparecerá en la casilla correspondiente del campo de archivo.

9.4. MENU DE SALTO

Para insertar un menú de salto en nuestro formulario pulsamos el icono de la Ventana de Objetos de formulario. Un menú de salto es un menú con varias opciones, que ejecuta, de forma inmediata, la que elige el usuario. Veamos como: al insertar un menú de salto nos aparece el siguiente cuadro de diálogo:

Supongamos que queremos ofrecerle al usuario una opción de acceso directo a tres sitios web que consideramos interesantes. En nuestro ejemplo serán el de Macromedia (www.macromedia.com), el del polémico buscador Yahoo (www.yahoo.com) y el de Microsoft (www.microsoft.com). Además vamos a hacer que el usuario tenga que pulsar un botón “Ir” para que se ejecute el enlace seleccionado. El cuadro de diálogo anterior, después de configurarlo adecuadamente, quedará en la siguiente forma:

Cada vez que deseemos añadir un elemento al menú pulsaremos el botón . Si deseamos suprimir algún elemento pulsaremos . Todos los elementos creados aparecen en la ventana
. El texto asociado (el que verá el usuario) lo teclearemos en la casilla . La dirección URL a la que se producirá el salto cuando el usuario lo escoja la teclearemos en la casilla
. Una vez creado el menú de salto, su aspecto será el siguiente:
. Es necesario hacer notar que el botón “Ir” solo hace falta para ir a la página que ya está seleccionada. Para ir a otra, el salto se produce al hacer la selección.

10. A MODO DE EPILOGO

Y, como todo se acaba en la vida, este texto ha llegado a su fin. Solo espero que hayas disfrutado estudiándolo tanto como yo escribiéndolo. Espero que te haya resultado útil para descubrir uno de los mejores editores de sitios web del mercado. Y espero que, en lo sucesivo Dreamweaver será tu favorito. Estoy seguro de que alguna cosilla me habré dejado en el tintero, así que, si después de leer este texto quieres hacerme alguna sugerencia, puedes escribirme a jquijado@profesores.com y estaré encantado de atenderte. Saludos. Nos vemos en mi próximo temario.

27