SlideShare uma empresa Scribd logo
1 de 30
Baixar para ler offline
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:
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
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.
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.
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:
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:
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á.
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:
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:
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
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
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:
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
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.
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.
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:
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:
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.
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:
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.
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.
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.
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.
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:
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.
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
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í:
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)
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:
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...

Mais conteúdo relacionado

Mais procurados

Comparación Web 1.0 y Web 2.0_eproanio2009
Comparación Web 1.0 y Web 2.0_eproanio2009Comparación Web 1.0 y Web 2.0_eproanio2009
Comparación Web 1.0 y Web 2.0_eproanio2009Edison Proaño
 
Practica 4.1. que es la web herrera indise
Practica 4.1. que es la web herrera indisePractica 4.1. que es la web herrera indise
Practica 4.1. que es la web herrera indiseJavier Herrera
 
La web y sus versione1
La web y sus versione1La web y sus versione1
La web y sus versione1Juliancalvo08
 
Que es la web
Que es la webQue es la web
Que es la webdulce1217
 
Contenido web 1.0,2.0 y3.0
Contenido web 1.0,2.0 y3.0Contenido web 1.0,2.0 y3.0
Contenido web 1.0,2.0 y3.0guryta
 
Análisis WEB 1.0 - 2.0 - 3.0
Análisis WEB 1.0 - 2.0 - 3.0 Análisis WEB 1.0 - 2.0 - 3.0
Análisis WEB 1.0 - 2.0 - 3.0 Natalia Almanza
 
Evolucion de la web joha
Evolucion de la web johaEvolucion de la web joha
Evolucion de la web johaarmijojohana
 
¿Quién dijo que hacer un blog era fácil?
¿Quién dijo que hacer un blog era fácil?¿Quién dijo que hacer un blog era fácil?
¿Quién dijo que hacer un blog era fácil?smmahugo
 
Recursos Web 2.0 con Moodle y Google Apps para optimar el proceso de enseñan...
Recursos Web 2.0 con Moodle y Google Apps para optimar el proceso de enseñan...Recursos Web 2.0 con Moodle y Google Apps para optimar el proceso de enseñan...
Recursos Web 2.0 con Moodle y Google Apps para optimar el proceso de enseñan...Franklin Calle Zapata
 
1.6. web 2.0 y redes sociales
1.6. web 2.0 y redes sociales1.6. web 2.0 y redes sociales
1.6. web 2.0 y redes socialesGalo Anzules
 
Tic diapositivas terminadas
Tic diapositivas terminadasTic diapositivas terminadas
Tic diapositivas terminadasmarisol101
 

Mais procurados (18)

Comparación Web 1.0 y Web 2.0_eproanio2009
Comparación Web 1.0 y Web 2.0_eproanio2009Comparación Web 1.0 y Web 2.0_eproanio2009
Comparación Web 1.0 y Web 2.0_eproanio2009
 
Practica 4.1. que es la web herrera indise
Practica 4.1. que es la web herrera indisePractica 4.1. que es la web herrera indise
Practica 4.1. que es la web herrera indise
 
La web y sus versione1
La web y sus versione1La web y sus versione1
La web y sus versione1
 
web 1.0 ,2.0 y 3.0
web 1.0 ,2.0 y 3.0 web 1.0 ,2.0 y 3.0
web 1.0 ,2.0 y 3.0
 
Que es la web
Que es la webQue es la web
Que es la web
 
Web 2.0
Web 2.0Web 2.0
Web 2.0
 
Web 2.0
Web 2.0Web 2.0
Web 2.0
 
Contenido web 1.0,2.0 y3.0
Contenido web 1.0,2.0 y3.0Contenido web 1.0,2.0 y3.0
Contenido web 1.0,2.0 y3.0
 
La web laura rodas
La web laura rodasLa web laura rodas
La web laura rodas
 
Practica 4.1. que es la web
Practica 4.1.  que es la webPractica 4.1.  que es la web
Practica 4.1. que es la web
 
