Comportamientos, Plantillas Y Etiquetas

EXPOSICIÓN DE COMPORTAMIENTOS, PLANTILLAS Y ETIQUETAS JULIETH STEFANY CRISTANCHO – DIANA CAROLINA HERNÁNDEZ COMPORTAMIENTOS

DEFINICIÓN: Acciones que suceden cuando los usuarios realizan algún evento sobre un objeto insertado en la página. Ej. Al Mover el ratón sobre una imagen, se reproduce una canción Acción

Objeto

Evento

Son programados en lenguaje JavaScript y se insertan en el panel de comportamientos. En la pestaña de inspector de etiquetas encontrarán dos sub-pestañas en la segunda nombrada comportamientos se ubicará un que desplegará una lista de todas las acciones posibles parar aplicar al objeto. Como también la elección del navegador que se usará para ejecutar la pagina diseñada. Para activar comportamientos. Menú Ventana  Comportamientos o el acceso rápido es activado con MAYUS+F4 Después se despliega el botón  “Mostrar evento para” , esto para elegir el navegador. El más reciente que maneja Dreamweaver es IE 6.0. Al objeto se le asociará un evento (cuando realizar), y una acción (que realizar) Para eliminar un comportamiento, se selecciona del panel de

comportamientos y se elige el botón Es posible cambiar el orden de los distintos comportamientos que

puede realizar un objeto por medio de los botones Los comportamientos que se explicarán son: Mostrar – Ocultar capa, Intercambiar Imagen y Llamar a Java Script. Los cuales son los más básicos y más frecuentemente usados en páginas web.

EXPOSICIÓN DE COMPORTAMIENTOS, PLANTILLAS Y ETIQUETAS JULIETH STEFANY CRISTANCHO – DIANA CAROLINA HERNÁNDEZ COMO INSERTAR UN COMPORTAMIENTO 1. Insertamos un objeto en la página (imagen, botones, textos) y se selecciona para poder aplicar las propiedades de comportamiento.

2. En la pestaña de comportamiento, debajo del menú donde se encuentra . Aparece en blanco pero al darle clic ,nos aparece un sub-menú para elegir la acción de la imagen que se elegirá para ejecutar un evento sobre ella.

3. Después de esto, aparece otro espacio en blanco al lado de este menú que indicará el comportamiento que tendrá el objeto. En este caso , se hará un ejemplo con el comportamiento de mostrar – ocultar capas. 4. Se inserta una capa y se introduce un texto.

5. Seleccionamos

de

nuevo

la

imagen

comportamiento desplegando el botón Ocultar Capa.

y

aplicamos

el

. Se elige Mostrar-

EXPOSICIÓN DE COMPORTAMIENTOS, PLANTILLAS Y ETIQUETAS JULIETH STEFANY CRISTANCHO – DIANA CAROLINA HERNÁNDEZ

6. Cuando se dará clic sobre la opción de Mostrar u Ocultar capas , saldrá una ventana donde se elegirá que capa se va a mostrar cuando se ejecute el evento sobre el objeto.

7. Luego en el panel de comportamiento veremos que aparece al lado del evento, la acción que hará la imagen.

EXPOSICIÓN DE COMPORTAMIENTOS, PLANTILLAS Y ETIQUETAS JULIETH STEFANY CRISTANCHO – DIANA CAROLINA HERNÁNDEZ 8. Por defecto la capa se pondrá como no visible (hidden), al cargar la pagina.

9. Ejecutamos F12 para observar el comportamiento aplicado sobre la capa.

10.Si queremos ocultar la capa, cuando se ejecute el evento sobre la imagen, no se configurará como “hidden” sino “visible”

EXPOSICIÓN DE COMPORTAMIENTOS, PLANTILLAS Y ETIQUETAS JULIETH STEFANY CRISTANCHO – DIANA CAROLINA HERNÁNDEZ

Esto es añadido nuevamente desde el panel de comportamientos Mostrar Ocultar capas pero esta vez, el evento va a ser diferente para que ejecute la acción de ocultar la capa.

La imagen tiene dos comportamientos. Uno: Mostrar la capa cuando se mueva el ratón sobre ella y Dos: Ocultar la capa al dar clic sobre ella.

Otra Opción que se encuentra en el botón (+) del panel de comportamientos es Llamar a javaScript. Esta será la acción

EXPOSICIÓN DE COMPORTAMIENTOS, PLANTILLAS Y ETIQUETAS JULIETH STEFANY CRISTANCHO – DIANA CAROLINA HERNÁNDEZ que se ejecutará al producirse un evento sobre la imagen o algún objeto. 1. Agregar objeto y seleccionarlo 2. Ir al panel de comportamientos y elegir Llamar a Java Script

3. Aparecerá una ventana donde se introduce el código

