Ejercicio Sitio Web Mundo Animal

Transcripción

1 Ejercicio Sitio Web Mundo Animal 01. Abrir y crear un archivo según las siguientes características: Tamaño: 755 x 420 px., para visualización (configuración) 800 px. X 600 px. Resolución: 72 ppp (Pixel Por Pulgada). Modo: RGB (Red / Green / Blue). 03. Al abrir el lienzo, nombrarlo: index.png (el formato,.png, lo crea por defecto). 04. Visualizar la Paleta de Capas y la Paleta de Estados (Fotogramas hasta versión CS3). 05. Importar la imagen 02 (Tigre / 755 px. X 130 px.) y ubicarla en la parte superior del lienzo. Está será la imagen que ubicaremos como cabezal. 06. Teniendo seleccionada la imagen del Tigre, crearemos un Símbolo Gráfico: Barra de Menú / Modificar / Símbolo / Convertir en Símbolo (F8). 07. En la ventana de diálogo que acaba de aparecer: nombrar el Símbolo (Barra) y seleccionar el Símbolo / Gráfico / Aceptar. 08. La imagen del Tigre, ahora tiene una apariencia de Símbolo. Para poder editar y trabajar en el Símbolo, hacer un doble clic en la imagen. Se abrirá una ventana nueva que corresponderá al: Símbolo: Barra.