Análisis WEB 1.0 - 2.0 - 3.0
Análisis WEB 1.0 - 2.0 - 3.0 Análisis WEB 1.0 - 2.0 - 3.0
Análisis WEB 1.0 - 2.0 - 3.0
 
Web (1)
Web (1)Web (1)
Web (1)
 
Evolucion de la web joha
Evolucion de la web johaEvolucion de la web joha
Evolucion de la web joha
 
¿Quién dijo que hacer un blog era fácil?
¿Quién dijo que hacer un blog era fácil?¿Quién dijo que hacer un blog era fácil?
¿Quién dijo que hacer un blog era fácil?
 
Recursos Web 2.0 con Moodle y Google Apps para optimar el proceso de enseñan...
Recursos Web 2.0 con Moodle y Google Apps para optimar el proceso de enseñan...Recursos Web 2.0 con Moodle y Google Apps para optimar el proceso de enseñan...
Recursos Web 2.0 con Moodle y Google Apps para optimar el proceso de enseñan...
 
1.6. web 2.0 y redes sociales
1.6. web 2.0 y redes sociales1.6. web 2.0 y redes sociales
1.6. web 2.0 y redes sociales
 
Tic diapositivas terminadas
Tic diapositivas terminadasTic diapositivas terminadas
Tic diapositivas terminadas
 
PresentacióN1
PresentacióN1PresentacióN1
PresentacióN1
 

Destaque

Segunda valoracion dimension cognitiva naturales y sociales
Segunda valoracion dimension cognitiva naturales y socialesSegunda valoracion dimension cognitiva naturales y sociales
Segunda valoracion dimension cognitiva naturales y socialesMarixneyer Peña
 
Valoración dimensión cognitiva matematicas
Valoración dimensión cognitiva matematicasValoración dimensión cognitiva matematicas
Valoración dimensión cognitiva matematicasMarixneyer Peña
 
Valoracion 2 dimensión comunicativa
Valoracion 2 dimensión comunicativaValoracion 2 dimensión comunicativa
Valoracion 2 dimensión comunicativaMarixneyer Peña
 
Prueba Para Preescolares "Jardin de Niños Pablo Moncayo"
Prueba Para Preescolares "Jardin de Niños Pablo Moncayo"Prueba Para Preescolares "Jardin de Niños Pablo Moncayo"
Prueba Para Preescolares "Jardin de Niños Pablo Moncayo"Meipe.preescolaredu
 
Pruebas de preescolar tipo icfes 2011
Pruebas de preescolar tipo  icfes 2011Pruebas de preescolar tipo  icfes 2011
Pruebas de preescolar tipo icfes 2011inesrodriguezmosquera
 
Ev. diagnóstica de lenguaje 1 básico (1)
Ev. diagnóstica de lenguaje 1  básico (1)Ev. diagnóstica de lenguaje 1  básico (1)
Ev. diagnóstica de lenguaje 1 básico (1)Karen Rodríguez
 

Destaque (10)

Acces crear tablas
Acces crear tablasAcces crear tablas
Acces crear tablas
 
Segunda valoracion dimension cognitiva naturales y sociales
Segunda valoracion dimension cognitiva naturales y socialesSegunda valoracion dimension cognitiva naturales y sociales
Segunda valoracion dimension cognitiva naturales y sociales
 
Acces crear tablas
Acces crear tablasAcces crear tablas
Acces crear tablas
 
Formulas excel 2014
Formulas excel 2014Formulas excel 2014
Formulas excel 2014
 
Valoración dimensión cognitiva matematicas
Valoración dimensión cognitiva matematicasValoración dimensión cognitiva matematicas
Valoración dimensión cognitiva matematicas
 
Valoracion 2 dimensión comunicativa
Valoracion 2 dimensión comunicativaValoracion 2 dimensión comunicativa
Valoracion 2 dimensión comunicativa
 
