Front Page

Manual

Para crear un Sitio Web, lo primero que debo hacer es determinar el lugar en que lo voy a crear, definiendo la carpeta donde van guardados los archivos como sitio Web.
EL proceso a seguir es el siguiente: Menú Archivo / Abrir Sitio / Buscar en:, busco la carpeta en que crearé el sitio, la selecciono y cuando la abro por primera vez FrontPage, incluirá carpetas y archivos en forma automática para poder funcionar como un sitio de alojamiento de páginas Web. La carpeta Prívate donde automáticamente van los archivos del sistema Web y la carpeta Imágenes, pudiendo luego crear la carpeta que necesite para crear un sitio ordenado, prolijo y presentable
Cada vez que vuelvo a trabajar al mismo sitio, lo busco por el mismo acceso.
Por el Menú Archivo tengo también el acceso a Nueva Carpeta, o Nueva Página en blanco, o a nuevas páginas prediseñadas, o a Página con marcos.
Cada vez que deseo saber como queda en el Explorador, guardo la página y entro al Menú Archivo / Vista previa en el Explorador / y seleccionamos el correspondiente, para seguir trabajando en la página, cierro el Explorador.

Vistas para trabajar
Página: muestra las páginas individuales con la que se está trabajando, permitiendo hacer cambios o ajustes.
A su vez cuando trabajamos en la página a diseñar tenemos tres opciones
Vista Normal: Esta vista es la que usamos para trabajar y diseñar ña página es como la vista impresión de Word
Vista HTML: Podemos observar el código de programación HTLM y realizarle modificaciones si conocemos el mismo
Vista previa: Aquí podremos comprobar como se observara la página en el navegador
Carpetas: contiene dos partes, con la lista detallada de páginas y ficheros de la carpeta seleccionada del sitio Web. Se utiliza para la administración de carpetas y archivos de ficheros
Informes: Se utiliza como ayuda para la administración de las páginas dentro del sitio
Exploración: O mapa del sitio. Nos muestra la estructura del sitio Web.
Hipervínculos: Nos muestra todos los hipervínculos de la Web.
Tareas: Es para realizar un listado de tareas que se deben realizar

Imágenes:
Son las mismas propiedades que Word, lo que tenemos que tener en claro es que si vemos una imagen centrada es porque la misma esta ubicada en una tabla, sin bordes visibles, lo mejor para distribuir imágenes en una pagina Web y que estas no se deformen es diseñar tablas tablas sin bordes anidadas

Componentes
Los comentarios: Proporciona información sobre asuntos referentes a la edición de la página Web.
Los contadores: Los contadores de visitas sirven para saber cuánta gente visita nuestra Web.
La fecha y la hora: Nos permite conocer la fecha y la hora de la visita cambiando cada vez que se actualiza
Marquesina: Es un texto que se desplaza a lo ancho de la página.
Botón activable: Es para crear un botón al que haciendo clic va a realizar una determinada acción. Con el menú contextual podemos modificarle los diferentes atributos