4. Se escribe el código . Un ejemplo de código puede ser 5. Window.close() ó Window.open(http://www.blogger.com)

EXPOSICIÓN DE COMPORTAMIENTOS, PLANTILLAS Y ETIQUETAS JULIETH STEFANY CRISTANCHO – DIANA CAROLINA HERNÁNDEZ 6. Y luego aceptar.

7. Aparecerá

en

el

panel

de

comportamientos,

y acto seguido se pondrá el evento que se hará para ejecutar la acción del código sobre el objeto.

8. F12 para ejecutar pagina y comprobar.

ADJUNTO VAN 2 VIDEOS SOBRE EL COMPORTAMIENTO INTERCAMBIAR IMAGEN APLICADO A LA GALERÍA QUE SE EXPLICO EN CLASE Y OTRO CON LAS PROPIEDADES DE MOSTRAR Y OCULTAR CAPAS DONDE SE BASÓ EL EJEMPLO DE LOS PRODUCTOS OCULTANDO Y MOSTRNDO CAPAS

EXPOSICIÓN DE COMPORTAMIENTOS, PLANTILLAS Y ETIQUETAS JULIETH STEFANY CRISTANCHO – DIANA CAROLINA HERNÁNDEZ

ETIQUETAS

Definición: Son códigos “HTML” que se insertan para demarcar propiedades de objetos que se insertan en la página en proceso de diseño. Las etiquetas consisten en poner un mismo comando entre los simbolos “<” y “>”. La primera indicando inicio y la segunda incluyendo el símbolo “/” indicando final (etiqueta de cierre). Ej. Texto Las etiquetas disponen de atributos para definir características del elemento sobre el cual actúan. Etiquetas Control +E en Dreamweaver Dentro de Dreamweaver se encontrarán gran variedad de etiquetas que se pueden insertar para agregar videos, audio, texto, documentos y otros objetos que normalmente una página necesita para ser diseñada.



Informacion no visible <meta>

Inicio del código html que indicará el uso de todas las etiquetas compatibles para inserción de objetos y sus propiedades

La etiqueta Head indicará la identificación de la página en el navegador e incluirá una etiqueta adicional que indica una información para buscadores y el titulo de la página Dentro de esta etiqueta se incluirán todos los elementos y objetos que serán visibles en la página tales como imágenes ,textos ,videos canciones, etc.

Fin del código html , es el límite que cierra el uso de las propiedades de html

EXPOSICIÓN DE COMPORTAMIENTOS, PLANTILLAS Y ETIQUETAS JULIETH STEFANY CRISTANCHO – DIANA CAROLINA HERNÁNDEZ Las etiquetas también permiten que dentro de ella se inserten otras etiquetas y así sucesivamente con el fin de darle formato al objeto y hacerlo más atractivo y con más diseño a la hora de ejecutar la página.

Ejemplo de inserción de elementos dentro de la etiqueta Insertar imagen.

EXPOSICIÓN DE COMPORTAMIENTOS, PLANTILLAS Y ETIQUETAS JULIETH STEFANY CRISTANCHO – DIANA CAROLINA HERNÁNDEZ Al escribir src=”  aparecerá examinar y allí se buscará la imagen luego aceptar´… las otras propiedades se especifican para altura , anchura y borde respectivamente.

Para insertar un video o archivo de audio

EXPOSICIÓN DE COMPORTAMIENTOS, PLANTILLAS Y ETIQUETAS JULIETH STEFANY CRISTANCHO – DIANA CAROLINA HERNÁNDEZ

<embed src=”Ruta del archivo” height=400 width=400 autostart=true /embed> <embed src=” Examinar donde está el archivo y luego arreglar propiedades del objeto.. Inicio, altura, anchura. En el archivo adjunto PDF encontrarán la gran variedad de etiquetas básicas que se usan para editar la página en blanco con colores, animaciones, imágenes y textos.

EXPOSICIÓN DE COMPORTAMIENTOS, PLANTILLAS Y ETIQUETAS JULIETH STEFANY CRISTANCHO – DIANA CAROLINA HERNÁNDEZ

PLANTILLAS ARCHIVO NUEVO HTML Insertar las tablas Colocamos una de 3 filas por 1 columna

Guardar como...

Le damos el nombre de :”Plantilla básica” Cambiamos colores

EXPOSICIÓN DE COMPORTAMIENTOS, PLANTILLAS Y ETIQUETAS JULIETH STEFANY CRISTANCHO – DIANA CAROLINA HERNÁNDEZ

Luego ajustamos el tamaño de la celda y damos en propiedad horizontal: centro Vertical: superior Luego escribimos algo dentro de la celda

Ahora podemos decir que esta es la estructura que seleccionamos el Área que consideremos que va a cambiar (en este caso el texto)

EXPOSICIÓN DE COMPORTAMIENTOS, PLANTILLAS Y ETIQUETAS JULIETH STEFANY CRISTANCHO – DIANA CAROLINA HERNÁNDEZ

Seleccionamos el texto de la celda central (blanca) Luego Insertar Objetos de plantila  Crear Zona Editable

Guardar como plantilla…

EXPOSICIÓN DE COMPORTAMIENTOS, PLANTILLAS Y ETIQUETAS JULIETH STEFANY CRISTANCHO – DIANA CAROLINA HERNÁNDEZ

De ahí tenemos que crear un sitio nos vamos a crear sitio

DAMOS UNA URL QUE QUERAMOS Y SEGUIMOS LOS PASOS HASTA FINALIZAR Y AL FINAL SE LE DA LISTO.

ELEGIMOS EL SITIO CREADO Y LE DAMOS GUARDAR

EXPOSICIÓN DE COMPORTAMIENTOS, PLANTILLAS Y ETIQUETAS JULIETH STEFANY CRISTANCHO – DIANA CAROLINA HERNÁNDEZ

PARA SABER QUE NOS QUEDO BIEN CREADA DEBE CAMBIAR LA EXTENSIÓN A .DWT AHORA VEMOS QUE EN EL PANEL DERECHO APARECE UNA PESTAÑA QUE SE LLAMA ARCHIVOS Y DENTRO DE ELLA SE CREA AUTOMATICAMENTE UNA CARPETA CON EL NOMBRE DE TEMPLATES Y EN ELLA ESTA GUARDADA LA PLANTILLA BASE. AHORA VAMOS A CREAR OTRA PAGINA A PARTIR DE NUESTRA PLANTILLA ARCHIVO … NUEVO … (EN VEZ DE GENERAL ESCOGEMOS LA PESTAÑA PLANTILLAS) BUSCAMOS LA PLANTILLA CREADA ANTERIORMENTE Y LE DAMOS CREAR

EXPOSICIÓN DE COMPORTAMIENTOS, PLANTILLAS Y ETIQUETAS JULIETH STEFANY CRISTANCHO – DIANA CAROLINA HERNÁNDEZ

SI VEN TODA LA PLANTILLA ESTA PROHIBIDA PARA EDITAR MENOS LA PARTE QUE ESCOGIMOS QUE FUERA EDITABLE (REGION

EXPOSICIÓN DE COMPORTAMIENTOS, PLANTILLAS Y ETIQUETAS JULIETH STEFANY CRISTANCHO – DIANA CAROLINA HERNÁNDEZ OPCIONAL EDITABLE)

CON ESTO PODEMOS CREAR VARIAS PAGINAS TENIENDO COMO BASE NUESTRA PLANTILLA MODIFICAR PARA MODIFICAR LA PLANTILLA BASE VAMOS A ARCHIVOS Y EN LA CARPETA TEMPLATES BUSCAMOS NUESTRA PLANTILLA BASE… LA ABRIMOS CON DOBLE CLIC AHÍ PODEMOS COLOCAR LOS DIFERENTES OBJETOS QUE NECESITEMOS QUE ESTEN EN TODAS NUESTRAS PLANTILLAS POR EJEMPLO EN ESTE CASO COLOCARLE UN LOGO AL TITULO. NOS APARECE LA IMAGEN EN LA PLANTILLA

EXPOSICIÓN DE COMPORTAMIENTOS, PLANTILLAS Y ETIQUETAS JULIETH STEFANY CRISTANCHO – DIANA CAROLINA HERNÁNDEZ

ARCHIVO  GUARDAR .. Y APARECE UNA VENTANA CON LA OPCION DE ACTUALIZAR TODAS LOS DOCUMENTOS CREADOS A PARTIR DE ESTA PLANTILLA. LE DAMOS ACTUALIZAR Y CERRAR. PODEMOS VER QUE TODAS LOS DOCUMENTOS AHORA TIENEN EL LOGO.

EXPOSICIÓN DE COMPORTAMIENTOS, PLANTILLAS Y ETIQUETAS JULIETH STEFANY CRISTANCHO – DIANA CAROLINA HERNÁNDEZ

EXPOSICIÓN DE COMPORTAMIENTOS, PLANTILLAS Y ETIQUETAS JULIETH STEFANY CRISTANCHO – DIANA CAROLINA HERNÁNDEZ TALLER

1. CREAR UNA GALERÍA DINÁMICA CON EL COMPORTAMIENTO DE INTERCAMBIAR IMAGEN (VER VIDEO ADJUNTO PARA GUIA) 2. CREAR UNA PLANTILLA CON REGION EDITABLE Y HACER DOS PLANTILLAS MÁS DONDE SE EDITE ESA REGION.

3. INSERTAR EN UNA PÁGINA POR MEDIO DE CODIGO 10 ETIQUETAS CON PROPIEDADES DE FONDO , TEXTO, IMAGEN Y AUDIO.(VER ARCHIVO ADJUNTO ETIQUETAS)