2 Imagen convertida en Símbolo. 09. Visualizar la Regla y bajar dos guías horizontales y ubicarlas sobre y bajo la imagen. Colocar una tercera Guía Horizontal, a 20 px. de la segunda. Aplicación de textos (Menú) sobre Franja azul con Efecto de Sombra. 10. Dibujar una franja de 755 x 20 px de color Azul (#000066). 11. Colocar 5 textos, en color Amarillo, que formaran un Menú de botones. 12. AVES, INSECTOS, PECES, MAMÍFEROS y REPTILES. Arial / Bold / 12 px. / Amarillo. 13. Como podemos ver en la Paleta de Estados, todo lo que hemos realizado hasta este momento se ha ido configurando en el Estado Como necesitamos navegar en los Ítems dispuestos como botones (Aves, Insectos, Peces, etc), es conveniente Duplicar 5 veces el Estado 1: Paleta de Estados / Duplicar Fotograma / 5 / Después del Estado Actual. 15. Podemos ver que en los 6 estados (del 1 al 6) se encuentra la misma información. 16. Pues bien, a continuación iremos interviniendo cada uno de los Estados, aplicando fotografías y textos. Para ocultar la Zona de División, hagan un clic en el icono Ocultar Divisiones y Zonas Interactivas, que se encuentra en la Paleta de Herramientas. Crear Zona de División 17. Seleccionar la imagen del Tigre e insertar una Zona de División. 18. Tecla Comando y clic en Mouse / Insertar División Rectangular.

3 19. El objetivo es, que al pasar por sobre cada uno de los item, se despliegue hacia abajo, un menú emergente y en el cabezal (Barra) aparezca una información relacionada con el item. Ejemplo. AVES / Texto las aves / Imagen de un Loro. 20. Crear una Zona de División sobre el texto AVES: Seleccionar el Texto / Tecla Comando y clic en Mouse / Insertar División Rectangular. Vista de los botones, con la aplicación de Zonas de División y conectadas a la Barra Superior. 21. Seleccionen la Zona de División de AVES, y aparecerá un icono para Señalar Archivo. Tomen el icono y desplácenlo hacia la Zona de División de la imagen del Tigre. Podrán apreciar que una línea unirá una zona con otra. Al soltar aparecerá una venta: Intercambiar Imagen. La Imagen a Intercambiar, sería la que se encuentra en el Estado Para aplicar la misma opción a los Botones: Insectos, Peces, Mamíferos y Reptiles, repitan los pasos 20 y Después de haber completado todos los pasos, cierren la venta del Símbolo y Guarden el archivo. Para probar lo realizado en el Navegador por defecto, hagan un clic en la tecla F12. Menú Emergente. 24. Para agregar Menú Emergente, debemos volver a la vista del Símbolo haciendo un doble clic sobre la Barra Superior: El Tigre. 25. Cargaremos Menú Emergente, en el Botón AVES. Seleccionen la Zona de División y Tecla Comando y clic en Mouse / Seleccionar Añadir Menú Emergente. La otra alternativa es hacer un doble clic en la Zona de División.

4 Cóndor _blak Tricahue _blak Águila _blak Halcón _blak Perdiz _blak 28. Si queremos ubicar un Sub Menú Emergente, bajo cada nombre, debemos añadirlos debajo de cada uno de los item. Seleccionar cada uno y hacer clic en Sangrar Menú. 29. Para cada item o TEXTO, que vamos ubicando, tenemos la opción de establecer un Vínculo (URL) y un Destino (_blank, _seft, _parent y _top). 30. Clic en botón Siguiente, para ir a la etiqueta Aspecto. Aquí podemos editar las características de nuestro Menú Emergente, como: Celdas, disposición, fuente, tamaño, estilo, alienación, estado (arriba y sobre) y una Vista Previa. 31. Clic en botón Siguiente, para ir a la etiqueta Avanzado. Aquí podemos editar las características, como: Ancho, Alto, Relleno y Espacio de Celda. Así como también: Sangría de Texto, Demora de Menú, Bodes de Menú Emergente, Ancho de Bordes, Color de Bordes, Sombra y Resalto. 32. Clic en botón Siguiente, para ir a la etiqueta Posición. Aquí podemos editar las características, como: Posición del Menú y Posición del Submenú. Les sugiero ingresar la siguiente información en relación al eje X e Y: X - 6 e Y 21.

5 33. Después de completar las características del Menú Emergente, hacer clic en Listo y en la vista del Símbolo reubicar la disposición del Menú si es necesario. 34. Repitan los pasos del 26 al 33, par aplicar Menú Emergente el los otros botones. 35. Para probar lo realizado en el Navegador por defecto, hagan un clic en la tecla F12. Ejemplo para ir completando el resto de los botones.

6 Orlando Durán Sáez 2015 Color e Imagen de Fondo. 36. Para aplicar un Degradado, primero debemos dibujar un rectángulo y aplicar el Degradado desde el Inspector de Propiedades: Relleno (Cubo de Pintura) / Degradado / Lineal. Para editar la degradación deben ir hasta la Paleta de Herramientas, bajar hasta Color y hacer un clic en el registro de color de Relleno. 37. Posteriormente importaremos la imagen 01a (Delfín). Ahora para que no genere conflicto con los objetos que ubicaremos sobre esta imagen, cortaremos las áreas que no se visualizaran y bajaremos la Opacidad (Transparencia) a un 20%, desde el Inspector de Propiedades o desde la Paleta de Capas. Recorten la imagen con la Herramienta de Selección Rectangular.

7 Orlando Durán Sáez Coloquemos un segundo degradado, dibujándolo con la Herramienta Pincel (Trazado). Apliquen el mismo color verde y con aplicación de Efecto de Sombra. Indicación de trazo y aplicación de Degradado. Orden de las Capas: Degradado 1 / Delfín / Degradado 2. Aplicar Texto 39. Seleccionar la Herramienta de Texto y dibujar un área y digitar. La otra opción es copiarlo desde Word y pegarlo en el campo de texto, que fue dibujado previamente. Texto: Chile posee una gran variedad de especies animales, que pueblan todo su vasto territorio, aún que por desgracia, la intensa actividad humana está reduciendo las poblaciones animales existentes, producto de la agresiones directas (Caza) tanto como de la reducción, alteración e incluso destrucción del medio en que viven. Sugerencia, para la aplicación del texto: Fuente, estilo, tamaño, alienación, color, interlineado, etc. Botón Gatos 40. Para trabajar en la creación de un Botón tomando como elemento una imagen, primero debemos importarla: Archivo / Importar / g01 ( un Gato con un ojo cerrado). Reducir la imagen a 130 px. de ancho X 90 px. de alto. 41. Seleccionada la imagen debemos convertirla en Símbolo Botón: Menú Modificar / Símbolo / Convertir en Símbolo (F8) / Nombre: Gatos / Tipo: Botón.

8 Orlando Durán Sáez 2015 a. Estado Arriba: el estado normal del botón. Utilicen las herramientas de dibujo y de edición para crear el estado Arriba del botón. Para editar vínculos o comportamientos, seleccionen primero la ficha de área activa. b. Estado Sobre: aparece cuando el cursor está sobre el botón. Utilicen las herramientas de dibujo y de edición para crear el estado Sobre del botón. Para editar vínculos o comportamientos, seleccionen primero la ficha de área activa. c. Estado Abajo: crea una imagen presionada del botón. Este estado se utiliza en las barras de navegación, no en los rollovers simples. Para editar vínculos o comportamientos, seleccionen primero la ficha de área activa. d. Estado Sobre y Abajo: cuando el botón está presionado, si se sitúa el cursor sobre botón seguirá cambiando de aspecto. Utilicen este estado de botón en las barras de navegación con varios botones. El estado Sobre y Abajo no se utiliza en rollovers simples. Para editar vínculos o comportamientos, seleccionen primero la ficha de área activa. e. Área Activa: el área activa (acierto) del botón se define con un objeto de división vinculado al botón. Utilicen el panel Propiedades para definir la dirección URL y otras propiedades de vínculo. 44. En el Estado SOBRE, importaremos la imagen g02 ( un Gato con los dos ojos abiertos) y le aplicaremos una reducción para dejarla de 130 px. de ancho X 90 px. de alto. Apliquemos a la imagen un Efecto: Sombrear e Iluminar / Iluminado / Azul. 45. En el Estado ABAJO y SOBRE Y ABAJO, pegar la imagen del estado SOBRE. Guardar y Volver a la vista Original del archivo. 46. Con la herramienta, Mostrar Divisiones y Zonas Interactivas, activada, aplicaremos desde la paleta de Propiedades un vínculo a un sitio Web: + Vínculo: + Alt: Gatos chistosos + Destino: _blank

9 47. Para probar el botón aprieten la tecla F12 o clic en la Vista previa. Botones de Navegación Los botones de navegación, podemos diseñarlos o podemos utilizar los que trae por defecto el programa. Para opción crear botones: 48. Vamos a crear cuatro botones que nos permitirán navegar en interfaz del sitio: Inicio (index), Miembros, Objetivo, Galería, Sitios y Contacto. 48. Primero debemos dibujar una forma rectangular Roja de 93px. x 22 px. y convertirla en Símbolo. Después de convertida en Símbolo debemos hacer un doble clic para abrir la ventana editora del Símbolo. 49. Estando en el Estado Arriba, aplicar Efecto Sombra y Bevel Bass. Además aplicar el texto: INICIO. Estilo: Arial / 11 / Bold / Blanco / Alienación Centrada. 50. En el estado Sobre cambiar el color de la forma Rectangular por Azul y el Texto por Amarillo. 50. Estando en el Lienzo, aplicar Vínculo, Destino y Etiqueta al Botón. 51. Repetir los pasos 48 al 50, para realizar los otros botones. Para opción ocupar botones por defecto de : 52. Primero, debemos ir a Edición / Insertar / Nuevo Botón y en la Paleta de Propiedades hacemos un clic en Importar un botón. Seleccionar Button_ En el estado de Botón, reemplazar el texto Button por inicio, sin modificar las indicaciones para el texto: Fuente, estilo, tamaño, etc. Volver a la vista Original y ubicar el botón en la Interfaz del Sitio.

10 Orlando Durán Sáez Ahora, estando en la vista Original, debemos aplicar los vínculos a cada botón, para que el usuario al hacer clic abra el documento o página deseada. Seleccionemos la herramienta, Mostrar Divisiones y Zonas Interactivas. 56. Con la herramienta Puntero, pinchamos el botón inicio y en la paleta de Propiedades ingresamos la siguiente información: + Vínculo: index.htm + Alt.: MUNDO ANIMAL Inicio + Destino: _self 57. Ahora, con la herramienta Puntero, pinchamos el botón miembros y en la paleta de Propiedades ingresamos la siguiente información: + Vínculo: miembros.htm (...este documento aún no es creado pero se aplica el vínculo desde la página de inicio, para que posteriormente al duplicar el documento, se mantengan las propiedades de hipervínculo) + Alt.: MUNDO ANIMAL Miembros + Destino: _self 58. Se repite el paso 57, con los item Objetivo, Galería, Sitios y Contacto: objetivo.htm, galeria.htm, sitios.htm y contacto.htm 59. INDICACIÓN: El nombre de los archivos HTML, deben ser en minúscula. Vínculo a Correo 60. Para que el Usuario, pueda abrir la aplicación de correo, desde su unidad (computador), debemos aplicar una Zona de División en el texto E- MAIL. 61. En la paleta de propiedades, ingresar la siguiente información. + Vínculo: mailto:contacto@mundoanimal.cl + Alt.: MUNDO ANIMAL Correo + Destino: Nada

11 62. Vista de activación de vínculo a aplicación de correo: Guardar para la Web 63. En la Paleta de Páginas, nombremos la como Inicio (Index). 64. A continuación ir a Menú Archivo y Exportar. Exportaremos a la carpeta Sitio ANIMALES: + Nombre: index + Exportar: HTML e Imágenes + HTML: Exportar Archivo HTML + Divisiones: Exportar divisiones. + ACTIVAR: Colocar imágenes en subcarpetas. Duplicar para crear los otros documentos 65. En la Paleta de Páginas, dupliquemos la Página Inicio y la nombramos como Miembros. 66. Ingresamos al documento Miembros y reemplazamos y poblamos con información propia de este nuevo documento. 67. A continuación ir a Menú Archivo y Exportar. Exportaremos a la carpeta Sitio ANIMALES: + Nombre: miembros + Exportar: HTML e Imágenes + HTML: Exportar Archivo HTML + Divisiones: Exportar divisiones. + ACTIVAR: Colocar imágenes en subcarpetas.

12 Estos archivos no se suben a la Web. Archivos.PNG. Originales de cada una las páginas Web del sitio. Carpeta ORIGINALES: Contiene todas las imágenes originales utilizadas en el sitio. Solo estos archivos se suben a la Web. 1.- Carpeta img Esta carpeta no debe ser intervenida. Corresponde a las Divisiones, generadas al convertir en HTML 2.- Archivos.htm (HTML), de las páginas Web. 3.- Archivo generados automáticamente: Script JSript y archivo de base de datos.