Prueba Para Preescolares "Jardin de Niños Pablo Moncayo"
Prueba Para Preescolares "Jardin de Niños Pablo Moncayo"Prueba Para Preescolares "Jardin de Niños Pablo Moncayo"
Prueba Para Preescolares "Jardin de Niños Pablo Moncayo"
 
Prueba de lenguaje julio 2012
Prueba de lenguaje julio 2012Prueba de lenguaje julio 2012
Prueba de lenguaje julio 2012
 
Pruebas de preescolar tipo icfes 2011
Pruebas de preescolar tipo  icfes 2011Pruebas de preescolar tipo  icfes 2011
Pruebas de preescolar tipo icfes 2011
 
Ev. diagnóstica de lenguaje 1 básico (1)
Ev. diagnóstica de lenguaje 1  básico (1)Ev. diagnóstica de lenguaje 1  básico (1)
Ev. diagnóstica de lenguaje 1 básico (1)
 

Semelhante a Manual fronpage1 parte

Manual de frontpage
Manual de frontpageManual de frontpage
Manual de frontpagechequita007
 
la web, deep web
la web, deep webla web, deep web
la web, deep webOdiliRiver
 
246416925 practica-4-1-que-es-la-web
246416925 practica-4-1-que-es-la-web246416925 practica-4-1-que-es-la-web
246416925 practica-4-1-que-es-la-webJair Cabrales Ruiz
 
Libro de la web 2.0
Libro de la web 2.0Libro de la web 2.0
Libro de la web 2.0dannacepeda
 
Libro de la web 2.0
Libro de la web 2.0Libro de la web 2.0
Libro de la web 2.0dannacepeda
 
246416925 practica-4-1-que-es-la-web
246416925 practica-4-1-que-es-la-web246416925 practica-4-1-que-es-la-web
246416925 practica-4-1-que-es-la-webjair1606
 
Practica 4.1. que es la web
Practica 4.1. que es la webPractica 4.1. que es la web
Practica 4.1. que es la weboscedumor
 
246416925 practica-4-1-que-es-la-web
246416925 practica-4-1-que-es-la-web246416925 practica-4-1-que-es-la-web
246416925 practica-4-1-que-es-la-webJair Cabrales Ruiz
 
Practica 4.1. que es la web
Practica 4.1. que es la webPractica 4.1. que es la web
Practica 4.1. que es la webdynet pk
 
Informe De ExposicióN De Tecnologia
Informe De ExposicióN De TecnologiaInforme De ExposicióN De Tecnologia
Informe De ExposicióN De Tecnologiaguestc2902fa
 
I N F O R M E D E Exposición De Tecnologia1
I N F O R M E  D E  Exposición De Tecnologia1I N F O R M E  D E  Exposición De Tecnologia1
I N F O R M E D E Exposición De Tecnologia1guestc2902fa
 
I N F O R M E D E Exposición De Tecnologia
I N F O R M E  D E  Exposición De TecnologiaI N F O R M E  D E  Exposición De Tecnologia
I N F O R M E D E Exposición De Tecnologiaguestc2902fa
 

Semelhante a Manual fronpage1 parte (20)

Manual de frontpage
Manual de frontpageManual de frontpage
Manual de frontpage
 
Páginas Web
Páginas WebPáginas Web
Páginas Web
 
la web, deep web
la web, deep webla web, deep web
la web, deep web
 
Web 2.0
Web 2.0Web 2.0
Web 2.0
 
Web 2.0
Web 2.0Web 2.0
Web 2.0
 
Que es-la-web (2)
Que es-la-web (2)Que es-la-web (2)
Que es-la-web (2)
 
Manual de front page
Manual de front pageManual de front page
Manual de front page
 
Que es la web
Que es la webQue es la web
Que es la web
 
246416925 practica-4-1-que-es-la-web
246416925 practica-4-1-que-es-la-web246416925 practica-4-1-que-es-la-web
246416925 practica-4-1-que-es-la-web
 
