Descargar pdf

CREIX
AMB
INTERNET
Avanza en el uso de DreamWeaver CS4
Avanza en el uso de DreamWeaver CS4
Insertar elementos de cabecera
La cabecera de un documento HTML contiene metainformación sobre el documento. La
cabecera está definida por la etiqueta HEAD y no suele estar visible para los visitantes, a
excepción del título de la página.
Contenido de Head
La cabecera contiene información importante además del título del documento: tipo de
documento, la codificación de idioma, las palabras clave, los indicadores de contenido para
motores de búsqueda, etc. No es necesario incluir todos estos elementos para cada página.
Lo
más
normal
es
hacerlo
para
la
página
principal
únicamente.
Para ver los elementos de la cabecera de un documento, elige Menú Ver > Contenido de
Head.
Head Cada icono que aparece en la parte superior de la ventana es un elemento de la
cabecera. Para editar los elementos de cabecera, haz clic en uno de los iconos y define o
modifica sus propiedades en el inspector de propiedades. Para insertar más elementos de
cabecera, elige Menú
Menú Insertar > HTML > etiquetas head y elige el tipo de elemento. Después
define o modifica sus propiedades en el cuadro de diálogo que aparece o en el inspector de
propiedades.
Vamos
a
ver
someramente
los
distintos
elementos
de
2
cabecera:
•
•
Título:
Título Es el título que aparecerá en la barra de título de la ventana de documento y
en la barra de título del explorador cuando se ve la página en un programa de este
tipo. De él ya hemos hablado en la lección anterior.
Meta:
Meta Las etiquetas META registran información sobre la página actual, como
codificación de caracteres, autor, copyright y palabras clave.
El campo Atributo especifica si la etiqueta META contiene información que describe
la página (NAME) o información sobre encabezados HTTP (HTTP-EQUIV). El campo
Valor especifica el tipo de información que se ofrece, como fecha de creación, ID de
documento, nivel, etc. El campo Conteniendo es la información propiamente dicha.
Por ejemplo, si en el campo Valor ha especificado fecha de creación, en el campo
Contenido se introduciría la fecha en cuestión.
3
•
Palabras clave:
clave Estas palabras son fundamentales para que nuestra página sea
fácilmente indexada por los motores de búsqueda y, por tanto, referenciada en la red.
Esto es así porque muchos buscadores leen el contenido de palabras clave y utilizan
la información para indexar las páginas en sus bases de datos. Las palabras clave se
deben introducir separadas por comas, y es conveniente limitarlas a unas pocas.
•
Descripción:
Descripción Este elemento de cabecera también es utilizado por los buscadores para
indexar las páginas Web en sus bases de datos o para hacer un resumen de su
contenido. Por ello, también es importante introducir este elemento. La descripción
deberá ser breve y significativa.
4
•
Actualización:
Actualización la actualización se utiliza en el caso que deseemos que una página
Web concreta se vuelva a cargar automáticamente o pase a otra pasado un tiempo.
En el campo Demora se introducen los segundos que deberán transcurrir antes de
actualizar la página. Las opciones de Acción especifican si se debe pasar a otra
página Web (para lo que deberás introducir una URL) o si lo que quieres es que se
actualice la página actual.
•
Base:
Base Se utiliza para establecer que todas las rutas de la página referentes al
documento sean relativas a una URL base. En el campo Href deberás escribir la URL
base. Por su parte, el campo Destino especifica la ventana en la que se deberán abrir
todos los documentos vinculados. Existen 4 opciones: _blank carga el documento
vinculado en una nueva ventana sin nombre; _parent carga el documento vinculado
en el conjunto de marcos padre o en la ventana del marco que contiene el vínculo;
_self carga el documento vinculado en el mismo marco o la misma ventana que el
vínculo (este destino es el predeterminado, por lo que no es preciso especificarlo);
_top carga el documento vinculado en la ventana completa del explorador,
eliminando todos los marcos.
5
•
Vínculo:
Vínculo Este elemento de cabecera se utiliza para definir una relación concreta entre
el documento actual y otro archivo. En el campo Href debes escribir la URL del
archivo para el que se define la relación. El campo ID especifica un identificador
único para el vínculo. En el campo Título deberás describir la relación. El campo Rel
especifica la relación entre el documento actual y el documento del campo Href.
Href
Existen varios posibles valores: Alternar,
Alternar Hoja de estilos,
estilos Iniciar,
Iniciar Siguiente,
Siguiente Prev,
Prev
Contenido,
Contenido Índice,
Índice Glosario,
Glosario Copyright,
Copyright Capítulo,
Capítulo Sección,
Sección Subsección,
Subsección Apéndice,
Apéndice
Ayuda y Marcador.
Marcador Por último, el campo Rev especifica una relación inversa (es lo
opuesto a Rel)
Rel entre el documento actual y el documento del campo Href.
Href Los valores
posibles son los mismos que los del campo Rel.
Rel
Reglas horizontales
Las reglas (o líneas) horizontales son muy útiles para organizar la información en la página.
Puedes crearlas de la misma forma que hemos visto para los demás objetos. Para modificar
una regla horizontal, primero deberás seleccionarla y después utilizar el inspector de
propiedades. Una regla horizontal tiene las siguientes propiedades: An y Al especifican la
anchura y la altura de la regla en píxeles o en porcentaje del tamaño total de la página. En el
campo Alinear eliges la alineación de la regla (Predeterminada
Predeterminada,
Predeterminada Izquierda,
Izquierda Centro o
Derecha).
Derecha Sombreado determina si la regla debe trazarse con sombreado. Si quieres que
tenga un color sólido, desactiva esta opción.
Insertar imágenes y elementos multimedia
Hasta ahora se ha explicado cómo elaborar una página Web, básicamente con texto
formateado y enlaces. El texto es, pues, hasta el momento, el único componente de
nuestras páginas. Si todas las páginas de la Web tuvieran solamente texto, es probable que
ésta no fuera tan popular como lo es ahora. Por eso, las páginas se enriquecen con
elementos multimedia, es decir, con imágenes, animaciones, sonidos... EI elemento
multimedia más elemental es la imagen. En HTML, la imagen se trata, no como un
elemento que "flota" sobre el texto (como es el caso de los programas de autoedición), sino
como si fuera un carácter más de la página.
6
Imagen y marcador de imagen
Existen dos métodos para insertar una imagen:
1. Escoger la opción Imagen,
Imagen dentro de la barra de menú Insertar.
Insertar
2. En la barra de Inserción (en la configuración por defecto de Común):
Común
•
•
•
•
Seleccionar el botón destinado a la inserción de imágenes, que viene representado
por la imagen de un árbol.
AI hacer clic sobre él, aparecerá una lista desplegable con las diversas opciones de
inserción de imágenes. La primera de todas, Imagen es la dedicada a insertar
imágenes. Clicar en ella.
Se abrirá entonces un explorador de directorios para que podamos localizar el
archivo de imagen deseado.
Seleccionar dicho archivo de imagen y hacer clic en el botón de Aceptar para cerrar el
explorador de directorios.
En este momento aparece la imagen en la página Web (en la vista de diseño). El tamaño
con el que la imagen aparece en la página corresponde al tamaño original de ésta. Hay que
tener en cuenta que, como se ha dicho antes, una imagen se trata -en principio- como un
único carácter a efectos de maquetación. Por lo que si la inserción de la imagen se ha hecho
en mitad de un contenido de texto, éste quedara, con toda probabilidad, "descuadrado"
respecto al diseño original.
Precisamente para ayudar a maquetar mejor una pagina Web, se utiliza la herramienta que
está situada justo por debajo de Imagen en la lista desplegable de la barra de inserción de
imagen; es decir, la herramienta Marcador de posición de Imagen.
Imagen AI seleccionar esta
opción, en lugar de aparecer un explorador de directorios, aparece un pequeño cuadro de
diálogo en el que se nos pregunta por el nombre de la imagen a insertar (es un simple
nombre de referencia, no el nombre de ningún archivo), así como sus dimensiones en
píxeles de anchura y altura.
Al aceptar estos datos, se inserta directamente un recuadro que representa el área que
ocupará la futura imagen. Insertando diferentes marcadores de posición de imagen en la
página, se facilita la maquetación de ésta. EI texto que se edita, justo después de insertar
una imagen, aparece, por defecto, junto en el borde inferior derecho de ésta, siguiendo el
flujo natural del texto. Más adelante se verá como moldear esta alineación según nuestras
7
necesidades.
Para, finalmente, colocar una imagen en el marcador:
•
•
•
Seleccionar el área de marcador de posición de la imagen, en la ventana de edición
(con un simple clic).
Ir al panel de propiedades y hacer clic sobre el botón Crear.
Crear Esta acción abrirá el
programa de edición de imágenes que se tenga definido por defecto (Fireworks, por
ejemplo), con un archivo en blanco de las mismas dimensiones que hayamos
definido en el marcador de imagen.
Se permitirá así la edición de una nueva imagen. Si esta imagen ya existe, se puede
asignar dicha imagen a esta área delimitada por el marcador de posición de imagen,
mediante el panel de propiedades, haciendo clic sobre el icono en forma de carpeta
que esta junto al campo Origen.
Origen Se abrirá nuevamente un explorador de directorios
que nos permitirá buscar la imagen correspondiente, al igual que se hace cuando se
inserta una nueva imagen.
Formatos de imagen compatibles
Los formatos de imagen más comunes son el GIF y el JPEG y se visualizarán sin problemas
en Dreamweaver. Otros formatos de archivo, también compatibles con los navegadores Web
actuales, son BMP y PNG.
Ajuste de tamaño, posición y alineación
Como se ha mencionado anteriormente, el tamaño con el que aparece una imagen en la
página, justo después de ser insertada, es el tamaño original de la imagen.
Una forma rápida de modificar el tamaño de una imagen, una vez insertada, es el siguiente:
1. Seleccionar la imagen en la ventana de edición de Dreamweaver, haciendo un solo
clic sobre ella.
2. Aparece, rodeando la imagen, un recuadro en negro con una serie de tres puntos de
control: uno en la esquina inferior izquierda y dos en los lados inferior y derecho de la
imagen. Al hacer clic y arrastrar cada uno de estos puntos, la imagen cambia de
tamaño, en una dirección (horizontal, vertical) o de forma proporcionada.
8
Como las imágenes se tratan como si fueran grandes caracteres sueltos, la forma de
cambiar su posición dentro de la página es la misma que cuando se posiciona un carácter,
es decir, a base de cambiar la sangría, la alineación, o añadiendo retornos de carro. Sin
embargo, es posible cambiar más atributos de la imagen, como los márgenes, la alineación
del texto respecto a la imagen, etc. Todo ello se consigue localizando cada uno de los
atributos en el panel de propiedades (con la imagen que queremos modificar previamente
seleccionada):
•
Nombre:
Nombre en la esquina superior izquierda del panel de propiedades para la imagen,
se puede ver una miniatura de la imagen, así como un campo de texto que, por
defecto, está relleno con el texto “imagen1".
“imagen1" Este es el nombre de la imagen. No
tiene nada que ver con el nombre del archivo de la imagen. Es un simple nombre
propio de referencia para esa imagen, de entre todas las imágenes que pueda haber
en la página. Por esto es conveniente ajustarlo con un nombre que haga referencia a
su contenido o misión.
9
•
Anchura y altura de la imagen:
imagen justo a la derecha del nombre de la imagen, hay dos
campus etiquetados como An y Al.
Al Estos indican la anchura y altura,
respectivamente, de la imagen en píxeles. Estos parámetros se pueden modificar
manualmente para hacer un ajuste más fino de la imagen. Si se alteran los valores
originales de anchura y altura de la imagen, inmediatamente, en el panel de
propiedades, aparecerá, junto a estos campos An y Al un signo en forma de icono de
"recarga". AI hacer clic sobre este signo, la imagen retornará automáticamente a su
tamaño original.
•
Márgenes laterales:
laterales es posible añadir unos márgenes invisibles a izquierda y derecha,
o arriba y abajo de una imagen, a modo de passepartout de una fotografía.
•
Alineación del texto:
texto al insertar una imagen y continuar con la edición de texto, éste
aparece, por defecto, alineado a la base inferior de la imagen, y, si es demasiado
largo, continua en una nueva línea. A veces, interesa que el texto aparezca alineado a
la misma altura que la imagen, a modo de párrafo explicativo de la misma. Para
ajustar este tipo de alineación, hay una lista desplegable de alineaciones posibles de
texto, en la esquina inferior derecha del panel de propiedades.
Las más interesantes son la izquierda y la derecha,
derecha las únicas que permiten que un
párrafo de un texto empiece en un margen de la imagen y resiga todo el contorno de
la imagen, en lugar de saltar hacia una nueva línea de forma brusca.
Creación de mapas de vínculos
Es posible hacer que no toda la imagen sea un vínculo en si misma, sino solamente alguna
región dentro de ella. Esto puede ser útil, por ejemplo, en imágenes que representen mapas
interactivos (donde cada región del mapa sea un enlace a una pagina diferente) o, también,
si se ha diseñado una interfaz entera en forma de imagen GIF o JPEG, con botones y se
quiere asignar un vínculo distinto a cada uno de ellos.
Una vez que se tiene una imagen insertada en la pagina, para crear regiones interactivas
dentro de ella, se siguen los siguientes pasos:
1. Seleccionar la imagen deseada dentro de la ventana de edición.
2. Desde la barra de inserción, desplegar la opción Imagen.
Imagen En esta lista, existen tres
opciones (las tres últimas) bajo el nombre de:
10
•
•
•
Dibujar zona interactiva rectangular
Dibujar zona interactiva ovalada
Dibujar zona interactiva poligonal
3. Seleccionar una de ellas, la que mejor se ajuste a la forma interactiva que se desee
crear sobre la imagen.
4. Sobre la imagen, en la ventana de edición, el cursor tomará forma de cruz. Cada clic
sobre la imagen definirá un punto del rectángulo o polígono que se dibuje, siempre
sobre la misma imagen. Al acabar de dibujar la figura, el área que queda dentro,
aparecerá coloreada de color azul celeste. Esta área determina la región interactiva
de la imagen.
5. Una vez se ha creado la región interactiva, en el panel de propiedades aparecen los
atributos de la Zona interactiva.
interactiva Uno de los campos que hay que cumplimentar, en el
panel de propiedades, es el de Vínculo.
Vínculo Este campo funciona exactamente igual a
como Io hace el campo Vínculo cuando se trata de enlaces de texto o imagen.
11
Dentro de este mismo panel, en la parte inferior izquierda, se pueden ver cuatro iconos
con la forma de los diferentes tipos de regiones interactivas que se pueden dibujar, más
un icono adicional en forma de flecha de selección.
AI hacer clic sobre éste último, el cursor puede modificar la forma de la zona interactiva
punto a punto, haciendo clic sobre cada uno de éstos y arrastrando su posición. Si, en
cambio, se selecciona uno de los iconos que representan las diferentes formas
interactivas, se dibujará una nueva área sobre la imagen.
Rollover o imagen de sustitución
Un rollover o imagen de sustitución es una técnica por la cual una imagen es sustituida por
otra cuando pasamos por encima el ratón. El rollover se utiliza para dar sensación de
interactividad en la página y para marcar la imagen como botón que enlaza con otro
documento o con una sección del mismo documento.
Los efectos de rollover se consiguen mediante funciones de javascript, aunque si usas
Dreamweaver para crearlos, no necesitarás escribir ni una sola línea de código, pues el
programa lo hará por ti. Para crear una imagen de sustitución deberás seguir estos pasos:
1. Crear las dos imágenes que formarán el rollover. La primera imagen será la que se
visualice desde que el explorador descargue la página. La segunda imagen sólo
aparecerá en cuanto el visitante pase el ratón por encima de ella. Es conveniente que
ambas tengan el mismo tamaño y que estén guardadas en una carpeta del sitio. Éste
es un ejemplo muy simple de dos imágenes que vamos a utilizar como elementos de
rollover:
2. Sitúa el cursor en el punto en el que quieras agregar la imagen de sustitución y elige
Menú Insertar > Objetos de imagen > Imagen de sustitución o bien haz clic en el
botón correspondiente de la paleta de objetos.
12
3. Aparece un cuadro de diálogo y deberás rellenar sus campos.
•
•
•
•
Nombre de la imagen:
imagen En este campo escribirás un nombre para la imagen de
manera que javascript pueda reconocerla y distinguirla de otras.
Imagen original:
original En este campo has de escribir la URL de la imagen inicial, la
que será visible en el primer momento. También puedes hacer clic en el botón
de carpeta para localizar la imagen en la estructura de directorios del sitio.
Imagen de sustitución:
sustitución En este campo escribirás la URL de la imagen
sustitutoria, la que se mostrará cuando el visitante pase por encima con el
ratón. Como en el caso anterior, también puedes hacer uso del botón de
carpeta.
Carga previa de imagen de sustitución:
sustitución Si activas esta opción, el explorador
cargará las dos imágenes en cuanto comience a descargar la página, de
forma que el rollover será instantáneo. Si la desactivas, la imagen de
13
•
sustitución no se cargará hasta que no sea invocada y, por tanto, el rollover no
se producirá de forma instantánea. Siempre es recomendable activar esta
opción.
Al hacer clic, ir a URL:
URL En muchas ocasiones, utilizarás la imagen de
sustitución como elemento botón con un enlace. En estos casos, debes
introducir la URL del documento o recurso enlazado en este campo. Puedes
utilizar el botón de carpeta para seleccionarlo.
4. Una vez rellenados estos campos haz clic en Aceptar.
Aceptar Con estos pasos ya habrás
creado tu primer rollover. Si quieres puedes ver su efecto en el explorador haciendo
clic en la tecla F12.
Barra de navegación
Una barra de exploración es uno de los elementos más recurridos para facilitar la
navegación a través del sitio web. Mediante este elemento podrás crear vínculos a las
principales secciones del sitio además de introducir interactividad a tus páginas.
Básicamente, una barra de exploración es un conjunto de imágenes con funciones de
botones de menú que están dispuestas, o bien horizontalmente en la parte superior de un
documento o al pie del mismo, o bien verticalmente a un lado del documento (normalmente
el izquierdo).
Estos botones funcionan de forma similar a las imágenes de sustitución que ya vimos
anteriormente (es decir, responden a acciones del visitante), aunque poseen dos estados
más que los rollover. Un rollover poseía una imagen original (el estado que será visible
cuando el visitante no interactúa sobre ella o estado Arriba)
Arriba y una imagen de sustitución (el
estado que aparecía al pasar el ratón sobre ella o estado Sobre).
Sobre Pues bien, mediante una
barra de exploración, puedes crear dos estados más:
•
•
Abajo:
Abajo Este estado será el que muestre la imagen una vez que el visitante ha
hecho clic sobre el botón y, por tanto, ha abierto el vínculo relacionado. El
estado Abajo es muy útil para mostrar en qué lugar del sitio se encuentra el
visitante. En el instante en que el visitante hace clic sobre otro botón, el botón
actual vuelve a su posición Arriba.
Arriba Por tanto, sólo una imagen de la barra de
navegación puede estar en posición Abajo al mismo tiempo.
Sobre mientras abajo:
abajo Este estado será el que muestre la imagen cuando el
botón se encuentre en su estado Abajo y el visitante pase el ratón por encima.
1. Lo primero de todo es crear las imágenes que formarán parte de cada uno de los
cuatro estados. Debes saber que no es necesario que cada estado tenga una imagen
14
definida. Por ejemplo, puedes decidir que solamente vas a crear los estados Arriba,
Arriba
Sobre y Abajo.
Abajo Asimismo, puedes elegir que dos o más estados estén asociados a la
misma imagen. El único estado que es imprescindible definir es Arriba.
Arriba
2. Elige Menú Insertar > Objeto de imagen > Barra de navegación o haz clic en el botón
correspondiente del panel común de la paleta de objetos.
3. Aparece el cuadro de diálogo Insertar barra de exploración.
exploración
4. Rellena el cuadro de diálogo atendiendo a estas opciones:
•
•
•
•
Elementos de la barra de exploración:
exploración Cada uno de los botones que crees para
la barra de exploración aparecerán en este listado. Encima del listado, en la
parte izquierda, hay dos botones ( + y -) para añadir o borrar elementos de la
barra. También encima del listado, pero en su parte derecha, hay dos botones
con flechas para cambiar la posición en la lista del botón seleccionado.
Nombre del elemento
elemento:
nto En este campo debes introducir un nombre para cada
botón que quieras crear en la barra de exploración.
Arriba, sobre, abajo, sobre mientras abajo:
abajo introducir la ruta que lleva a la
imagen en cuestión o seleccionarla tras hacer clic en el icono
Al hacer
hacer clic ir a la URL:
URL En este campo debes introducir la URL del
15
•
•
•
documento destino del vínculo. En el menú desplegable de la derecha
selecciona una ubicación en la que se abrirá el archivo. Las opciones que hay
son Ventana principal (para abrir el archivo en la misma ventana) o Marco
(selecciona uno de los marcos que tiene la página actual).
Carga previa de imágenes:
imágenes Con esta opción seleccionada el explorador carga
todos los estados de los botones al iniciar la carga de la página. Si esta opción
no está seleccionada, es posible que se produzca una demora cuando el
visitante mueva el cursor sobre el botón carpeta.
Mostrar imagen abajo inicialmente:
inicialmente Con esta opción seleccionada el
explorador muestra el botón seleccionado en su estado Abajo cuando se carga
la página. Esto te servirá, por ejemplo, si tienes un botón para ir a la página
principal en la barra de exploración. De esa forma cuando se carga la página
principal, el botón de dicha página estará en su estado Abajo.
Abajo
Insertar:
Insertar Puedes escoger entre barra de exploración vertical u horizontal con el
menú emergente. Para insertar los elementos de barra de exploración en una
tabla, activa la casilla de verificación Usar tablas.
tablas
5. Cuando hayas rellenado el cuadro de diálogo con el primer elemento de la barra de
exploración, haz clic en el botón más (+
+) para agregar otro botón.
6. Cuando hayas agregado todos los botones para tu barra de exploración haz clic en
Aceptar.
Aceptar
Trabajar con archivos de flash – SWF
De Applets de Java y de controles Activex hay muchos, y por lo tanto la manera de
insertarlos en una página Web es muy genérica. Sin embargo, otros formatos especiales
(cómo son Shockwave de Macromedia Director o Flash) son tan Comunes a la Web que vale
la pena que Dreamweaver nos facilite la tarea de insertar elementos de este tipo
directamente a la página Web. Por eso es por lo que hay una serie de herramientas "extra",
que permiten añadir efectos interesantes a una página a partir sobre todo de la tecnología
Shockwave de Flash.
Texto de Flash
Uno de los inconvenientes más Comunes cuando hace falta determinar un diseño específico
para una página Web, acontece cuando se quiere que la página aparezca con una tipografía
determinada, es decir, con un tipo de letra concreto. Si esta tipografía no es demasiado
común, la mayoría de usuarios no la tendrá a su sistema operativo y, por lo tanto, no podrán
ver la página de manera adecuada. Una manera de solucionar este inconveniente (si se está
decidido a utilizar una tipografía especial y no hacer caso del tema de la compatibilidad de
sistemas operativos) se utilizar la herramienta Texto Flash.
Flash Además, este tipo de texto tiene
la ventaja que puede ser interactivo (tener un enlace) y permite añadir efectos como el
cambio de color al pasar el ratón por encima del texto (efecto rollover o imagen cambiante).
16
Para insertar un texto de Flash en una página Web, hace falta seguir los pasos siguientes:
Seleccionar la herramienta Texto Flash,
Flash de la lista desplegable de elementos de interfaz
(Media
Media).
Media
Al cuadro de diálogo que aparece hace falta llenar los siguientes campos:
•
Fuente:
Fuente lista desplegable que muestra todas las fuentes instaladas al sistema
operativo. Se puede seleccionar cualquiera de ellas como fuente del texto Flash.
•
Medida:
Medida introducir la medida de la fuente, en puntos.
•
Modificadores
Modificadores de estilo:
estilo debajo del Campo Fuente hay una serie de modificadores
del estilo del texto (negrita, cursiva y alineación).
•
Color y Color de sustitución:
sustitución en estos selectores de Color, se define el color por
defecto del texto y también el color que tendrá cuando se pase el cursor por sobre
(color de sustitución).
•
Texto:
Texto aquí se escribe el texto que se quiere mostrar a la página como texto Flash.
•
Vínculo:
Vínculo se puede introducir, opcionalmente, una dirección hacia una página del lugar
Web local, o cualquiera otra URL, por convertir el texto Flash en un enlace.
•
Destino:
Destino escribir aquí el destino del vínculo.
•
Color de fondo:
fondo el texto aparece, por defecto, con un fondo de color blanco, pero se
puede modificar con este selector de colores.
•
Guardar archivo:
archivo cuando Dreamweaver crea el archivo Shockwave de Flash (SWF)
que corresponde a este texto, el archivo se debe guardar separadamente, dentro de
la misma carpeta dónde esté la página Web. En este campo se escribe el nombre
con el cual se quiera bautizar este archivo SWF.
Se hace clic en Aceptar.
Aceptar El texto aparecerá con todos los atributos, y se comportará como
una imagen, a efectos de maquetación.
Botones de Flash
Otra de las posibilidades que ofrecen los elementos multimedia de interfaz que se pueden
añadir a una página Web, son los botones realizados en Flash. Dreamweaver puerta toda
una serie de botones que pueden ser insertados directamente en una página Web. La
interactividad puede convertirlos en una manera alternativa de presentar vínculos a la
página.
Para insertar un botón Flash a la página Web se siguen los pasos siguientes:
1. Colocar el Cursor en el punto de la página dónde se quiera insertar el botón de Flash.
2. Seleccionar la herramienta Botón Flash de la lista de herramientas de elementos de
17
interfaz.
3. Se abre, entonces, un cuadro de diálogo donde hace falta configurar los campos
Siguientes:
•
Estilo:
Estilo elegir de la lista el estilo de botón que se quiere. Se puede ver una
muestra de cada estilo al recuadro superior.
•
Texto del botón:
botón en este campo se escribe la leyenda del botón. Hay que tener
en cuenta que no puede exceder la propia longitud del botón. El resto de
atributos (fuente, medida, vínculo...) se ajustan igual a como se hace con el
Texto Flash.
4. Hacer clic a Aceptar para que aparezca el botón Flash a la ventana de edición.
Cada estilo de botón de Flash tiene su propio efecto por resaltar, que no permite cambios.
Así, es posible descargar nuevos botones de Macromedia Exchange.
Archivos de Flash
Quizás la herramienta más útil de esta categoría sea la que sirve por insertar animaciones
genéricas de Flash, puesto que cada vez es más grande la demanda de contenidos en la
Web en este formato. La manera de insertar una animación de Flash en una página Web,
con Dreamweaver, es muy similar al método de insertar, por ejemplo, un applet. El
procedimiento es el siguiente:
1. Colocar el cursor a la altura de la página dónde se quiera insertar la animación.
2. De la lista desplegable de elementos de interfaz, seleccionar la herramienta Flash (la
primera opción).
3. Se abre un explorador de directorios que permite localizar el archivo SWF (animación
Shockwave de Flash) que se quiere insertar. Como siempre, este documento debe
encontrarse, al menos, dentro de la carpeta del lugar web local.
4. En el panel de propiedades se pueden ajustar opciones que hacen referencia a
atributos genuinos de una animación de Flash. Las propiedades principales son:
•
An y Al:
Al estos campos definen la anchura y la altura (en píxeles) de la
animación. También es posible cambiar manualmente la medida mediante
los habituales puntos de control de medida.
•
Origen:
Origen aunque el archivo que se visualiza es un archivo SWF, es posible
especificar en este Campo la ruta hacia el archivo original de Flash (archivo de
extensión FLA) con el fin de que, en caso de hacer modificaciones en la
animación, se pueda abrir directamente el documento original a través del
botón Editar.
Editar
•
Restablecer medida:
medida en caso de que se haya cambiado la medida del área
que ocupa la animación de Flash de manera arbitraria, un simple clic en este
botón vuelve esta área a la medida original que tenía el archivo SWF.
•
Bucle:
Bucle Si se activa esta casilla, la animación de Flash se reproducirá
constantemente volviendo al principio. Esta propiedad también se puede
18
establecer en exportar un archivo de Flash en formato SWF.
•
Rep. Autom.:
Autom. Si se activa esta casilla, la animación de Flash empieza a
reproducirse automáticamente al cargarse la página.
Ficheros Shockwave
En el supuesto de que los archivos multimedia que se pretenden insertar a Dreamweaver no
sean de Flash, sino de Macromedia Director Shockwave, a la lista desplegable de elementos
de interfaz hay que escoger la herramienta Shockwave.
Shockwave
Ésta funciona de manera análoga a las comentadas anteriormente: se abre un explorador
de directorios que permite seleccionar el archivo Shockwave que se quiere incrustar. Una
vez seleccionado el archivo, este se inserta en la página HTML como una área de imagen
con el logotipo de Shockwave.
Trabajar con tablas
Una tabla es una herramienta de diseño que te permitirá componer páginas Web con una
clara estructura de contenidos. Usar tablas es la forma más racional de distribuir los
elementos que forman parte de una página Web. La opción la tomamos del Menú Insertar >
19
Tabla.
Tabla
Las tablas están formadas por tres componentes básicos: filas (que organizan el espacio
horizontal), columnas (organizan el espacio vertical) y celdas (que son los contenedores que
se originan en las intersecciones de las filas y las columnas). Éste es un ejemplo de tabla en
Dreamweaver:
20
Hay algunas consideraciones que debes tener en cuenta cuando vas a trabajar con tablas.
Una muy importante es que el ancho máximo de una celda marcará el ancho de las demás
celdas de la misma columna. De igual forma la altura máxima de una celda marcará la
altura de las demás celdas de la misma fila. De esta forma se mantiene siempre el aspecto
de tabla regular.
Seleccionas la tabla y en el panel de propiedades obtendrás las propiedades de tabla.
Pulsando en el teclado Ctrl + clic sobre una celda, el cuadro de propiedades se refresca y se
obtienen las propiedades de celda. Observa en el ejemplo anterior que puedes alinear el
contenido en cada celda.
Al unir entre sí dos celdas pertenecientes a una misma columna o a una misma fila, la celda
resultante adopta el tamaño necesario para mantener la estructura de tabla con respecto a
las demás celdas. Esto quiere decir que si unes dos celdas de distintas columnas el ancho
de la celda resultante será equivalente al ancho de las dos columnas. De igual forma si unes
dos celdas de distintas filas el alto de la nueva celda será equivalente al alto de las dos filas.
21
Dentro de cada una de las celdas puedes insertar texto, imágenes o datos tabulares.
Además, Dreamweaver te permite de forma sencilla agregar, eliminar, dividir y combinar
filas y columnas, modificar las propiedades de tabla, de filas o de celdas y copiar y pegar
celdas.
Observa que se pueden adaptar las celdas al contenido.
22
Observa que puedes adaptar las celdas al contenido.
Trabajar con elementos PA (capas)
Diferencias básicas entre la maquetación en capas y tablas:
•
Estándares recomendados por la W3C. La guerra de navegadores ha sido, es y
seguirá siendo una batalla en la que los más perjudicados son los maquetadores.
Hay ocasiones en las que conseguir que una página se vea igual en explorer y firefox
(los navegadores más importantes actualmente) supone un verdadero quebradero de
cabeza.
•
Lo que se pretende por parte de la W3C, es unificar criterios. Para empezar,
establece que las tablas no se crearon para maquetar, si no para tabular contenidos,
por lo que no deben de usarse para otra cosa que no sea esa. Otra razón para no usar
tablas es que muchas de las etiquetas que usábamos para dimensionar nuestras
celdas ahora ya no cumplen los estándares. El uso de W3C nos garantiza que
apostamos por una tecnología de futuro, por lo que nuestro esfuerzo e inversión
23
siempre será más duradero.
•
Accesibilidad:
Accesibilidad Para que las páginas empiecen a verse bien en cualquier dispositivo
(teléfonos, PDA, televisión, PC…) lo que ahora se intenta es separar el contenido de la
estructura. De esta forma con una modificación en la CSS podremos fácilmente
adaptar una página a los distintos dispositivos. El peso de la página se optimiza
mucho al usar capas, esto supone mayor rapidez de carga.
•
Posicionamiento
Posicionamiento:
amiento El uso de tablas influye negativamente en Google. El navegador lee
una tabla tal y como se ha formado y no visualmente como lo puede hacer cualquier
humano. Esto es, empieza por una columna (la primera de la izquierda) y hasta que
no la ha terminado no pasa a la segunda. Si además tenemos nuestra maquetación
llena de tablas anidadas, esto ocasionará que nuestro texto relevante no lo sea para
el buscador, y por lo tanto no sea indexado. Gracias a las etiquetas <div> y a la CSS,
CSS
podemos hacer que sea casi inapreciable el código que se encuentra entre estos
contenidos relevantes, haciendo la indexación mucho más fácil.
Para crear capa, en el menú Diseño seleccionas Dibujar capa.
capa Con el cursor dibujas la capa
a mano alzada con tamaño y posición que tu decidas sobre la zona de edición.
24
En el cuadro de propiedades puedes modificar las propiedades de posición, tamaño, índice z
(profundidad de capa), color de fondo, imagen de fondo y permitir que sea visible o no. Las
capas nos permiten además poner dentro texto, imágenes, películas de Flash e incluso una
tabla. Esto nos permite posicionar una tabla en cualquier parte que deseemos en nuestro
documento.
25
En el menú Ventana > Capas obtienes el panel de control de capas donde puedes modificar
su nombre (ID), la profundidad (número z) y su propiedad de visible e invisible.
Eventos: añadir comportamientos en DreamWeaver
El único tipo de interactividad que se ha visto hasta ahora era la de los enlaces o links. Sin
embargo, gracias al hecho que las páginas Web no son sólo HTML estático, es posible
aplicar una interactividad rica, que permite hacer que la experiencia de los visitantes de
nuestra Web pueda ser más entretenida y útil. Esta nueva interactividad permite que los
objetos que componen la página Web respondan, no sólo a un simple clic, sino a otros tipos
de interacción (cómo puede ser situar el cursor encima, arrastrarlos por la pantalla, hacer
doble clic...).
Además, la interactividad se puede extender a objetos no explícitos de una página. Por
ejemplo, se puede activar una acción con la carga misma de la página, o al cambiar el
contenido de un campo de texto de un formulario. A esta serie de “eventos", a la vez, se les
puede asociar una respuesta: desde un simple enlace a otra página, hasta el control de la
reproducción de una animación de Flash. Toda esta interactividad es posible gracias a
Scripts de programación Javascript, y Dreamweaver simplifica enormemente la tarea de
26
programar estos Scripts gracias a los comportamientos.
En Dreamweaver, se entiende por “comportamiento” la unión de un evento y una acción.
Como "evento" se entiende una acción realizada por el usuario que ve la página Web o por
la misma página Web que puede ser detectada por el navegador. Básicamente, un evento
es una interacción con la página. Por ejemplo, un evento podría consistir que el usuario
haga clic sobre un texto o una imagen, y también el momento justo que la página Web se
carga completamente.
Las "acciones" son el resultado de un evento, es decir, la respuesta a esta interactividad.
Mientras que la lista de eventos posibles está limitada por la interactividad que el navegador
pueda ofrecer, la lista de acciones es, a la práctica, infinita (la respuesta que queramos dar
a un evento puede ser la que queramos).
Por esto, Dreamweaver dispone de una lista de acciones predefinidas, que cubren la
inmensa mayoría de las necesidades. Estas acciones pueden consistir en ejecutar un enlace
sencillo, abrir una ventana del navegador con una nueva página o mensaje, cambiar el texto
de una capa, controlar la reproducción de una animación de Flash, etc. A través del tablero
de comportamientos (dentro del tablero Etiqueta,
Etiqueta que se activa con el atajo de teclado
Majús+F3),
Majús+F3 se gestionan los comportamientos asignados a cada elemento de la página que
los posea, mostrando el evento y la acción que componen cada uno de estos
comportamientos.
Asignación de comportamientos: Tal y como se ha mencionado anteriormente, los
comportamientos se pueden asociar a diferentes elementos de una página Web que
admitan interactividad. Estarían incluidos los elementos explícitos o visibles (como por
ejemplo textos, imágenes, campos de formularios, etc.), y los elementos invisibles, por
ejemplo, la cabecera de la página, un formulario, etc.
De manera estricta, un comportamiento se asigna a cualquier etiqueta HTML que forme
parte de la página Web. Unas etiquetas corresponden a elementos visibles (por ejemplo, la
etiqueta <img> para imágenes) y, otras corresponden a elementos invisibles (por ejemplo,
la etiqueta <body>,
<body> que hace referencia al inicio del cuerpo de la página).
En este apartado, se muestra como asignar comportamientos a los diferentes elementos de
una página.
Asignación a elementos de una página
Para asignar un comportamiento a un elemento explícito de la página (un texto, una imagen
o animación) se siguen los pasos siguientes:
Seleccionar el elemento al cual se asignará el comportamiento, haciendo clic encima.
En tablero Comportamientos,
+" para
Comportamientos se hace Clic sobre el botón etiquetado con un signo “+
acceder a una lista desplegable con todas las acciones posibles. No todas estarán activas.
Esto quiere decir que las acciones no activas no son aplicables al elemento de la página que
hemos seleccionado.
La mayoría de acciones requieren llenar un cuadro de diálogo con unos parámetros
27
determinados. Llenar el cuadro de diálogo correspondiente y hacer clic en Aceptar.
Aceptar
Aparecerá una nueva entrada, el tablero de comportamientos compuesto por el evento
asignado a la acción (a la columna de la izquierda) y la acción que hemos seleccionado (a la
columna de la derecha). Como que el evento asociado lo toma Dreamweaver al azar, se
puede cambiar escogiendo el que se quiera del menú desplegable (por ejemplo, onClick se
puede sustituir por onMouseUp).
onMouseUp Según la etiqueta HTML responsable del elemento
mencionado, la lista de eventos posibles será más o menos limitada.
A un mismo elemento se le pueden asociar varios comportamientos, asociados eventos
diferentes. En este caso no hay ningún conflicto, puesto que cada acción sólo se ejecutará
cuando se active el evento concreto. También es posible asignar diferentes acciones a un
mismo evento.
Por ejemplo, se pueden activar varias acciones diferentes al hacer clic sobre un elemento.
En este caso, sí que podría haber conflicto entre ellas, puesto que, si hay más de una acción
asociada y un mismo evento, ¿qué se ejecuta en primer lugar? Para decidir el orden en el
cual se ejecutan las acciones, el mismo tablero de comportamientos hay un par de botones
etiquetados con forma de flecha hacia arriba y otro bajo. Si es selecciona un
comportamiento de la lista y se hace clic sobre un de estos botones, se consigue mover
hacia arriba, o hacia abajo. El orden de ejecución de las acciones asignadas e un mismo
acontecimiento será el que aparezca en el tablero de comportamientos, de arriba abajo.
Eventos asociados
Al asignar un comportamiento a un elemento de la página, es importante tener claro, en
primer lugar, qué acción se quiere ejecutar y a qué evento responderá. Por ejemplo, si se
quiere asignar un comportamiento a un texto y se siguen los pasos de del apartado anterior,
es posible que al desplegar el menú de posibles eventos, sólo nos aparezcan unos cuántos, y
que estos no sean los que queramos aplicar. En este ejemplo concreto, si el texto el cual
queremos asignar un comportamiento no tiene ningún vínculo asignado, los únicos eventos
que aparecerán en la lista serán onLoad,
onLoad onAbort y onError.
onErro
Para hacer que un elemento común de una página Web (como un texto o una imagen)
tenga disponibles los eventos más comunes, como hacer clic (o doble clic), pasar el cursor
(efecto de imágenes cambiantes rollOver), etc., hace falta que este elemento tenga
asociado un vínculo. Cuando un elemento de la página tiene un vínculo asociado, se rodea
de una etiqueta <A>,
A> responsable de los enlaces. A esta etiqueta se le puede asignar una
gran cantidad de eventos interactivos. Por esto hace falta, antes de asignar un
comportamiento a un texto o a una imagen, asignarles un vínculo.
Pero, de hacerse esto, al hacer Clic Sobre el elemento, se ejecutaría el enlace, y quizás no es
esto lo que pretendemos. Hay un método para conseguir que un elemento sea interactivo
(tenga la etiqueta asociada), sin necesidad de establecer un enlace real. Consiste en escribir
al campo Vínculo del tablero de propiedades un signo “#
# “ (vínculo neutro) que hace que el
texto o la imagen aparezcan como vinculados pero sin efecto.
Si se vuelve a asignar un comportamiento al elemento al cual hemos asignado un vínculo
neutro, se comprueba que la lista de eventos se ha ampliado con una serie de eventos
interactivos, como onMouseUp,
onMouseUp onClick,
onClick etc.
28
En general, cuando se selecciona un elemento de la página por asignarle un
comportamiento, sólo aparecen aquellos eventos que son compatibles. De todos modos, y
como se ha visto en este caso, una pequeña modificación abre la puerta a nuevos eventos.
La recomendación es, sencillamente, "ir investigando" las posibilidades que ofrece cada
elemento.
Estos eventos están relacionados con la etiqueta HTML <A>,
<A> es decir que requieren que el
elemento tenga un vínculo.
La cantidad de eventos disponibles depende, en gran medida, de la versión del navegador
para la cual se está diseñando la página. Este es un aspecto muy importante cuando se
trabaja con comportamientos. Antes de añadir acciones, hace falta verificar qué eventos
podremos utilizar, comprobando la lista de compatibilidad del navegador. Esta lista se
puede encontrar al final de la lista desplegable de las acciones, con el nombre de Opción
mostrar eventos para.
para Cuanto más moderna sea la versión que escogemos en esta lista más
acontecimientos tendremos a nuestra disposición, pero, por el contrario, nuestra página no
será compatible con versiones anteriores.
Un vez definida la compatibilidad con el navegador, se pueden visualizar qué eventos están
disponibles, con la activación del botón Mostrar todos los eventos,
eventos situado justo a la
izquierda del botón de añadir acciones del tablero de comportamientos. El botón que hay la
izquierda de este último, vuelve el tablero al modo normal, dónde sólo se muestran los
eventos que ya se han asociado a una acción.
29
Asignación a acontecimientos de página o de sesión
Como se ha dicho anteriormente, lo más habitual es asignar un comportamiento a un
elemento visual de la página (textos, imágenes, etc.). Sin embargo, también es posible
asignar comportamientos a la página Web en sí, que es sensible a acontecimientos
"PASIVOS‛’ (no interactivos con el usuario directamente) como la carga de la página, el
cierre de la ventana del navegador dónde se está visualizando la página, etc.
Asignar un acontecimiento a una página no es una tarea sencilla. A menudo puede pasar
que creamos que hemos asignado un comportamiento a la página y se haya asignado a un
elemento, o viceversa.
Si se quiere asignar un acontecimiento relacionado con la página Web en sí, se pueden
utilizar dos métodos:
En la vista de diseño, colocar el cursor justo a primeros de la página o bien,
En la vista de código, buscar la etiqueta de Apertura <body> a primeros del código de la
página, y colocar el cursor justo tras esta etiqueta.
De esta manera, cuando desde el tablero de comportamientos se asigne una acción, esta
30
estará relacionada con el evento de página que se seleccione de la lista desplegable adjunta
de eventos.
Los eventos típicos que se asocian a una página Web Son:
Navegación: Ir A URL y Abrir ventana del navegador
Existen dos acciones que sirven por enlazar con otra página Web:
Ir A URL
Abrir ventana del navegador
Estas acciones representan una mejora respeto al vínculo tradicional. Este último sólo
funciona haciendo clic sobre el elemento que tenía un vínculo asignado. Con estos nuevos
comportamientos es posible, por un lado, invocar un enlace a otra página con cualquiera de
los eventos disponibles, y por otra, que el enlace se ejecute en una nueva ventana del
navegador. Esto, de hecho, ya se podía hacer con un vínculo tradicional (asignando, a la lista
de destinos, la opción _blank,
_blank que abría la página de enlace en una ventana nueva). Sin
embargo, con estos comportamientos se posible, además, especificar las características de
la nueva ventana, cosa que con un vínculo sencillo no se podía hacer.
Ir A URL:
URL Esta acción corresponde a un enlace tradicional. Para aplicar este
comportamiento, se siguen los pasos siguientes:
Se selecciona un elemento al cual se quiere asignar la acción.
En el tablero de comportamientos se despliega la lista de acciones y se selecciona la acción
Ir A URL.
URL Si esta acción aparece en gris (desactivada) verificar que antes haya seleccionado
un elemento de la página que admita esta acción.
Al cuadro de diálogo que aparece hay que llenar el campo URL,
URL que lo dirige a URL de la
página Web de destino. En la lista Abrir en seleccionar el destino dónde se ejecutará el
enlace. Si la página está compuesta por marcos, en esta lista también aparecerán los
posibles marcos de destino.
Hacer clic a Aceptar por validar la acción.
En el tablero de comportamientos, en la columna de eventos, Seleccionar un evento que se
ajuste mejor a nuestras necesidades.
A partir del elemento seleccionado se comportará como un enlace normal con una ventaja
que, en lugar de un simple clic, el enlace se activará con el que hayamos escogido (con
doble clic, por ejemplo).
Abrir ventana del navegador: Esta acción sirve para abrir una ventana nueva del navegador,
con las características que le determinamos y con la URL de destino que se quiera.
El procedimiento par a añadir este comportamiento a un elemento de la página es análogo
al que se utilizó a la acción Ir A URL,
URL pero en este caso el cuadro de diálogo de la acción
tiene una serie de campos que hace falta ajustar:
31
Mostrar URL:
URL en este campo se escribe el nombre de la página del sitio local que se quiere
que aparezca a la nueva ventana, o la URL correspondiente.
Ancho de la ventana y Alto de la ventana:
ventana aquí se especifica la medida de anchura y altura
de la ventana que se abrirá, en píxeles.
Atributos
Barra de herramientas de navegación:
navegación Si se activa esta casilla la nueva ventana que se abre
aparecerá con la barra que permite la navegación.
Barra de menús:
menús al activarla, la ventana que se abra tendrá los menús del navegador.
Barra de herramientas de ubicación:
ubicación la ventana del navegador que se abre y aparecerá con
la barra de herramientas.
Barras de desplazamiento si son necesarias:
necesarias por defecto la ventana que se abre no tiene
barras de desplazamiento y, si hay contenido más allá de la medida de la ventana no se
puede ver. Al activar esta casilla, se provoca que, si el contenido es más grande que la
ventana que se abra, se activen automáticamente las barras de desplazamiento.
Barra de estado:
estado activa hace que la ventana del navegador que se abre también tenga la
barra del correspondiente.
Selectores de cambio de medida:
medida En principio no se puede cambiar la medida especificada
de esta nueva ventana, pero si se activa esta casilla, el usuario puede cambiar la medida,
arrastrando los selectores de cambio de medida de la esquina de la ventana.
Nombre de la ventana:
ventana en este campo se escribe un nombre propio que identifique la
ventana que se abrirá. Es un valor opcional, pero siempre es útil asignar un nombre. Esta
acción puede ser de mucha utilidad en algunos casos: para abrir un popup
popup (una ventana
emergente) al cargar la página (para que se muestre una publicidad, por ejemplo). El evento
que se habría de asociar a la acción sería, en este caso, onLoad.
onLoad
Carga previa de imágenes
Esta acción permite que una serie de imágenes que están en el servidor (en el lugar remoto)
se vayan cargando (como un proceso de fondo) a la memoria del ordenador del usuario que
visita la página. En general estas imágenes no se muestran directamente en la página, sino
que han de aparecer de manera instantánea a causa de alguna interacción (por ejemplo,
que una de estas imágenes sea la de sustitución de otra ya existente).
También es útil si se quiere que todas las imágenes de una página aparezcan de golpe, en
vez de ver cómo se van descargando de una en una. Al estar previamente descargadas en la
memoria, cuando se las invoca para que aparezcan en pantalla, lo hacen de manera
inmediata, puesto que no hace falta esperar que se descarguen del servidor en línea.
El procedimiento para aplicar un comportamiento con esta acción es análogo al resto:
cuando se selecciona de la lista de acciones aparece un cuadro de diálogo en el cual hay
32
que ajustar los siguientes campos:
Carga previa de imágenes:
imágenes en esta lista aparecen los nombres de los ficheros de imagen
que se cargarán previamente. Para añadir archivos a esta lista sólo hace falta pulsar el
botón con la etiqueta ‛‘+‛'.
‛‘+‛' Si se quiere sacar una imagen de la lista, una vez incluida, se
selecciona y se hace clic sobre el botón “-".
Archivo de origen de imagen:
imagen en este campo se indica la ruta hacia el archivo de imagen que
se quiere añadir a la lista. El botón Examinar abre un explorador de directorios para ayudar a
la búsqueda de este archivo.
Una vez compuesta la lista de archivos se hace clic sobre Aceptar para validar la acción.
Mostrar y ocultar capas
Otra acción interesante es la de Mostrar u ocultar capas.
capas Esta acción permite (de manera
dinámica y aplicable a casi cualquier evento) controlar las propiedades de visibilidad de
todas de las capas que hay en la página. Esto puede ser útil para muchas aplicaciones:
simular globos de ayuda al pasar el ratón sobre una palabra clave en un texto, ocultar
regiones de un plano, banners dinámicos de publicidad, etc.
Para aplicar este comportamiento, se siguen los pasos siguientes:
Seleccionar el elemento de la página (texto, imagen, botón...) que haya de asociarse con la
acción. Si la acción se ha de asociar a la misma página, situar el cursor a al inicio, o justo
tras la etiqueta <body> a la vista de código.
En la lista de acciones, seleccionar la acción Mostrar - Ocultar Capas.
Capas Esta acción tendría
que estar activa si en la página hay, al menos, una capa.
En el cuadro de diálogo que se abre, ajustar los campos siguientes:
Capas con nombre:
nombre en esta lista aparecen los nombres de todas las capas que están
insertadas en la página. Por esto es importante, cuando agregamos una capa a la página,
asignar un nombre adecuado. Para controlar la visibilidad de cada capa hace falta
seleccionar su nombre de esta lista.
Botones Mostrar,
Mostrar Ocultar y Predeterminada:
Predeterminada una vez que se ha seleccionado la capa de la
lista estos botones ajustan la visibilidad de la misma El botón Mostrar muestra la visibilidad
de esta capa (aunque tuviera otro ajuste por defecto). El botón Ocultar ajusta la visibilidad
de la capa a "invisible", mientras que el botón Predeterminada respeta la visibilidad que ya
tiene la capa.
Hacer Clic sobre el botón Aceptar para validar el comportamiento.
Mensajes emergentes
Esta sencilla acción es una de los más extendidas y utilizadas. Un mensaje emergente es
33
una simple ventana de alerta del sistema con un mensaje en el interior. Esta ventana
desaparece cuando se hace Clic al botón Aceptar que hay adentro. Es un método sencillo y
eficiente para mostrar recordatorios, avisos, etc, a los usuarios de la página. Por ejemplo, se
puede utilizar como mensaje de bienvenida, como advertencia antes de entrar en un campo
de un formulario, etc.
Para añadir un comportamiento con la acción de mensajes emergentes, hace falta seguir
los pasos sugeridos:
•
Como siempre, seleccionar a qué elemento recibirá el evento del comportamiento.
•
De la lista de acciones, seleccionar Mensaje emergente.
emergente
•
En el cuadro de diálogo que aparece llenar el campo Mensaje con el texto que saldrá
dentro de la ventanilla de alerta.
•
Aceptar para validar el comportamiento.
•
Ajustar, al tablero de comportamientos, el acontecimiento que mejor se ajuste a
nuestras necesidades.
34