Manual fronpage1 parte

COLEGIO "SAN FRANCISCO"INSTITUCION EDUCATIVA DISTRITALINFORMATICA- ING.FRANCISCO RUG

“Un proyecto de mejoramiento en la calidad de vida para la comunidad de Ciudad Bolívar

Índice

IntroducciónFundamentos básicosCrear un nuevo sitio webCrear carpetas y páginas nuevasAjustar las propiedades de páginaPoner imágenes y sonido de fondoIntroducir texto y tablasAgregar un títuloLos hipervínculosLos marcadoresLas imágenesLos bordes compartidosComponentes webGalerías de fotografíasTransiciones de páginaLos formulariosLas capas y los marcosLos comportamientos

Introducción

Vamos a imaginar que en nuestro colegio hemos hecho un proyecto muy interesante y queremos difundirlo. Lo tenemos hecho en formato Word, y contiene fotografías, dibujos y textos.

En teoría, podríamos meter nuestro documento en un ordenador conectado a Internet para que estuviera al alcance de todo el mundo. Lo podríamos hacer en un ordenador cualquiera del colegio o de nuestra casa (no viene a cuento, pero hay formas de hacerlo). No obstante nos encontraríamos con los siguientes problemas:

http://www.tutorialdefrontpage.com/introduccion/introduccion.htm

http://www.tutorialdefrontpage.com/comportamientos/comportamientos/comportamientos.htm

http://www.tutorialdefrontpage.com/lascapasylosmarcos/capasymarcos.htm

http://www.tutorialdefrontpage.com/formularios/formularios.htm

http://www.tutorialdefrontpage.com/transicionesdepagina/transicionesdepagina.htm

http://www.tutorialdefrontpage.com/galeriadeimagenes/galeriadeimagenes.htm

http://www.tutorialdefrontpage.com/componentesweb/componentesweb.htm

http://www.tutorialdefrontpage.com/bordescompartidos/bordescompartidos.htm

http://www.tutorialdefrontpage.com/lasimagenes/lasimagenes.htm

http://www.tutorialdefrontpage.com/marcadores/marcadores.htm

http://www.tutorialdefrontpage.com/hipervinculos/hipervinculos.htm

http://www.tutorialdefrontpage.com/titulo/titulo.htm

http://www.tutorialdefrontpage.com/textoytablas/textoytablas.htm

http://www.tutorialdefrontpage.com/fondo/fondo.htm

http://www.tutorialdefrontpage.com/propiedadespagina/propiedadespagina.htm

http://www.tutorialdefrontpage.com/crearcarpetasypaginas/crearcarpetasypaginas.htm

http://www.tutorialdefrontpage.com/crearwebnuevo/crearwebnuevo.htm

http://www.tutorialdefrontpage.com/fundamentosbasicos/fundamentosbasicos.htm



Nuestro documento no tiene un formato apropiado para ser visto en pantalla. El programa Word está pensado para hacer documentos imprimibles.

El documento es muy largo, y la gente tiene que pasar páginas y páginas buscando lo que quieren.

¡¡Algún graciosillo nos ha hecho cambios en el documento!! Y no sabemos quién ha sido.

El ordenador está que echa humo, porque nuestro proyecto se ha hecho muy famoso y siempre hay cientos de personas intentando verlo a la vez.

Para evitar todos estos problemas se han inventado las páginas web. Hasta cierto punto se parecen a los documentos de Word. Incluso veremos que el FrontPage (programa usado para hacer páginas web) se parece bastante al Word.

No obstante, las páginas web tienen estas características especiales:

1. Su formato está pensado específicamente para ser visto en pantalla.

2. Su formato está basado en lo que se llama el hipertexto. Esto significa que no es necesario seguir el documento de forma lineal, sino que hay unos enlaces (llamados hipervínculos) que nos llevan de unas partes a otras del documento, incluso de unas páginas a otras.

3. No pueden ser modificados por los usuarios, salvo las páginas preparadas para ello.

4. Las páginas web se publican en servidores, que son básicamente ordenadores con una capacidad y un ancho de banda suficiente para atender a muchos usuarios simultáneamente

Fundamentos básicos



Vamos a empezar aclarando conceptos para evitar confusiones.

Llamaremos sitio web a una publicación en Internet por una empresa o un particular. Por ejemplo, www.jcyl.es es el sitio web de la Junta de Castilla y León, www.google.com es un sitio web que nos ayuda a buscar en Internet lo que queremos, etc.

