MATERIALES Leer previamente la Guía Número 5. Materiales proporcionados por el docente para el desarrollo de la Guía 5.

Transcripción

1 Tema: Sectorización y Banner web (Slider) CONTENIDOS Creación de sitios locales. Administración de sitios locales. OBJETIVOS ESPECÍFICOS Desarrollo de un banner web, aplicando los conocimientos de webkit y los Keyframes slider. Lograr que el estudiante aprenda las bases técnicas para la maquetación web. MATERIALES Leer previamente la Guía Número 5. Materiales proporcionados por el docente para el desarrollo de la Guía 5. Sectores en Diseño Web Los sectores dividen una imagen en imágenes más pequeñas que se montan en una página web utilizando una tabla HTML o capas CSS. Con la división de la imagen, es posible asignar diferentes enlaces URL para crear la navegación de la página o para optimizar cada parte de la imagen utilizando sus propios ajustes de optimización. Página web dividida en sectores. 62

2 DDV Con el comando Guardar para Web y dispositivos puede exportar y optimizar una imagen con sectores. Photoshop guarda cada sector como un archivo independiente y genera los códigos HTML o CSS necesarios para mostrar la imagen con sectores. Cuando trabaje con sectores, no olvide estos conceptos básicos: 1) Diseñar el sitio que se va sectorizar ya sea un jpg o conservando las capas de documento. 2) Para crear un sector puede utilizar la herramienta Sector. 3)Una vez creado un sector, puede seleccionarlo mediante la herramienta Seleccionar sector y, después, puede moverlo, cambiar su tamaño o alinearlo con otros sectores. 4)Puede definir las opciones para cada sector, como el tipo de sector, el nombre y la URL, en el cuadro de diálogo Opciones de sector. 5)Puede optimizar cada sector con diferentes ajustes de optimización en el cuadro de diálogo Guardar para Web y dispositivos. Seccionado de una página web Puede utilizar la Herramienta Sector para dibujar directamente líneas de sectores sobre una imagen. Todos los sectores existentes aparecen automáticamente en la ventana de documento. Y se identifican que se ha creado un sector, porque en la parte superior se agrega un número en un fondo azul el cual nos llevar el recuento de cuanto sectores estamos realizado. Cuando no se creado un sector aun esta en fondo gris. Seleccione un ajuste de estilo en la barra de opciones: 63

3 //Normal: determina las proporciones del sector conforme se arrastra. //Proporción fija: define una proporción altura y anchura. Introduzca la proporción en números enteros o decimales. Por ejemplo, para crear un sector con el doble de anchura de altura, introduzca 2 para la anchura y 1 para la altura. //Tamaño fijo: especifica la altura y la anchura del sector. Introduzca los valores de píxeles en números enteros. Creación de sectores a partir de guías 1) Añada líneas guías en su composición. 2)Seleccione la herramienta Sector y haga clic en Sectores a partir de guías en la barra de opciones. Cuando se crean sectores a partir de guías, se eliminan todos los sectores existentes. Nota: Al utilizar la opción Sectores a partir de guías puede que no obtengamos el resultado deseado. 64

4 DDV Guardado para Web y dispositivos Las funciones de optimización del cuadro de diálogo Guardar para Web y dispositivos permiten visualizar imágenes optimizadas en diferentes formatos de archivo y con distintos atributos de archivo. Puede ver varias versiones de una imagen a la vez y modificar los ajustes de optimización conforme previsualiza la imagen para poder seleccionar la combinación de ajustes que mejor se ajuste a sus necesidades. Guardar para Web y dispositivos, cuadro de diálogo (versión de Photoshop) A. Opciones de visualización B. Cuadro de herramientasc. Menú emergente Optimizar D. Menú emergente Tabla de color E. Controles de animación (solo en Photoshop) F. Cuadro de texto Zoom G. Menú Previsualizar en navegador H. Imagen original Guardando la optimización Realice una de las siguientes acciones: 1)Selecciones la ubicación, donde necesita que se guarden su sitio web. 2) Determine la opciones de exportación: 65 Formatos: HTML e imágenes: Guarda un documento html y genera una carpeta que contiene las imágenes que se han sectorizado. Solo imágenes: genera una carpeta que contiene las imágenes que se han sectorizado. Solo HTML: guarda un documento html.

5 Banner Web Forma parte de un elemento de publicidad dentro de la página web, así también como un atajo de los contenidos que el usuario encontrará en el sitio web PROCEDIMIENTO DE LABORATORIO 1- Vamos administrar el sitio, lo vamos a denominar guia 5 su nombre y apellido. Ahora daremos paso a generar movimiento en el banner web o slider, vamos a programar el sitio de simplify y en el área del banenr vamos agregar una etiqueta <div> con un class= banner2, así: 66

6 DDV Este div no tendrá nada. Todo se trabajará dentro del CSS. Luego que hemos colocado la etiqueta div, pasamos al programar el código CSS, agregaremos un atributo de una imagen, examinamos dentro de la carpeta imgbanners: ANIMATION Este determina tiempo de transición de los slider, infinite determina un efecto tipo bucle (repetición). Ahora tendremos que determinar una sintaxis de animación con la ayuda de los Keyframes (Fotogramas claves), que nos permite la posición que van a mover cada uno de los slider, para ello vamos a determinar los siguientes porcentajes. Con la ayuda de Animation dentro de CSS, nos permitirá crear una secuencia de animación. Esto nos servirá como un contenedor al cual le otorgamos un nombre: bannerweb el nombre puede ser cualquiera, luego otorgamos el tiempo y la reprodución. 67

7 Con la ayuda de Animation dentro de CSS, nos permitirá crear una secuencia de animación. Esto nos servirá como un contenedor al cual le otorgamos un nombre: bannerweb el nombre puede ser cualquiera, luego otorgamos el tiempo y la reprodución. REFERENCIAS BIBLIOGRÁFICAS Aprender Dreamweaver CS6 con 100 ejercicios prácticos. MediaActive //Desarrollo Web con Dreamweaver CS3, CSS, AJAX y PHP./ David Powers. MADRID, ESPAÑA : ANAYA,