Este documento describe los pasos para crear un sitio web utilizando el programa FrontPage. Explica cómo crear carpetas y páginas nuevas, ajustar las propiedades de las páginas como el título y la descripción, y agregar elementos como imágenes, texto, hipervínculos y formularios. El objetivo final es difundir un proyecto educativo realizado en el colegio a toda la comunidad a través de una página web.
Proyecto de mejoramiento en la calidad de vida Ciudad Bolívar
1. COLEGIO "SAN FRANCISCO"
INSTITUCION EDUCATIVA DISTRITAL
INFORMATICA- ING.FRANCISCO RUG
“Un proyecto de mejoramiento en la calidad de vida para la comunidad de Ciudad Bolívar
Índice
Introducción
Fundamentos básicos
Crear un nuevo sitio web
Crear carpetas y páginas nuevas
Ajustar las propiedades de página
Poner imágenes y sonido de fondo
Introducir texto y tablas
Agregar un título
Los hipervínculos
Los marcadores
Las imágenes
Los bordes compartidos
Componentes web
Galerías de fotografías
Transiciones de página
Los formularios
Las capas y los marcos
Los 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:
2. COLEGIO "SAN FRANCISCO"
INSTITUCION EDUCATIVA DISTRITAL
INFORMATICA- ING.FRANCISCO RUG
“Un proyecto de mejoramiento en la calidad de vida para la comunidad de Ciudad Bolívar
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
3. COLEGIO "SAN FRANCISCO"
INSTITUCION EDUCATIVA DISTRITAL
INFORMATICA- ING.FRANCISCO RUG
“Un proyecto de mejoramiento en la calidad de vida para la comunidad de Ciudad Bolívar
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.
4. COLEGIO "SAN FRANCISCO"
INSTITUCION EDUCATIVA DISTRITAL
INFORMATICA- ING.FRANCISCO RUG
“Un proyecto de mejoramiento en la calidad de vida para la comunidad de Ciudad Bolívar
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.
5. COLEGIO "SAN FRANCISCO"
INSTITUCION EDUCATIVA DISTRITAL
INFORMATICA- ING.FRANCISCO RUG
“Un proyecto de mejoramiento en la calidad de vida para la comunidad de Ciudad Bolívar
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:
6. COLEGIO "SAN FRANCISCO"
INSTITUCION EDUCATIVA DISTRITAL
INFORMATICA- ING.FRANCISCO RUG
“Un proyecto de mejoramiento en la calidad de vida para la comunidad de Ciudad Bolívar
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:
7. COLEGIO "SAN FRANCISCO"
INSTITUCION EDUCATIVA DISTRITAL
INFORMATICA- ING.FRANCISCO RUG
“Un proyecto de mejoramiento en la calidad de vida para la comunidad de Ciudad Bolívar
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á.
8. COLEGIO "SAN FRANCISCO"
INSTITUCION EDUCATIVA DISTRITAL
INFORMATICA- ING.FRANCISCO RUG
“Un proyecto de mejoramiento en la calidad de vida para la comunidad de Ciudad Bolívar
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:
9. COLEGIO "SAN FRANCISCO"
INSTITUCION EDUCATIVA DISTRITAL
INFORMATICA- ING.FRANCISCO RUG
“Un proyecto de mejoramiento en la calidad de vida para la comunidad de Ciudad Bolívar
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:
10. COLEGIO "SAN FRANCISCO"
INSTITUCION EDUCATIVA DISTRITAL
INFORMATICA- ING.FRANCISCO RUG
“Un proyecto de mejoramiento en la calidad de vida para la comunidad de Ciudad Bolívar
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
11. COLEGIO "SAN FRANCISCO"
INSTITUCION EDUCATIVA DISTRITAL
INFORMATICA- ING.FRANCISCO RUG
“Un proyecto de mejoramiento en la calidad de vida para la comunidad de Ciudad Bolívar
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
12. COLEGIO "SAN FRANCISCO"
INSTITUCION EDUCATIVA DISTRITAL
INFORMATICA- ING.FRANCISCO RUG
“Un proyecto de mejoramiento en la calidad de vida para la comunidad de Ciudad Bolívar
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:
13. COLEGIO "SAN FRANCISCO"
INSTITUCION EDUCATIVA DISTRITAL
INFORMATICA- ING.FRANCISCO RUG
“Un proyecto de mejoramiento en la calidad de vida para la comunidad de Ciudad Bolívar
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 marquesinas
2. Los botones interactivos
3. Los contadores de visitas
14. COLEGIO "SAN FRANCISCO"
INSTITUCION EDUCATIVA DISTRITAL
INFORMATICA- ING.FRANCISCO RUG
“Un proyecto de mejoramiento en la calidad de vida para la comunidad de Ciudad Bolívar
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.
15. COLEGIO "SAN FRANCISCO"
INSTITUCION EDUCATIVA DISTRITAL
INFORMATICA- ING.FRANCISCO RUG
“Un proyecto de mejoramiento en la calidad de vida para la comunidad de Ciudad Bolívar
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.
16. COLEGIO "SAN FRANCISCO"
INSTITUCION EDUCATIVA DISTRITAL
INFORMATICA- ING.FRANCISCO RUG
“Un proyecto de mejoramiento en la calidad de vida para la comunidad de Ciudad Bolívar
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.
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:
17. COLEGIO "SAN FRANCISCO"
INSTITUCION EDUCATIVA DISTRITAL
INFORMATICA- ING.FRANCISCO RUG
“Un proyecto de mejoramiento en la calidad de vida para la comunidad de Ciudad Bolívar
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:
18. COLEGIO "SAN FRANCISCO"
INSTITUCION EDUCATIVA DISTRITAL
INFORMATICA- ING.FRANCISCO RUG
“Un proyecto de mejoramiento en la calidad de vida para la comunidad de Ciudad Bolívar
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.
19. COLEGIO "SAN FRANCISCO"
INSTITUCION EDUCATIVA DISTRITAL
INFORMATICA- ING.FRANCISCO RUG
“Un proyecto de mejoramiento en la calidad de vida para la comunidad de Ciudad Bolívar
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:
20. COLEGIO "SAN FRANCISCO"
INSTITUCION EDUCATIVA DISTRITAL
INFORMATICA- ING.FRANCISCO RUG
“Un proyecto de mejoramiento en la calidad de vida para la comunidad de Ciudad Bolívar
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.
21. COLEGIO "SAN FRANCISCO"
INSTITUCION EDUCATIVA DISTRITAL
INFORMATICA- ING.FRANCISCO RUG
“Un proyecto de mejoramiento en la calidad de vida para la comunidad de Ciudad Bolívar
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:
Enviar Restablecer
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.
22. COLEGIO "SAN FRANCISCO"
INSTITUCION EDUCATIVA DISTRITAL
INFORMATICA- ING.FRANCISCO RUG
“Un proyecto de mejoramiento en la calidad de vida para la comunidad de Ciudad Bolívar
Esto es un área de texto. Se utiliza para que el visitante pueda escribir largos textos (opiniones, sugerencias,
contribuciones, etc)
Enviar Restablecer
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.
23. COLEGIO "SAN FRANCISCO"
INSTITUCION EDUCATIVA DISTRITAL
INFORMATICA- ING.FRANCISCO RUG
“Un proyecto de mejoramiento en la calidad de vida para la comunidad de Ciudad Bolívar
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.
24. COLEGIO "SAN FRANCISCO"
INSTITUCION EDUCATIVA DISTRITAL
INFORMATICA- ING.FRANCISCO RUG
“Un proyecto de mejoramiento en la calidad de vida para la comunidad de Ciudad Bolívar
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:
25. COLEGIO "SAN FRANCISCO"
INSTITUCION EDUCATIVA DISTRITAL
INFORMATICA- ING.FRANCISCO RUG
“Un proyecto de mejoramiento en la calidad de vida para la comunidad de Ciudad Bolívar
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.
26. COLEGIO "SAN FRANCISCO"
INSTITUCION EDUCATIVA DISTRITAL
INFORMATICA- ING.FRANCISCO RUG
“Un proyecto de mejoramiento en la calidad de vida para la comunidad de Ciudad Bolívar
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
27. COLEGIO "SAN FRANCISCO"
INSTITUCION EDUCATIVA DISTRITAL
INFORMATICA- ING.FRANCISCO RUG
“Un proyecto de mejoramiento en la calidad de vida para la comunidad de Ciudad Bolívar
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í:
28. COLEGIO "SAN FRANCISCO"
INSTITUCION EDUCATIVA DISTRITAL
INFORMATICA- ING.FRANCISCO RUG
“Un proyecto de mejoramiento en la calidad de vida para la comunidad de Ciudad Bolívar
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)
29. COLEGIO "SAN FRANCISCO"
INSTITUCION EDUCATIVA DISTRITAL
INFORMATICA- ING.FRANCISCO RUG
“Un proyecto de mejoramiento en la calidad de vida para la comunidad de Ciudad Bolívar
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:
30. COLEGIO "SAN FRANCISCO"
INSTITUCION EDUCATIVA DISTRITAL
INFORMATICA- ING.FRANCISCO RUG
“Un proyecto de mejoramiento en la calidad de vida para la comunidad de Ciudad Bolívar
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...