Un sitio web se compone normalmente de muchas páginas web. Por ejemplo, el sitio web de un colegio puede tener una página inicial de presentación, una dedicada a proyectos, una de servicios extraescolares, una de fotografías, etc.

Cada página web es un archivo, que se transmite a través de las líneas telefónicas desde el servidor hasta los usuarios, cuyo ordenador mostrará en pantalla el contenido del mismo. Las páginas web suelen ser archivos con la extensión .htm o .html. También existen otras, como son .asp o .php, pero esto son otros tipos de código que no trabajaremos con el FrontPage.

En un sitio web se terminan juntando cientos de archivos: archivos .html (las páginas web propiamente dichas), archivos .jpg y .gif (imágenes), archivos .pdf (documentos para imprimir), archivos .wav y .mid (sonidos) e incluso archivos .wmv, .avi o .mpeg (videos).

¿Pero qué es todo esto de html, jpg y demás cosas raras? ¿Las páginas web no eran siempre punto com?

Lo que termina en .com (también puede ser .es, .net, ...) es el dominio. Un dominio es como una “marca registrada” en Internet. Es decir, que si yo registro el dominio www.micolegio.com, solamente yo podré publicar páginas web dentro de ese dominio.



Dentro de un dominio se alojan las páginas web. Por ejemplo vamos a fijarnos en las siguientes direcciones web:

www.micolegio.com/presentación.htm

www.micolegio.com/proyectos.htm

La primera será la página web presentación.htm, que está alojada en el dominio www.micolegio.com. La segunda será la página web proyectos.htm, que también está alojada en el mismo dominio.

Una dirección web (técnicamente llamada URL), es la ruta de acceso inequívoca que nos lleva a una página web de entre las millones que hay en Internet. En el caso de www.micolegio.com/proyectos.htm no habrá ninguna duda, ya que en Internet sólo hay un dominio llamado micolegio.com (para eso se registran), y dentro de este dominio solo habrá una página llamada proyectos.htm

La dirección web (URL) es lo que escribirán los usuarios en la barra de direcciones de su navegador para llegar a ver nuestra página web.

El navegador es el programa que se utiliza para ver las páginas web (navegar por la red, vamos). El más conocido es el Internet Explorer, pero hay otros como el Netscape o el Opera.



La barra de direcciones es la barra blanca que aparece en la parte superior del navegador. En esta imagen vemos que hemos puesto la dirección de terra en la barra de direcciones:

Como podemos ver en la imagen, hemos introducido http://www.terra.es en la barra de direcciones. Esto es el nombre del dominio pero, si dentro de un dominio hay muchas páginas, ¿Cómo sabe el navegador cuál me ha de mostrar?

En todo sitio web siempre hay una página principal, que es la que contiene la presentación y el menú que nos llevará a las demás páginas. Esta página principal se ha de llamar index.htm, default.htm o home.htm (dependiendo de casos). Esta es la página que se mostrará siempre que no se especifique ninguna dentro de un dominio.

Por ejemplo, prueba a introducir la dirección www.stecyl.es en tu navegador (lo del http delante no es necesario). Después prueba con www.stecyl.es/index.html y verás que es lo mismo. Esto significa que en el primer caso, al no especificar la página a mostrar, se te ha mostrado la página por defecto, que es index.html (la misma que en el segundo caso)

kCrear un nuevo sitio web

amos a crear un sitio web. Lo primero que tenemos que entender es que vamos a generar un gran conjunto de archivos que tenemos que tener muy bien organizados en carpetas para poder establecer los enlaces entre ellos sin volvernos locos.

Tenemos que tener en cuenta que nuestro sitio web, mientras esté en construcción, se almacenará en nuestro disco duro. Cuando ya esté terminado lo publicaremos en internet siguiendo el proceso que ya veremos en su momento.

Para crear un nuevo sitio web seguiremos los siguientes pasos:



En el menú Archivo, hacer click en Nuevo:

2. A la derecha nos sale un panel de tareas donde seleccionaremos Sitio Web de Una Página:



3. A continuación nos sale una ventana como esta: Aquí podemos elegir una plantilla para hacer nuestro sitio web, en el caso de que alguno de los modelos se adapte a nuestras intenciones. Normalmente no será así, por lo que elegiremos Sitio Web de una página. A continuación tenemos que especificar la ubicación del nuevo sitio web (en que parte de nuestro ordenador lo vamos a guardar), para lo cual pincharemos en examinar.