Los marcos
Los marcos dividen la pantalla del navegador en ventanas individuales, cada una contineuna página en form individual. La página que aparece dentro del marco puede contener cualquier elemento que se quiera..
Cada marco de una página con marcos es un archivo HTML independiente, por lo que una forma de crear las páginas basadas en marcos es crear alguna de las páginas de contenido antes de crear el conjunto de marcos. Posteriormente, las colocaremos en el conjunto de marcos para comprobar que la apariencia es correcta.
El uso más frecuente de los marcos será incluyendo un marco de navegación que permanece inalterado a lo largo de la visita del usuario. El usuario hace clic en los enlaces o botones para visitar otra parte de la Web. Estos enlaces tienen como destino abrirse en otro marco de la página, normalmente el marco más grande.
Seleccionamos Archivo / Nuevo / Página, seleccionamos el diseño, podremos modificar luego el alto y el ancho de los marcos
No debemos olvidar que los marcos poseen una estructura con jerarquía entre ellos por lo que están anidados
Podemos reestructurar las plantillas y adecuarlas a nuestra comodidad. Podemos modificar los tamaños de los marcos seleccionado y arrastrando los bordes del mismo, dividir los marcos realizamos Marcos / Dividir Marco seleccionamos filas o columnas y eliminar lo realizamos seleccionando y luego Marcos / Eliminar marco.
Asociar páginas a los marcos
Cuando se inicia el proceso de trabajo cada uno debe poseer su propia página Web, por lo que debemos hacer lo siguiente
1. Selecciono el marco
2. Señalo el botón Establecer página inicial, apareciendo el cuadro Crear Hipervínculo, escribiendo en el la dirección donde se encuentra esta pagina. Podemos asociar una página que ya tengamos terminada o una URL, o una en blanco que luego procesaremos
Cómo guardar un conjunto de marcos, este está constituido por varias páginas: la página de marcos, que mantiene las instrucciones sobre cómo debe aparecer y actuar el conjunto de marcos, y las páginas iniciales para cada marco del conjunto de marcos. Cuando guardamos un conjunto de marcos debemos guardar todas estas páginas. Nos aparecerá un cuadro de diálogo con una vista en la cual se verá claramente qué marco es el que estamos guardando.
Hay que tener mucho cuidado a la hora de guardar sino se puede llegar a alterar la estructura del diseño
Cómo modificar las propiedades de los marcos, un conjunto de marcos tiene propiedad por sí mismo, que se guarda en la página principal, la que almacena información de la estructura y funciones de cada marco del conjunto.
A través del cuadro de diálogo modificaremos todas las propiedades del marco que deseemos de forma sencilla.
A través de esta opción podemos cambiar el espaciado del marco, que es la cantidad de espacio en blanco entre los marcos y los bordes del marco.
Esto hay que definirlo en la opción Crear hipervínculo cuando nos pide el marco de destino del enlace, en la ventana siguiente:
Así pues, los marcos es una forma muy sencilla de organizar páginas Web manteniendo a la vista varias páginas.

Mapas de imágenes
Un mapa de imagen es una imagen que contiene enlaces.
1. Insertamos una imagen en la página Web
2. Definir las zonas activas de la imagen.
3. Señalando la imagen se aparece una barra de herramientas en la parte inferior de la página.
La misma posee diferentes botones para alterar las propiedades de las imágenes.

Creamos una zona con forma rectangular

Creamos una zona con forma de círculo o elipse

Creamos cualquier tipo de figura

Elementos multimedia
En una Web podemos incluir texto e imágenes, y a su vez puede poseer vídeo, sonido y música. Los tipos de archivo más habituales para vídeo son AVI, QuickTime y Real Player. Para sonido son WAV , MIDI y MP3.
Para Insertar un vídeo en una página Web,
1. Incrustar el vídeo de forma que aparezca en la página del mismo modo que una imagen.
2. Crear un enlace a un archivo de vídeo
Para insertar un vídeo seleccionamos Insertar / Avanzadas / Complemento: en el cuadro de texto Origen de datos escribiremos la ubicación del vídeo que queremos emplear, incluyendo la extensión del archivo. Para ello, pulsando el botón Examinar buscamos el archivo.
Además, se puede modificar el tamaño, espaciados, alineaciones y ocultar el control de la reproducción del sonido.
Tres forma e insertar de música en la página
· Controles tipo VCR: permiten reproducir el sonido a voluntad.
· Colocar música de fondo: se reproduce automáticamente cuando la página se carga. seleccionamos la opción Propiedades de Página en el menú contextual, seleccionamos el archivo de sonido y determinamos cuantas veces lo queremos reproducir o reproducción continua
· Enlazar un archivo de sonido: el usuario lo descarga y un programa personal lo reproduce.
Para insertar música seguiremos los mismos pasos anteriores
Si deseamos enlazar a una Web posee música le crearemos el hipervínculo a la misma.

Hojas de estilos
Son colecciones de formatos que modifican la apariencia, suele pertenecer a la página o son archivo que se relacionan a las páginas del sitio aplicándole los formatos establecidos en ella.
1. Menú Archivo / Nuevo / Página
2. En el cuadro de diálogo Nuevo seleccionamos la ficha Hoja de estilos, observamos los formatos. Podemos hacer cualquier modificación a la hoja de estilo, luego se guarda en el sitio Web con las otras páginas, después se asocia la hoja a nuestras páginas ya diseñadas.
3. Si deseamos aplicarla a todas las páginas de nuestra Web, seleccionamos Todas las páginas. Si es a algunas seleccionamos Páginas seleccionadas, se presiona en Agregar para buscar y añadir el archivo de la hoja de estilos (con extensión CSS), luego Aceptar, se enlaza automáticamente la hoja de estilos a las páginas que se han elegido.

