Estado OFF | Estado ON |
Imágenes de sustitución en DreamWeaver
La imagen de Sustitución describe un comportamiento interactivo que se activa simplemente al pasar el cursor del mouse encima de la imagen en cuestión, es decir, cuando usted desliza por encima el cursor del mouse sobre la imagen ésta cambiará por otra imagen.
En primer lugar se necesitarán dos imágenes, una que estará en estado OFF o Apagado, la cual actuará cuando el cursor del mouse no esté encima de la imagen, la segunda imagen solo actuará en estado ON o Encendido, esto quiere decir que se hará presente siempre y cuando el cursor del mouse esté encima de la imagen con el comportamiento interactivo.
| |
Después de conseguir las dos imágenes necesarias para aplicar este comportamiento interactivo se necesitará ir al menú principal del programa y elegir la opciónInsertar, inmediatamente seleccione Objetos de Imagen y en el menú emergente elija Imagen de sustitución, tal como muestra la siguiente imagen.
En este instante usted deberá rellenar el cuadro de diálogo Insertar imagen de sustitución. A continuación se describirá brevemente cada campo.
Nombre de la imagen:
Servirá para tener una referencia de la imagen que presenta un comportamiento interactivo.
Imagen original:
Esta imagen será la que actuará en estado OFF
Imagen de sustitución:
Esta imagen será la que actuará en estado ON
Carga previa de imagen de sustitución :
Es importante marcar esta casilla de verificación, ya que permite que se incluya automáticamente en la carga de la página la(s) imagen(es) de sustitución (las del tipo ON), esto evita posibles demoras debido a la descarga de la imagen (del tipo ON) cuando sea oportuno (al pasar el cursor del mouse encima de la imagen de sustitución).
Texto Alternativo:
Este campo se refiere al efecto que se le inserta a las imágenes que permite mostrar un texto después de permanecer el cursor del mouse por pocos segundos encima de la imagen en cuestión. Este campo es opcional.
Al hacer clic, ir a URL:
Este campo se refiere a la inserción de un hipervínculo a la imagen. Este campo es opcional.
2)
VÍNCULOS DE HYPERTEXTO
El hipertexto son vínculos dentro del texto del documento HTML que permiten al usuario navegar con facilidad a través de la black, tanto a nivel interno como externo, es decir , pueden crearse vínculos que lleven hacia una misma parte del documento (interno) o hacia otra parte del mundo Web (externo). También existen otro tipo de vínculos que llevan al surfeador a otra partes como correo, gopher, ftp, entre otras.
Las etiquetas HTML que se encargan de generar los vínculos son y . A esta etiqueta se le debe agregar el "URL" con el que se desea vincular. Esto se realiza de la siguiente manera :
Vínculos externos hacia páginas lejanas
Este vínculo envía al lector fuera de la página hacia otro site Web. Generalmente son usados para relacionar al usuario con otros sitios interesantes en el mundo Web.
El URL será entonces la dirección completa de la página a la que se desea crear el vínculo. Ejemplo : http ://www.insomnia-group.com
Vínculos externos hacia páginas cercanas
Generalmente las personas que diseñan sus páginas no encuentran cómodo desplegar toda la información en una sola, sino que crean varias páginas vinculadas entre sí. Por ejemplo, es común ver una página principal (Home Page) con una tabla de contenido a la cual se le han creado vínculos hacia cada uno de sus temas. Estos vínculos son hacia archivos HTML que, generalmente, se encuentran en el mismo directorio de la página principal.
El URL será entonces la ruta completa (incluyendo el nombre del archivo) que lleva al visualizador a cargar el documento que se desea desplegar.
Por ejemplo en mi cuenta he creado una página para que las personas que visiten al Home Page registren su visita. Si el nombre de documento es firmas.html y se encuentra en el mismo directorio de la Home Page, el URL sería firmas.html.
Cuando un página tiene un gran contenido, es posible hacer que el usuario navegue a través de la página. Para ello se debe marcar tanto el inicio como el fin del ancla.
Para marcar el inicio del ancla se utiliza la etiqueta Texto que relaciona al ancla . Nótese que lo que sería en los otros casos el URL se ha cambiado por el nombre que se le da al ancla, precedido del signo #.
Para marcar el fin del ancla (a donde debemos llegar) se hace uso de la etiqueta Texto del ancla . Donde "sección" debe coincidir con el nombre designado en el inicio del ancla.
Vínculos de correo electrónico
Por lo general las personas que diseñan sus paginas proporcionan la opción de tener una retroalimentación por parte del visitante. La manera mas sencilla de lograr esto es través de un vínculo que lleve al surfeador a un cuadro de correo electrónico con la dirección pblacketerminada.
La estructura es la siguiente:
Ejemplo:
Vínculos hacia otros recursos del Web
En la black, a parte del World Wide Web, existen otros cuatro recursos, que son el gopher, el FTP, el Usenet y el Telnet.
Para generar un vínculo hacia cualquiera de estos recursos, basta con designar adecuadamente el URL requerido dentro de la estructura normal de etiquetas de vínculo.
1)
Una plantilla es una forma de dispositivo que proporciona una separación entre la forma o estructura y el contenido. Es un medio o un aparato que permite guiar, portar o construir un diseño o esquema predefinido.
Una plantilla agiliza el trabajo de reproducción de muchas copias idénticas o casi idénticas (que no tiene que ser tan elaborado, sofisticado o personal). Si se quiere un trabajo más refinado, más creativo, la plantilla no es sino un punto de partida, un ejemplo, una idea aproximada de lo que se quiere hacer, o partes comunes de una diversidad de copias. A partir de la plantilla pueden asimismo diseñarse y fabricarse nuevas plantillas.
Las plantillas, como norma general, pueden ser utilizadas por personas o por sistemas automatizados. Se utilizan plantillas en todos los terrenos de la industria y la tecnología. Una plantilla puede servir como muestra base de una diversidad sobre la que comparten elementos comunes (patrón) y que en sí es lo que constituye la plantilla.
En relación con la edición o composición de textos o imágenes, se compone de cajas y líneas, con unos tamaños y márgenes, para facilitar la escritura de artículos o cartas, con títulos, fotos y diagramas.
En relación con la mecánica, puede ser una forma específica de ángulos y medidas, tal que colocando las partes constituyentes en su sitio permite un ensamblaje calibrado y uniforme e identificar la carencia de algún elemento.
4)
Vamos a tratar de explicar el proceso de creación de una barra de navegación sencilla pero muy versátil que podríamos incluir en una página web. El trabajo es sencillo, si se dominan las tablas del HTML, que como muchos sabrán, son el principal elemento que tenemos a nuestra disposición para maquetar una web, aparte de las capas.
El resultado que pretendemos conseguir se puede ver en una página aparte.
Referencias: En nuestro manual de HTML tenemos toda la teoría y un poco de la práctica necesaria para dominar las tablas. En nuestro taller de HTML tenemos unas interesantes prácticas con tablas que pueden orientarnos también.
Las imágenes
Vamos a utilizar tres imágenes muy simples. Una es el lateral izquierdo de las cajas de los enlaces, otra el lateral derecho, y un píxel transparente. Las podemos descargar en un archivo comprimido .zip.
Con las imágenes laterales vamos a hacer el efecto de caja con el borde con esquinas suavizadas. Una se utilizará en la parte de la derecha y otra en la izquierda. Con el píxel transparente utilizaremos algún truco de maquetación muy habitual en HTML, que consiste en colocar la imagen para crear un espacio de un tamaño definido por nosotros.
Las imágenes utilizan la transparencia del GIF para poder crear barras de navegación a las que podemos aplicarles distintos colores, fácilmente editables si utilizamos una hoja de estilos.
La tabla con el enlace
Vamos a dividir el problema en varias partes para que sea más fácil de entender cada una de ellas y el efecto global. Ahora vamos a ver cómo hacer una solapa. Al reunir varias solapas crearemos la barra de navegación.
5)
Línea de tiempo (Timelines)
La Línea de tiempo organiza y controla el contenido de una película a través del tiempo, en capas y fotogramas. Los componentes principales de la Línea de tiempo son las capas, los fotogramas y la cabeza lectora.
Las capas de una película aparecen en una columna situada a la izquierda de la Línea de tiempo. Los fotogramas contenidos en capa cada aparecen en una fila a la derecha del nombre de la capa. El encabezado de la Línea de tiempo situado en la parte superior de la Línea de tiempo indica los números de fotogramas. La cabeza lectora indica el fotograma actual que se muestra en el Escenario.
La información de estado de la Línea de tiempo situada en la parte inferior de la Línea de tiempo indica el número de fotograma actual, la velocidad de fotogramas actual y el tiempo transcurrido hasta el fotograma actual.
Nota: Al reproducir una animación, se muestra la velocidad de fotogramas actual, que puede diferir de la velocidad de fotogramas de la película si el sistema no puede mostrar la animación con la rapidez apropiada.
Puede cambiar la manera según la que se muestran los fotogramas y mostrar miniaturas del contenido de los fotogramas en la Línea de tiempo. La Línea de tiempo muestra dónde hay animación en una película, incluyendo la animación fotograma a fotograma, la animación interpolada y los trazados de movimiento.
Modificación del aspecto de la Línea de tiempo
De forma predeterminada, la Línea de tiempo aparece en la parte superior de la ventana de la aplicación principal, encima del Escenario. Para cambiar su posición, puede acoplarla tanto a la parte inferior como a uno de los dos lados de la ventana de la aplicación principal, así como mostrarla en su propia ventana. También es posible ocultarla.
Puede cambiar el tamaño de la Línea de tiempo para cambiar el número de capas y fotogramas visibles. Si hay más capas de las que es posible mostrar en la Línea de tiempo, puede ver las capas adicionales utilizando las barras de desplazamiento situadas a la derecha de la Línea de tiempo.
Para mover la Línea de tiempo:
Arrástrela desde el área por encima del encabezado de la Línea de tiempo.
Arrastre la Línea de tiempo hasta el borde de la ventana de la aplicación para acoplarla. Presione Control (en Windows y en Macintosh) mientras la arrastra para impedir que la Línea de tiempo se acople a los bordes.
Para aumentar o reducir los campos de nombre de las capas:
Arrastre la barra que separa los nombres de capa y la Línea de tiempo.
No hay comentarios:
Publicar un comentario