4. A continuación nos sale esta ventana, donde tenemos que seleccionar la carpeta donde guardaremos el nuevo sitio web.

Entonces pincharemos en , y dentro de Mis documentos,

haremos una carpeta nueva pinchando en el icono . Entonces nos saldrá la ventanita

donde solo tendromos que introducir el nombre de la carpeta y darle a aceptar y luego a abrir y ya está.



Una vez creado el sitio web, esto es lo que vamos a ver. En el panel blanco de la izquierda se muestra la lista de carpetas. Como podemos ver, hay una carpeta _private, donde se almacenan archivos que no van a estar accesibles al público, y una carpeta images, donde guardaremos las imágenes para que no estén mezcladas con el resto de archivos.También podemos ver que se nos ha creado nuestra primera página: index.htm. Esta va a ser nuestra página principal. Por supuesto, ahora está en blanco. Nuestra siguiente labor será crear nuestras propias carpetas y páginas, y después llenarlas de contenido.

Crear carpetas y páginas

Una vez creado el nuevo sitio web tenemos que organizarlo bien. Hay que tener en cuenta que nuestro web irá creciendo hasta tener decenas o cientos de archivos, y si no los tenemos organizados en carpetas nos será muy dificil encontrarlos.

Por consiguiente, una vez que tenemos creado el sitio web tenemos que plantearnos que secciones va a tener, y a continuación crear una carpeta para cada uno de los apartados.

No olvidemos que también es posible crear carpetas dentro de otras carpetas.

1. Crear una nueva carpeta

En la parte izquierda del frontpage tenemos un recuadro blanco que es la lista de carpetas. Inicialmente sólo nos saldrán la carpeta general (esa que pone C:/ y no sé qué mas) y las carpetas _private e images:



Tenemos que pinchar en la carpeta general con el botón secundario del ratón (el derecho). Entonces nos sale un menú contextual donde seleccionaremos Nueva > Carpeta.

Entonces nos aparece la nueva carpeta en la lista de carpetas. Mientras tiene el cursor parpadeante, podemos ponerle el nombre que queramos y luego pulsar la tecla intro. También podremos cambiar el nombre posteriormente.

Si queremos crear una carpeta dentro de otra, seguiremos el mismo proceso salvo que empezaremos pinchando con el botón derecho del ratón en la carpeta dentro de la cual queremos crear una nueva.

2. Crear una nueva página

Como vemos en la lista de carpetas, nada mas crear el sitio web nos ha aparecido nuestra primera página index.htm. Esta página no está dentro de ninguna de las carpetas existentes, sino que está simplemente dentro de la carpeta general.Al crear nuevas páginas, debemos decidir si queremos que estén dentro de la carpeta general o dentro de alguna de las subcarpetas.El proceso a seguir es el siguente:



Pinchamos con el botón derecho del ratón en la carpeta dentro de la cual queremos crear la nueva página. Nos sale un menú contextual en el que seleccionaremos Nueva > Página en Blanco.

Entonces nos aparece la nueva página dentro de la lista de carpetas:

Mientras tiene el cursor parpadeante, podemos ponerle el nombre que queramos y luego pulsar la tecla intro. También podremos cambiar el nombre posteriormente. Recordemos que si cambiamos el nombre tenemos que mantener la extensión .htm

Normas para la creación de carpetas y archivos

En principio, cualquier nombre es válido para una carpeta o un archivo de nuestra página web. No es necesario, aunque sí conveniente, que el nombre del archivo coincida con su título. Así pues, una página web que se titule "Rincón de la lectura" podríamos crearla con el nombre de archivo: paginanueva5.htm, pero será más recomendable un nombre fácil de reconocer, como rincondelalectura.htm

A pesar de esto, conviene respetar estas normas:

Escribir un nombre sin espacios, ni letras mayúsculas, ni acentos, ni la letra ñ. Las carpetas no llevan ninguna extensión (por ejemplo: rincondelalectura ) pero las páginas web llevan la extensión .htm (por ejemplo: rincondelalectura.htm) La página principal del sitio web ha de llamarse index.htm (en algunos casos deberá ser default.htm, dependiendo del alojamiento que tengamos contratado)

Cada vez que creemos una página nueva tenemos que ajustar sus propiedades (capítulo siguiente).