Formularios
Los formularios es la mejor formas de interactuar con los usuarios de una Web.
1. Para crearlos menú Archivo / Nuevo / Página
2. Luego seleccionamos una de las plantillas.
Cuadro de texto: texto cortos.
Cuadro de texto con barra de desplazamiento: textos más largos
Opción de verificación: son las de opción múltiple
Opción discriminatoria: solo puedo seleccionar una sola
Ventana desplegable: sirve para seleccionar las opciones que se encuentran en la misma.
Creando un formulario en forma manual, seleccionamos Insertar Formulario, y luego colocamos las opciones dentro de los diferentes campos. Por cada formulario, sólo puede haber un botón de Enviar o Restablecer, siendo estos los transmiten al gestor de formulario los datos introducidos.
Cuando se cliquea el botón Enviar, los datos introducidos se envían al gestor de formulario, este procesa las respuestas. Se debe elegir un gestor de formulario basado en FrontPage (están instaladas las extensiones de FrontPage), configurarlo con secuencias de comando propios de nuestro sitio Web (ojo el sitio debe poseer CGI) Exiten dos opciones de gestión de datos: enviarlos a un archivo o al correo electrónico nuestro
Para configurarlo hacemos clic con el botón derecho dentro del cuadro de dialogo, seleccionamos Propiedades de formulario, Seleccionamos la opción deseada en Enviar a:
Si seleccionamos la opción Archivo se debe Examinar para seleccionar el archivo, luego Opciones, en el cuadro de diálogo, seleccionaremos las propiedades del archivo

Seleccionando la opción Resultados por Correo Electrónico, nos dará un nuevo cuadro de dialogo que nos permitira configurar la cuenta de correo.

Determinaremos la dirección del Email, el formato del mismo, tipo de texto, asunto y el Responder a:
Se debe crear una página de confirmación del envío para confirmar al usuario la recepción de su información. Seleccionando la ficha Página de confirmación y la URL de la página de confirmación.

HTML dinámico
Se trata de usar JavaScript, Hojas de Estilo en Cascada (CSS) y tecnología de avanzada que permite diseñar páginas más atractivas para navegar. Para hacerlo, mostraremos la barra de herramientas correspondiente, seleccionando Menú Ver / Barras de Herramientas / Efectos DHTML.

El sistema de trabajo es similar al aplicado en PowerPoint
Texto animado
1. Seleccionamos el texto que se quiere animar.
2. En la barra de efectos DHTML
· Clic: hace que la animación ocurra cuando se haga clic en el texto.
· Doble clic: la animación ocurrirá tras un doble clic en el texto.
· Pasar el Mouse: la animación ocurrirá cuando el ratón pasa por el texto.
3. Carga de página: la animación se producirá cuando se carga la página.
4. Seleccionamos entre dos opciones: Volar hacia fuera o Formato

Imágenes animadas
1. Seleccionamos la imagen que se quiere animar.
2. Las mismas opciones pero con diferentes opciones con respecto al texto
· Podemos hacer que las imágenes se intercambien al pasar el Mouse, como ejemplo agregado
Transiciones entre páginas
Forma de pasar de una pagina a otra con diferentes efectos, para lo cual vamos al Menú Formato / Transición de Página / y en cuadro de diálogo seleccionamos la Opción y el Tiempo de transición
Ejercicio

