“DISEÑO Y REALIZACION DE LA PAGINA WEB INTERACTIVA DE LA UNIDAD EDUCATIVA FISCAL VICENTE ROCAFUERTE CON IMPLEMENTACION DE APLICACIONES”

...

Lleva trabajo de investigación pero se deberá realizar para que la empresa o institución considere la idea.

Utilizando Adobe Dreamweaver podemos diseñar una página web interactiva en este caso de la Unidad Educativa Fiscal “Vicente Rocafuerte” así las personas en todo el mundo podría ingresar a dicha página para conocer acerca de la institución etc.

Presentar la página web a la institución a fin de que conozcan una forma de mejorar el atractivo de la institución a travez de un medio de comunicación masivo como es el internet.

La Unidad Educativa Fiscal “Vicente Rocafuerte” tendría un gran beneficio al presentar esta página web y resaltaría la misma y a los estudiantes asi también las personas que no puedan visitar la institución personalmente podrán hacerlo a través de la página para conocer todo lo que ofrece nuestro colegio a la comunidad.

MEMORIA DESCRIPTIVA

Descripción general

Es un diseño de una página web interactiva que servirá posteriormente para los usuarios que la visitan e informarse más acerca de la institución, de todo lo que sucede y ofrece la institución a los docentes, padres de familia, estudiantes y toda la comunidad.

Visitando nuestro sitio web podrá conocer y mantenerse informado de una forma más rápida y eficaz desde cualquier dispositivo con acceso a internet por si llegase haber algún evento, celebración, acto cívico, reuniones o programas que organiza la institución.

Esta página funciona como medio de comunicación a la web para que todos conozcan nuestra institución; trabajando con hiperenlaces para re-direccionar a todas las páginas que conforman nuestro gran sitio web, para abrir enlaces, imágenes, videos, etc. Cuando le des clic en el icono o imagen que deseas abrir.

Este sitio web está compuesto por imágenes animadas, enlaces a las páginas derivadas de ella, fuente ARIAL, plantillas, textos, hipervínculos, objetos DIV PA y efectos de transmisión en las imágenes.

Una de las características principales de nuestro diseño web son la portada y el logo del colegio, dándole a la institución una buena presentación donde se muestran los diferentes vínculos enlazados a las páginas derivadas a ella.

Descripción técnica

Explicar detalladamente qué y cómo se ha realizado o construido

1.- Crear en el escritorio una carpeta llamada “página web leyendas de futbol del Vicente Rocafuerte”, en donde realizaremos el proyecto.

2.- Dentro de esta carpeta crearemos subcarpetas a las que llamaremos, imágenes, páginas.

3.- Vamos al Dreamweaver CS6 y lo ejecutamos para poder trabajar.

4.- Ya dentro de Dreamweaver ir a crear nuevo en HTML y le damos clic.

5.- Luego ir a la pestaña superior donde dice sitio y creamos un nuevo sitio.

6.- Una vez que hagamos esto saldrá una ventana donde le pondremos el nombre al sitio.

7.- Obligatoriamente debe ser igual al nombre que le dimos a la carpeta que creamos en el escritorio y buscar la ubicación de ella.

8.- Cuando ya tengamos una pantalla en blanco, en la parte inferior nos saldrá un menú de propiedades, donde configuraremos el tamaño, tipo de fuente, y todo lo relacionado al texto.

8.1.- Para cambiar el tamaño de la página ir a las dimensiones que se muestran a un costado del icono de un monitor.

8.2.- Cuando le demos clic saldrá un menú desplegable donde seleccionaremos la dimensión 1260x875 y ya tendremos nuestra dimensión personalizada.

8.3.- Para cambiar el color de letra que en este caso será blanco, ir a propiedades de página, y en apariencia el color de texto le damos blanco, mientras que el de fondo en ninguno.

8.4.- Para cambiar el fondo, ir a propiedades de página, en apariencias cambiamos donde dice fondo y ubicamos nuestra imagen que deseamos colocar.

8.5.- Para cambiar el tipo de fuente, ir a propiedades de página, fuente de página y le buscamos ARIAL.

9.- Una vez hecho todos los ajustes, procedemos a insertar dos imágenes con el logo del colegio, para ello haremos lo siguiente:

9.1.- Ir a la parte superior a la pestaña insertar, y buscamos objeto de diseño/Div PA.

9.2.- Saldrá un recuadro azul ajustable donde colocaremos la imagen.

9.3.- Le damos clic dentro del cuadro, en insertar y buscamos imagen del logo del colegio y aceptar.

9.4.- Con los ajustes necesarios colocará la imagen a la esquina superior izquierda del fondo.

9.5.- Con el mismo proceso se creará el otro logo pero este se lo colocará a la esquina superior derecha del fondo.

9.6.- Para insertar un logo con el nombre de la institución, podría crearlo en Photoshop y hacer el mismo procedimiento anterior pero este iría en medio de los dos logos del colegio.

10.- Para crear un menú desplegable, debemos ir a la parte superior, en insertar/objeto de diseño/Div PA, nuevamente en insertar/spry/barra de menú spry y listo tendremos nuestro menú desplegable.

11.- Se mostrará una barra de menú desplegable, para ver su función presionar la tecla F2 usted tiene que guardar todo lo que ha realizado y se mostrará en su navegador predeterminado.

12.- Para modificar el texto y la apariencia de este haremos lo siguiente:

12.1.- Señalar el menú y saldrán unas pequeñas palabras dentro de un recuadro celeste diciendo, barra de menú spry: menú bar donde le cambiaremos el texto.

12.2.- Cuando le demos clic, en la parte inferior nos saldrá un menú de propiedades del menú desplegable donde señalando la palabra elemento 1 a su derecha en texto se cambiara el nombre por Inicio y así con todos los botones.

12.3.- Una vez que hemos cambiado el nombre a los botones procedemos a eliminar o insertar pestañas que tú desees, para esto en donde se cambiaron los nombres arriba hay unos signos con ¨+¨ para añadir