Propiedades de página



Cada vez que creamos una página nueva, lo primero que conviene hacer es ajustar sus propiedades. Para ello:

1. Abrimos la página haciendo doble click sobre ella en la lista de carpetas que aparece a la izquierda. La página se nos muestra a la derecha, lo que pasa es que de momento está en blanco.

2. Una vez que la página está abierta (lista para trabajar en ella), vamos al menú Archivo y pinchamos en propiedades:

3. Nos sale una ventana en la que tenemos que introducir:

Título: Es el que se va a mostrar en la parte superior del navegador de quienes visiten esta página. También aparecerá como título de nuestra página en los buscadores (google, yahoo, msn, etc.)

Descripción de la página: también aparecerá en algunos buscadores, debajo del título.

Palabras clave: las utilizan



algunos buscadores para identificar los temas principales de nuestra página. No hay que abusar de las palabras clave, o nos podrán penalizar (si ponemos demasiadas).

Ya solo nos queda pinchar en Aceptar.

Es importante hacer esto con cada una de las páginas de nuestro sitio web

Los bordes compartidos

En la mayoría de los sitios web hay una estructura general que se mantiene en todas las páginas del sitio. Una de las más frecuentes es que haya un margen superior con el logotipo del sitio web, un margen izquierdo con el menú principal, un margen derecho con anuncios publicitarios y un margen inferior con información legal, datos de contacto, etc. Si tuvieramos que poner todo esto en cada página que hacemos sería mucho trabajo. Para ello están los bordes compartidos. Se trata de márgenes que tendremos que rellenar sólo una vez y aparecerán en todas las páginas que hagamos.

Para hacer los bordes compartidos abrimos la página principal (index.htm, default.htm o home.htm) y vamos al menú Formato > Bordes compartidos. Nos saldrá la siguiente ventana:



Seleccionamos Todas las páginas y después seleccionamos los bordes que queremos que aparezcan. En este ejemplo hemos seleccionado el borde superior y el izquierdo.

Cuando insertamos los bordes compartidos nos aparecerán en nuestras páginas delimitados por unas líneas de puntos. La primera vez nos aparecerá:

Comentario: Este borde aparece en todas las páginas de su sitio web. Reemplace este comentario con su propio contenido.

Pues eso, que borramos ese comentario y en su lugar ponemos nuestro logotipo, nuestro menú o lo que nos apetezca.

Normalmente el menú principal del web se pone en un borde compartido. Para ello simplemente tenemos que insertar en el borde deseado unos hipervínculos que nos lleven a los diversos apartados de nuestro sitio web.

Si en alguna de las páginas de nuestro sitio web no queremos que aparezcan los bordes compartidos, tenemos que ir a Formato > Bordes compartidos, luego pinchar en página actual y deseleccionar los bordes que no queremos que aparezcan.

Los componentes web

Vamos a ver aquí algunos de los componentes que pueden hacer nuestra página más atractiva:

1. Las marquesinas2. Los botones interactivos3. Los contadores de visitas

http://www.tutorialdefrontpage.com/componentesweb/componentesweb.htm#contador

http://www.tutorialdefrontpage.com/componentesweb/componentesweb.htm#botones

http://www.tutorialdefrontpage.com/componentesweb/componentesweb.htm#marquesinas



1. Las marquesinas

Una marquesina es un texto que se desplaza:

Para insertar una marquesina vamos a Insertar > Componente web. Nos saldrá esta ventana:

En el cuadro de la izquierda seleccionamos Efectos dinámicos, y en el cuadro de la derecha hacemos doble clic en Marquesina.

A continuación nos saldrá esta ventana:



Aquí pondremos el texto que queremos que aparezca en la marquesina y ajustaremos las variables de tamaño, color, velocidad, etc.

Cuando le damos a aceptar nos aparecerá la marquesina integrada en nuestra página web, lo que pasa es que para

ver el movimiento tenemos que pinchar en .

Podemos cambiar el color y el tipo de letra de la marquesina después de haberla insertado. Para ello simplemente seleccionamos la marquesina (un simple clic sobre ella) y utilizamos las herramientas de texto:

2. Los botones interactivos

Los botones interactivos nos servirán para hacer que el menú de nuestro sitio web parezca mucho más profesional. El resultado será algo así:

Donde cada botón nos llevaría a la página correspondiente.