1- Seleccionar material sobre ............................ por lo menos de tres páginas Web, copiar las URL en el cuaderno (Se pueden ayudar guardando los texto en Word y luego copiarlos al FrontPage)
2- Bajar 6 imágenes de Internet, copiar las URL en el cuaderno
3- Colocar las imágenes dentro de la carpeta de Imágenes
4- Todo el material debe ser trabajado en FrontPage, y deberá ser guardado como web-apellidos
5- El texto debe tener por lo menos 4 párrafos de 12 renglones cada uno, fuente Arial tamaño 12
6- Los subtítulos son digitados, formato de fuente a elección diferente del texto
7- Cada subtitulo deberá estar vinculado según corresponda, no olvidar que el destino, debe tener un marcador con el nombre
8- Se deberán crear las tablas anidadas necesarias para que la página quede según la muestra
9- Las imágenes deben estar colocadas de la siguiente manera ocupando el párrafo de borde a borde superior e inferior, la 1ª alineada a la derecha en el 1º párrafo, la 2ª alineada a la izquierda en el 2º párrafo, la 3ª centrada en el 3º párrafo, la 4ª cubre todo el 4º párrafo de fondo del mismo cambiándole el brillo a 75%
10- Existe una imagen a la derecha del 1º y 2º párrafo compuesta de 3 imágenes horizontales y otra a la izquierda del 3º y 4º párrafo con tres imágenes verticales
11- El titulo centrado en WordArt
12- Copiar las URL con el subtitulo: BIBLIOGRAFIA indicando que sacaron de cada una
13- Formato fondo a dos colores, posición a elección
14- Las imágenes debe mantener la posición antes indicada
15- Cambiar el color del texto de manera que sea legible


Ejercicio


1- Seleccionar material sobre ……………… por lo menos de tres páginas Web, copiar las URL en el cuaderno (Se pueden ayudar guardando los texto en Word y luego copiarlos al FrontPage)
2- Bajar 13 imágenes de Internet, copiar las URL en el cuaderno
3- Colocar las imágenes dentro de la carpeta de Imágenes
4- Todo el material debe ser trabajado en FrontPage, y deberá ser guardado como se nombra cada página
5- El texto por página debe tener por lo menos 16 renglones cada uno, fuente arial tamaño 12
6- Crear Primero la pagina principal y establecerla como tal
7- Crear la página de la bibliografía, y un hipervínculo que retorne a la página principal
8- Los subtítulos son digitados, formato de fuente a elección diferente del texto
9- Se deberán crear las tablas anidadas necesarias para que la página quede según la muestra
10- Crear las paginas del marco 2
11- Crear las páginas del marco 3, un hipervínculo que retorne a la página principal
12- Crear la página de Marcos Principal, y crear el marco 1
13- Vincular las páginas y anidarlas al marco que le corresponda
14- Las imágenes deben estar colocadas de la siguiente manera ocupando el párrafo de borde a borde superior e inferior, la 1ª alineada a la derecha de la 1º Pág., la 2ª alineada a la izquierda en la 2º Pág., la 3ª centrada en la 3º Pág., la 4ª cubre toda la página cambiándole el brillo a 75%
15- Existe una imagen en la página principal compuesta de 3 imágenes horizontales, y en el marco 2 con tres imágenes verticales
16- El titulo centrado en WordArt, lo mismo que Tema 1 y Tema 2
17- Copiar las URL con el subtitulo: BIBLIOGRAFIA indicando que sacaron de cada una
18- Formato fondo a dos colores, posición a elección
19- Las imágenes debe mantener la posición antes indicada
20- Cambiar el color del texto de manera que sea legible


OBJETIVOS
Promover el uso del Internet y su diseño Web como recurso didáctico e instrumento de actualizacion de la metodología de comunicación.
Contribuir a mejorar el proceso de aprendizaje favoreciendo el desarrollo de la capacidad de comprensión, el manejo de la lengua materna y la creatividad, incluyendo elementos multimedia a ser, música, imagen y video.
Estructurar una página web dependiendo el contenido y al público en que va a ser dirigida.
Utilizar el recurso Web como una herramienta de integración de las distintas aplicaciones.
CONTENIDOS
Conocer las propiedades y elementos de una página Web.
Conocer programas como el Irfan View para el proceso y modificación de propiedades de una imagen.
Conocer las diferentes herramientas de un programa de diseñor Web.
Reconocer los errores de un documento en su sintaxis y ortografía y corregirlos.
Optimizar una página Web utilizando las herramientas adecuadas.
Elaborar páginas Web de acuerdo a su forma y uso Coordinar el uso del misma con otras asignaturas.