Libro de la web 2.0
Libro de la web 2.0Libro de la web 2.0
Libro de la web 2.0
 
Libro de la web 2.0
Libro de la web 2.0Libro de la web 2.0
Libro de la web 2.0
 
246416925 practica-4-1-que-es-la-web
246416925 practica-4-1-que-es-la-web246416925 practica-4-1-que-es-la-web
246416925 practica-4-1-que-es-la-web
 
Practica 4.1. que es la web
Practica 4.1. que es la webPractica 4.1. que es la web
Practica 4.1. que es la web
 
El internet
El internetEl internet
El internet
 
246416925 practica-4-1-que-es-la-web
246416925 practica-4-1-que-es-la-web246416925 practica-4-1-que-es-la-web
246416925 practica-4-1-que-es-la-web
 
Practica 4.1. que es la web
Practica 4.1. que es la webPractica 4.1. que es la web
Practica 4.1. que es la web
 
Que es-la-web (1)
Que es-la-web (1)Que es-la-web (1)
Que es-la-web (1)
 
Informe De ExposicióN De Tecnologia
Informe De ExposicióN De TecnologiaInforme De ExposicióN De Tecnologia
Informe De ExposicióN De Tecnologia
 
I N F O R M E D E Exposición De Tecnologia1
I N F O R M E  D E  Exposición De Tecnologia1I N F O R M E  D E  Exposición De Tecnologia1
I N F O R M E D E Exposición De Tecnologia1
 
I N F O R M E D E Exposición De Tecnologia
I N F O R M E  D E  Exposición De TecnologiaI N F O R M E  D E  Exposición De Tecnologia
I N F O R M E D E Exposición De Tecnologia
 

Mais de franciscorugeles1 (20)

Comenzar
ComenzarComenzar
Comenzar
 
Bases de datos
Bases de datosBases de datos
Bases de datos
 
Francisco rugeles actividad1_mapa_c
Francisco rugeles actividad1_mapa_cFrancisco rugeles actividad1_mapa_c
Francisco rugeles actividad1_mapa_c
 
Historia y partes
Historia y partesHistoria y partes
Historia y partes
 
informatica
informatica informatica
informatica
 
Historia y partes
Historia y partesHistoria y partes
Historia y partes
 
Microsoft power point
Microsoft power pointMicrosoft power point
Microsoft power point
 
Microsoft power point
Microsoft power pointMicrosoft power point
Microsoft power point
 
Renta de hosting y aspectos generales de red
Renta de hosting y aspectos generales de redRenta de hosting y aspectos generales de red
Renta de hosting y aspectos generales de red
 
Publicar el sitio web
Publicar el sitio webPublicar el sitio web
Publicar el sitio web
 
Publicar el sitio web
Publicar el sitio webPublicar el sitio web
Publicar el sitio web
 
Conceptos generales de computación y bases
Conceptos generales de computación y basesConceptos generales de computación y bases
Conceptos generales de computación y bases
 
Conceptos generales de computación y bases
Conceptos generales de computación y basesConceptos generales de computación y bases
Conceptos generales de computación y bases
 
Tabalas
TabalasTabalas
Tabalas
 
Lab.tablasfrontpage
Lab.tablasfrontpageLab.tablasfrontpage
Lab.tablasfrontpage
 
Manual fron2 parte
Manual fron2 parteManual fron2 parte
Manual fron2 parte
 
Manual fron2 parte
Manual fron2 parteManual fron2 parte
Manual fron2 parte
 
Taller final de power point
Taller final de power pointTaller final de power point
Taller final de power point
 
Taller power point9 -primero
Taller power point9 -primeroTaller power point9 -primero
Taller power point9 -primero
 
Practica operadores logicos
Practica operadores logicosPractica operadores logicos
Practica operadores logicos
 

Manual fronpage1 parte

  • 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...