Vamos a Insertar > Componente web y luego seleccionamos Efectos dinámicos > Botón interactivo. Nos saldrá la siguiente ventana:



Aquí seleccionaremos el modelo que queramos, pondremos el texto e insertaremos el hipervínculo al que nos tiene que llevar el botón. Para ello pincharemos en examinar y buscaremos la página correspondiente.

3. Contador de visitas a la página

Esto es un contador de visitas a la página: . Muestra el número de usuarios que han visto la página.

Vamos a Insertar > Componente web, luego pinchamos en Contador de visitas a la página y seleccionamos el modelo que más nos guste

Galerías de fotografías

Las galerías de fotografías son como álbumes de fotos en formato web. Contienen miniaturas de todas las fotos, sobre las cuales podemos pinchar para verlas en grande.

Aquí tienes un ejemplo de galería de fotografías

Para hacer una galería de imágenes seguiremos el siguiente proceso.

Lo primero será tener guardadas en el ordenador las fotografías digitales que vamos a utilizar. Pueden estar en cualquier parte del disco duro. Este es el único caso en el que no tenemos que guardar las imágenes dentro de las carpetas de nuestro sitio web antes de empezar. Las tendremos en otro lugar (mis documentos, mis imágenes, etc.)

También existe la opción de agregar imágenes directamente desde el escáner o la cámara digital.

http://www.tutorialdefrontpage.com/galeriadeimagenes/ejemplo.htm



Vamos a Insertar > Componente Web y seleccionamos Galería de Fotografías. Nos saldrán varios modelos:

Yo recomiendo elegir el modelo , que nos muestra arriba las miniaturas y debajo, en la misma página, nos muestra la ampliación de la imagen seleccionada.

Hacemos doble clic en el modelo seleccionado y nos saldrá la siguiente ventana:

Ahora tenemos que pinchar en

y nos saldrá una ventana de exploración para buscar las imágenes que queremos insertar.Podemos insertarlas una a una o seleccionarlas todas juntas.

A continuación, una vez agregadas todas las imágenes, vamos a ajustar su tamaño. Para ello seleccionamos la primera de las fotografías agregadas (con un simple clic) y pinchamos en el botón Modificar:



Nos saldrá una ventana que nos permite cambiar el tamaño de las fotografías, así como rotarlas o recortarlas:

Yo recomiendo poner un alto de 500 píxeles como mucho, ya que si la fotografía es mayor no nos entrará en la pantalla. Aún así, puede que sea demasiado grande si la página es vista desde un monitor antiguo (resolución 800x600) o si tenemos un margen superior (borde compartido) que ocupe mucho.Normalmente nos interesará poner el mismo tamaño para todas las imágenes, así que seleccionaremos la casilla Tamaño predeterminado, para no tener que cambiar el tamaño de todas las fotos una a una.

Podemos ir pinchando



en el botón siguiente para ver si todas las fotos están bien o si hay que girar alguna.

Finalmente pinchamos en aceptar.

Volvemos otra vez a la ventana de antes, la de Propiedades de la galería de fotografías. Ya sólo nos queda poner títulos a las fotografías, si queremos. Los títulos que pongamos aparecerán debajo de cada fotografía.

Empezamos seleccionando la primera fotografía, con un simple clic. En la parte inferior seleccionamos Reemplazar y usar formato de fuente personalizado. Elegimos el tipo de fuente, el tamaño y el color y escribimos el título. Luego seleccionamos la siguiente imagen y repetimos el proceso, y así sucesivamente.

Ya solo nos queda pinchar en Aceptar y ver el resultado. Si hay algo que no queda bien (la imagen es demasiado grande, o hay que rotar alguna, o queremos cambiar el color de los títulos, ...) podemos pinchar sobre la galería con el botón derecho, seleccionar Propiedades de la galería de fotografías y hacer los cambios necesarios.

Cuando vayamos a guardar los cambios en la página web nos saldrá la ventana Guardar archivos incrustados:



Aquí tenemos que decirle al programa en qué carpeta de nuestro web queremos guardar todas las fotografías que hemos incrustado en la galería que acabamos de crear. Para ello pinchamos en Cambiar carpeta y seleccionamos la carpeta images (recomendado).

Las transiciones de página

En una página web podemos establecer efectos especiales al entrar o al salir de la página. Esta página tenía uno de esos efectos, no se si lo habrás notado al entrar. También puedes verlo cuando pases al siguiente capítulo.

Para establecer las transiciones de página vamos al menú Formato > Transición de página y nos sale esta ventana:

En evento seleccionamos entrar en página y establecemos el efecto que queremos al entrar (mezclar, recuadro entrante, salida en círculo, etc.) y el tiempo que queremos que dure (unos 3 segundos). Luego seleccionamos el evento Salir de página y repetimos la operación. Pinchamos en Aceptar y ya está.

Los formularios

Los formularios son tablas en las que el visitante de la página web puede escribir algo o seleccionar algunos valores.



Los formularios se utilizan para obtener opiniones de los visitantes, para permitir que ellos mismos vayan enriqueciendo la página web con sus aportaciones, etc. Los formularios son muy importantes para convertir nuestro sitio web en un recurso dinámico y participativo.

Un formulario puede tener un aspecto como este:

Principio del formulario

Nombre:

Curso:

¿Te ha gustado nuestro sitio web? Si No

Comentarios:

Final del formulario

Los datos que los usuarios introducen en un formulario pueden ser enviados por correo a la dirección que queramos o pueden ser insertados en otra página.

Vamos a fijarnos en los elementos del anterior formulario:

Esto es un cuadro de texto. Se utiliza para escribir pocas palabras (nombre, provincia, etc)

Esto es un cuadro desplegable. Se utiliza para que el visitante pueda elegir entre varias opciones.

Esto es un botón de opción. Se utiliza para que el visitante pueda elegir una o varias opciones.



Esto es un área de texto. Se utiliza para que el visitante pueda escribir largos textos (opiniones, sugerencias, contribuciones, etc)

El botón enviar envía los resultados y el botón restablecer borra todo lo escrito en el formulario.

Para insertar un formulario vamos a Insertar > Formulario > Formulario. Nos aparecerá una línea de puntos que delimita el formulario y los botones Enviar y Restablecer. A continuación hay que insertar en el formulario los elementos que nos interesen. Para ello vamos a Insertar > Formulario y seleccionamos el elemento que nos interese (cuadro de texto, área de texto, cuadro desplegable, etc)

A continuación tenemos que ajustar las propiedades de cada elemento (llamados campos). Para ello pinchamos con el botón derecho sobre cada elemento y seleccionamos Propiedades de Campo de Formulario. Según de qué tipo de campo se trate, nos aparecerá una ventana diferente:

Si se trata de un cuadro de texto nos aparecerá la siguiente ventana. Conviene poner el Nombre (en este caso he puesto "nombre" porque en este cuadro de texto es donde los visitantes escriben su nombre). También conviene poner el Ancho en caracteres. Si tienen que escribir el nombre y los apellidos, por ejemplo, tal vez convendría poner 40 o más.



Si se trata de un cuadro desplegable nos aparecerá esta ventana. También tenemos que poner el nombre a este campo (en este caso he puesto "curso") y agregar las opciones seleccionables con el botón Agregar. En este ejemplo he agregado una opción correspondiente a cada curso.

En el caso del botón de opción pondremos el mismo nombre en los dos botones, y cambiaremos el valor (en este ejemplo ponemos el nombre "gustado", y en el valor ponemos en uno "sí" y en el otro "no").



Si se trata de un área de texto pondremos el nombre, el ancho en caracteres y el número de líneas.

Ahora nos queda ajustar las propiedades de formulario. Para ello pinchamos con el botón derecho dentro del formulario (cualquier punto dentro de la línea de puntos que lo delimita) y seleccionamos Propiedades de Formulario. Nos saldrá esta ventana:

Si queremos enviar los resultados a otra página web pincharemos en examinar y buscaremos la página seleccionada.

Si lo que queremos es que se envíen los resultados a nuestro correo electrónico escribiremos la dirección de email en la casilla correspondiente.

En la ventana anterior, antes de Aceptar, pincharemos en opciones.

Nos sale una ventana con cuatro pestañas: . Vamos a ver lo que hay que hacer en cada una de ellas:



Dentro de la pestaña resultados, pincharemos en examinar para seleccionar la página web a la que queremos enviar los resultados. En Formato de archivo yo recomiendo elegir HTML.

En la pestaña resultados por correo electrónico insertaremos la dirección de correo que ha de recibir los resultados.

Más abajo podemos escribir la línea asunto. Esto será el título del mensaje enviado por correo electrónico.



En la pestaña campos guardados, simplemente hemos de seleccionar los campos que queremos que sean guardados o enviados (aparecerán todos salvo que borremos alguno en esta ventana).

En la pestaña Página de confirmación tenemos que hacer algo importante. Es conveniente que cuando el usuario rellena el formulario y le da a enviar, aparezca una pantalla que diga algo así como que "los datos han sido enviados con éxito, gracias por colaborar" y que incluya un enlace para volver a la página principal.

Bueno, pues lo que tenemos que hacer es crear esa página de confirmación. Simplemente creamos una nueva página en blanco, dentro de la misma carpeta, que podemos llamar confirmacion.htm. En esta página metemos un texto de confirmación y agradecimiento y un enlace a la página principal o de vuelta al apartado en el que estábamos.

A continuación volvemos a propiedades de formulario y pinchamos de nuevo en opciones para que nos vuelva a salir esta ventana. En dirección URL de la página de confirmación pinchamos en examinar para seleccionar la



página confirmacion.htm que acabamos de crear.

A veces, si hemos seleccionado que los resultados del formulario se incluyan en otra página web, resulta interesante que la página de confirmación sea esa misma página a la que hemos enviado los resultados. De esta manera, el usuario podrá ver su contribución publicada en el mismo momento en que pinche en enviar.

NOTA IMPORTANTE: Los formularios creados de esta manera sólo funcionarán si publicamos nuestro sitio web en un alojamiento (hosting) que tenga las extensiones de Frontpage. Un sitio web creado con Frontpage se puede publicar en cualquier tipo de hosting, pero si queremos que funcionen estos formularios tenemos que elegir uno que especifique que tiene extensiones de frontpage.

Las capas

Las capas se utilizan para superponer unos elementos sobre otros. En este ejemplo he insertado una imagen y después he superpuesto una capa con texto:



Para insertar una capa vamos a Insertar > Capa. Nos aparecerá así:

Lo unico que tenemos que hacer es colocar la capa donde queramos y escribir dentro de ella. También podemos colocar imágenes y otros elementos en la capa. Todo es cuestión de probar.

El recuadro azul no se va a ver cuando sea publicado, por supuesto.

No es extraño que las capas aparezcan descolocadas al publicarse, sobre todo si cambia la resolución de pantalla del usuario.

Comportamientos

Los comportamientos hacen que nuestra página web sea más dinámica. Son, por ejemplo, comportamientos:

Que una imagen cambie al pinchar en otra.Que se reproduzca un sonido al pinchar en una imagen.

1. Cambiar una imagen por otra

Podemos hacer que una imagen se cambie por otra al pinchar o simplemente al pasar el mouse por encima. El efecto puede ser algo así:(prueba a pasar el ratón por encima de las palabras elephant y lion)



Para empezar, seleccionamos una imagen o un texto de nuestro sitio web. Vamos al menú Formato > Comportamientos. A la derecha nos sale la ventana Comportamientos:

Pinchamos en insertar y luego en intercambiar imagen. Nos saldrá la siguiente ventana:

En el recuadro de arriba vemos la lista de imágenes que hay en la página web actual. Seleccionamos la imagen que queremos que cambie (puede ser la misma o otra) y después introducimos la imagen de intercambio buscando en Examinar. Si queremos que la imagen vuelva a ser la original después de quitar el ratón, seleccionaremos Restaurar al restaurar el mouse, de lo contrario el cambio de imagen será permanente.

Una vez que damos a aceptar nos saldrá el intercambio de imagen en la lista de comportamientos:



Onmouseover significa que el cambio de imagen se producirá con solo pasar el ratón por encima de la imagen. Si pinchamos sobre esa palabra veremos que hay muchas más opciones, aunque la más normal, aparte de onmouseover, es Onclick (cambiar la imagen al hacer clic sobre ella).Conviene que la imagen de intercambio tenga un tamaño parecido a la original. Sobre todo que si una es vertical, que la otra no sea apaisada, porque se mostraría muy deformada (la segunda se adapta al tamaño de la primera).

2. Reproducir sonido

Al igual que en el ejemplo anterior, vamos a Formato > Comportamientos y luego a Insertar > Reproducir sonido. En la ventana que nos aparece seleccionaremos el archivo de sonido que queremos reproducir.

Hay muchos otros comportamientos, aunque estos dos son los más usuales. Se trata de probar y experimentar...

Manual fronpage1 parte

Documents

Transcript of Manual fronpage1 parte