Tutorial de FrontPage

Guia prctica para la elaboracin de pginas web

Introduccin
Vamos a imaginar que en nuestro colegio hemos hecho un proyecto muy interesante y queremos difundirlo. Lo tenemos hecho en formato Word, y contiene fotografas, dibujos y textos. En teora, podramos meter nuestro documento en un ordenador conectado a Internet para que estuviera al alcance de todo el mundo. Lo podramos hacer en un ordenador cualquiera del colegio o de nuestra casa (no viene a cuento, pero hay formas de hacerlo). No obstante nos encontraramos con los siguientes problemas: 1. Nuestro documento no tiene un formato apropiado para ser visto en pantalla. El programa Word est pensado para hacer documentos imprimibles. 2. El documento es muy largo, y la gente tiene que pasar pginas y pginas buscando lo que quieren. 3. Algn graciosillo nos ha hecho cambios en el documento!! Y no sabemos quin ha sido. 4. 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 pginas web. Hasta cierto punto se parecen a los documentos de Word. Incluso veremos que el FrontPage (programa usado para hacer pginas web) se parece bastante al Word. No obstante, las pginas web tienen estas caractersticas especiales: 1. Su formato est pensado especficamente 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 hipervnculos) que nos llevan de unas partes a otras del documento, incluso de unas pginas a otras. 3. No pueden ser modificados por los usuarios, salvo las pginas preparadas para ello. 4. Las pginas web se publican en servidores, que son bsicamente ordenadores con una capacidad y un ancho de banda suficiente para atender a muchos usuarios simultneamente.

Fundamentos bsicos
Vamos a empezar aclarando conceptos para evitar confusiones. Llamaremos sitio web a una publicacin en Internet por una empresa o un particular. Por ejemplo, www.jcyl.es es el sitio web de la Junta de Castilla y Len, 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 pginas web. Por ejemplo, el sitio web de un colegio puede tener una pgina inicial de presentacin, una dedicada a proyectos, una de servicios extraescolares, una de fotografas, etc. Cada pgina web es un archivo, que se transmite a travs de las lneas telefnicas desde el servidor hasta los usuarios, cuyo ordenador mostrar en pantalla el contenido del mismo. Las pginas web suelen ser archivos con la extensin .htm o .html. Tambin existen otras, como son .asp o .php, pero esto son otros tipos de cdigo que no trabajaremos con el FrontPage. En un sitio web se terminan juntando cientos de archivos: archivos .html (las pginas web propiamente dichas), archivos .jpg y .gif (imgenes), 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 dems cosas raras? Las pginas web no eran siempre punto com? Lo que termina en .com (tambin 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 pginas web dentro de ese dominio. Dentro de un dominio se alojan las pginas web. Por ejemplo vamos a fijarnos en las siguientes direcciones web: www.micolegio.com/presentacin.htm www.micolegio.com/proyectos.htm La primera ser la pgina web presentacin.htm, que est alojada en el dominio www.micolegio.com. La segunda ser la pgina web proyectos.htm, que tambin est alojada en el mismo dominio. Una direccin web (tcnicamente llamada URL), es la ruta de acceso inequvoca que nos lleva a una pgina 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 slo hay un dominio llamado micolegio.com (para eso se registran), y dentro de este dominio solo habr una pgina llamada proyectos.htm La direccin web (URL) es lo que escribirn los usuarios en la barra de direcciones de su navegador para llegar a ver nuestra pgina web. El navegador es el programa que se utiliza para ver las pginas web (navegar por la red, vamos). El ms conocido es el Internet Explorer, pero hay otros como el Netscape o el Opera. La barra de direcciones es la barra blanca que aparece en la parte superior del navegador. En esta imagen vemos que hemos puesto la direccin 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 pginas, Cmo sabe el navegador cul me ha de mostrar? En todo sitio web siempre hay una pgina principal, que es la que contiene la presentacin y el men que nos llevar a las dems pginas. Esta pgina principal se ha de llamar index.htm, default.htm o home.htm (dependiendo de casos). Esta es la pgina que se mostrar siempre que no se especifique ninguna dentro de un dominio. Por ejemplo, prueba a introducir la direccin www.stecyl.es en tu navegador (lo del http delante no es necesario). Despus prueba con www.stecyl.es/index.html y vers que es lo mismo. Esto significa que en el primer caso, al no especificar la pgina a mostrar, se te ha mostrado la pgina por defecto, que es index.html (la misma que en el segundo caso)

Crear un nuevo sitio web

Vamos 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 construccin, 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: 1. En el men Archivo, hacer click en Nuevo:

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

3. A continuacin 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 pgina. A continuacin tenemos que especificar la ubicacin del nuevo sitio web (en que parte de nuestro ordenador lo vamos a

guardar), para lo cual pincharemos en examinar. 4. A continuacin nos sale esta ventana, donde tenemos que seleccionar la carpeta donde guardaremos el nuevo sitio web.

Entonces pincharemos en , y dentro de Mis documentos, haremos una carpeta nueva pinchando en el icono . Entonces nos saldr la ventanita

donde solo tendromos que introducir el nombre de la carpeta y darle a aceptar y luego a abrir y ya est. Una vez creado el sitio web, esto es lo que vamos a ver. En el panel blanco de la izquierda se muestra la lista de carpetas. Como podemos ver, hay una carpeta _private, donde se almacenan archivos que no van a estar accesibles al pblico, y una carpeta images, donde guardaremos las imgenes para que no estn mezcladas con el resto de archivos. Tambin podemos ver que se nos ha creado nuestra primera pgina: index.htm. Esta va a ser nuestra pgina principal. Por supuesto, ahora est en blanco. Nuestra siguiente labor ser crear

nuestras propias carpetas y pginas, y despus llenarlas de contenido.

Crear carpetas y pginas

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 continuacin crear una carpeta para cada uno de los apartados. No olvidemos que tambin 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 slo nos saldrn la carpeta general (esa que pone C:/ y no s qu mas) y las carpetas _private e images:

Tenemos que pinchar en la carpeta general con el botn secundario del ratn (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. Tambin podremos cambiar el nombre posteriormente.

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

2. Crear una nueva pgina

Como vemos en la lista de carpetas, nada mas crear el sitio web nos ha aparecido nuestra primera pgina index.htm. Esta pgina no est dentro de ninguna de las carpetas existentes, sino que est simplemente dentro de la carpeta general. Al crear nuevas pginas, debemos decidir si queremos que estn dentro de la carpeta general o dentro de alguna de las subcarpetas. El proceso a seguir es el siguente: Pinchamos con el botn derecho del ratn en la carpeta dentro de la cual queremos crear la nueva pgina. Nos sale un men contextual en el que seleccionaremos Nueva > Pgina en Blanco.

Entonces nos aparece la nueva pgina dentro de la lista de carpetas:

Mientras tiene el cursor parpadeante, podemos ponerle el nombre que queramos y luego pulsar la tecla intro. Tambin podremos cambiar el nombre posteriormente. Recordemos que si cambiamos el nombre tenemos que mantener la extensin .htm

Normas para la creacin de carpetas y archivos

En principio, cualquier nombre es vlido para una carpeta o un archivo de nuestra pgina web. No es necesario, aunque s conveniente, que el nombre del archivo coincida con su ttulo. As pues, una pgina web que se titule "Rincn de la lectura" podramos crearla con el nombre de archivo: paginanueva5.htm, pero ser ms recomendable un nombre fcil de reconocer, como rincondelalectura.htm A pesar de esto, conviene respetar estas normas:

Escribir un nombre sin espacios, ni letras maysculas, ni acentos, ni la letra . Las carpetas no llevan ninguna extensin (por ejemplo: rincondelalectura ) pero las pginas web llevan la extensin .htm (por ejemplo: rincondelalectura.htm) La pgina 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 pgina nueva tenemos que ajustar sus propiedades (captulo siguiente).

Propiedades de pgina
Cada vez que creamos una pgina nueva, lo primero que conviene hacer es ajustar sus propiedades. Para ello: 1. Abrimos la pgina haciendo doble click sobre ella en la lista de carpetas que aparece a la izquierda. La pgina se nos muestra a la derecha, lo que pasa es que de momento est en blanco. 2. Una vez que la pgina 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: Ttulo: Es el que se va a mostrar en la parte superior del navegador de quienes visiten esta pgina. Tambin aparecer como ttulo de nuestra

pgina en los buscadores (google, yahoo, msn, etc.) Descripci n de la pgina: tambin aparecer en algunos buscadores , debajo del ttulo. Palabras clave: las utilizan algunos buscadores para identificar los temas principales de nuestra pgina. No hay que abusar de las palabras clave, o nos podrn penalizar (si ponemos demasiada s). Ya solo nos queda pinchar en Aceptar. Es importante hacer esto con cada una de las pginas de nuestro sitio web.

Poner color, imgenes o msica de fondo

1. Color de fondo

Podemos elegir el color de fondo de una pgina web siguiendo estos pasos: Vamos al men Formato y seleccionamos Fondo. Nos sale la siguiente ventana:

Aqu podemos elegir el color de fondo.

2. Imagen de fondo
En la misma ventana de antes podemos elegir una imagen de fondo, en vez de un color de fondo. Normalmente se utilizan imgenes pequeas, en formato gif o jpg. Tenemos que tener en cuenta que la imagen que elegimos, aunque sea pequea, no se va a aumentar hasta llenar la pantalla, sino que se va a repetir indefinidamente en forma de mosaico, como si fueran azulejos. Vamos a ver algunas muestras:

Pincha en las imgenes para ver cmo queda una pgina web con esa imagen de fondo. En internet podemos encontrar cantidad de fondos para pginas web. Por ejemplo: http://www.graphicsbydezign.com/backgrounds.htm http://www.webpersonal.net/fym/fondos_web.htm http://www.zonagratuita.com/a-disenio/fondos_web_gratis.htm Cuando encontramos en internet una imagen que nos gusta, tenemos que pinchar sobre ella con el botn derecho del ratn y seleccionar

Guardar imagen como... y guardarla dentro de nuestro sitio web, preferiblemente en la carpeta images.

3. Sonido de fondo
En una pgina web podemos poner un sonido de fondo. El formato ms utilizado es el sonido MIDI (archivos .mid) porque ocupa muy poco espacio. De lo contrario la pgina podra tardar muchsimo en cargar, sobre todo para quien no tenga banda ancha. Podemos encontrar una gran cantidad de midis con el siguiente buscador: http://www.vanbasco.com/ Aqu slo tenemos que buscar por ttulo, autor, tema o estilo y nos llevar a pginas con midis. Cuando encontramos uno que nos gusta, hay que pinchar con el botn derecho sobre el enlace y seleccionar Guardar destino como... entonces lo guardamos en alguna parte dentro de nuestro sitio web. No estara mal crear una carpeta "sonidos", igual que tenemos la carpeta images. Una vez que tenemos el sonido guardado, tenemos que ponerlo de fondo en la pgina web, siguiendo estos pasos: En el men Archivo seleccionamos Propiedades. Nos saldr esta ventana:

Donde pone sonido de fondo, pinchamos en examinar, buscamos el archivo de sonido que tenemos guardado, lo seleccionamos y damos a Aceptar.

El texto y las tablas

1. El texto

Introducir texto en Frontpage es bsicamente igual que en el Word, pero conviene tener en cuenta un par de aspectos: - No podemos (no debemos) elegir el tipo de letra que ms nos guste. Hay que tener en cuenta que los usuarios solamente podrn ver la pgina tal como la hemos diseado en el caso de que tengan instalada en su ordenador la fuente que hemos utilizado. De lo contrario, su ordenador mostrar la pgina con cualquier otra fuente y los resultados pueden ser muy malos (puede aparecer todo descolocado, al ser un tamao diferente). Por esto, en las pginas web se utilizan solo las fuentes ms comunes, como son: Arial o Times New Roman. Un consuelo: para los nios podemos utilizar la Comic Sans sin miedo. La tiene todo el mundo. - La tecla Enter realiza un salto de prrafo, equivalente a dos lneas. Si queremos un salto de lnea simple, tenemos que pulsar la tecla de maysculas + la tecla Enter.

2. Las Tablas
Las tablas se utilizan muchsimo en las pginas web, lo que pasa es que normalmente son invisibles. Se utilizan para organizar y distribuir los elementos de la pgina en el espacio: colocar un texto en varias columnas, poner un texto a la derecha de una fotografa, etc. Para comprender todo el potencial que nos ofrecen las tablas tenemos que tener en cuenta estas caractersticas: - Dentro de las celdas de la tabla se pueden introducir todo tipo de elementos: texto, imgenes, etc. - Se pueden establecer propiedades diferentes para cada una de las celdas (un fondo diferente, por ejemplo) - Se puede insertar una tabla dentro de otra. - Se pueden combinar celdas para adaptar el diseo a nuestras necesidades. - Se pueden hacer tablas "invisibles": basta con poner Tamao del borde = 0. Estas tablas "invisibles" se utilizan muchsimo. 2.1. Insertar una tabla Podemos insertar una tabla si vamos al men Tabla y dentro de l

seleccionamos insertar > tabla. Entonces nos sale la siguiente ventana, donde podemos ajustar las propiedades de la tabla que vamos a crear:

Primero elegimos el nmero de filas y de columnas. A continuacin elegimos la alineacin (normalmente elegiremos centrar, salvo algn inters especial). Posteriormente podemos especificar el ancho: si elegimos 100 en porcentaje, la tabla generada ocupar todo el ancho de pantalla, sea cual sea. Esto est bien, pero en algunos casos nos interesa un ancho fijo, para que no se nos descoloquen los elementos que hay dentro (texto, imgenes, etc). Entonces introduciremos un nmero en pxeles. Hay que tener en cuenta que los monitores antiguos tienen un ancho de 800 pxels, y los modernos de 1024, con lo cual: - Una tabla de ancho 750 pxeles ocupar casi todo el ancho de pantalla en un monitor antiguo. En uno moderno se ver exactamente igual pero con ms espacio libre a los lados. - Una tabla de ancho 1000 pxeles se ver completa en un monitor moderno pero no en uno antiguo. A continuacin elegiremos el tamao y el color de los bordes. Si elegimos tamao cero tendremos una tabla

invisible, utilizada para colocar los textos y las imgenes. A continuacin podemos elegir un color o incluso una imagen de fondo para la tabla. OJO! Tiene que ser una imagen que est dentro del sitio web (preferentemente dentro de la carpeta images) No vale enlazar a una imagen que est por ejemplo en Mis Imgenes, ya que cuando publiquemos nuestro sitio web, esa imagen se va a quedar en nuestro ordenador. 2.2. Ajustar las propiedades de una celda Las celdas son cada una de las casillas que componen una tabla. Se pueden ajustar las propiedades de cada una de las casillas individualmente. Esto nos permite poner un fondo diferente para cada una, por ejemplo. Esto se hace pinchando con el botn derecho del ratn dentro de la celda, y seleccionando propiedades de celda. En la ventana que nos sale podemos elegir el fondo, tamao etc. Conviene ajustar la alineacin horizontal y vertical, que es cmo queremos que se presente el texto dentro de esa celda. 2.3. Combinar celdas Parecer que ni siquiera con las tablas conseguimos colocar todo donde queremos, pero eso normalmente se soluciona con la opcin combinar celdas: Esto era una tabla de 3x3, con borde azul y fondo amarillo: Esta celda ms grande es el resultado de combinar dos celdas iguales a las de arriba. Para combinar celdas primero seleccionamos las que queremos combinar, arrastrando el ratn con el botn apretado por encima de ellas. A continuacin vamos al men Tabla > Combinar Celdas. Tambin se puede meter una tabla dentro de otra. Este sera el resultado si en la tabla anterior metemos otra de 3x3 en la primera celda:

Insertar un ttulo en una pgina web

Si queremos poner un ttulo bonito a nuestra pgina web tenemos un problema: No conviene usar tipos de fuente extraas. Para que la pgina web sea visible por todo el mundo debemos limitarnos a fuentes de uso general, como Times New Roman, Arial, Comic Sans o Tahoma. En el FrontPage tambin disponemos de la herramienta WordArt que podremos usar siempre y cuando utilicemos las fuentes mencionadas anteriormente. El wordart se inserta con el icono Lo que s que se puede meter sin problemas en una pgina web son imgenes, en formato .jpg o .gif. (Estos son los formatos en los que se guardan las fotografas digitales). As que la mejor solucin ser crear el rtulo con un programa del tipo Corel, Photoshop, Paint, etc. y guardar el resultado como imagen jpg dentro de la carpeta images de nuestro sitio web. A continuacin slo tendremos que insertar esa imagen en la pgina web, tal como veremos en posteriores captulos.

Los hipervnculos
Hemos llegado por fn a la esencia de las pginas web: los hipervnculos. Los hipervnculos son los enlaces que nos llevan de una parte a otra del documento, o de una pgina a otra. Se reconocen porque al pasar sobre ellos el cursor se transforma en un dedo, que nos indica que ah se puede "pinchar".

1. Tipos de hipervnculos
Este es un hipervnculo que nos lleva a un sitio web diferente. Si pinchas en l sers conducido a google. Este es un hipervnculo que nos lleva a una pgina de este mismo sitio web. Si pinchas en l te llevar al ndice. Este es un hipervnculo que nos lleva a otra parte de esta misma pgina. Si pinchas aqu te llevar al final de este mismo documento.

Este hipervnculo est hecho sobre una imagen, no sobre texto. Si pinchas en la imagen tambin te llevar a google.

2. Crear un hipervnculo
Para crear un hipervnculo lo primero que tenemos que hacer es seleccionar el texto o la imagen sobre el cual tendrn que pinchar los usuarios. Podemos seleccionar una palabra o una frase simplemente arrastrando el ratn sobre ella, manteniendo el botn apretado. Las imgenes se seleccionan simplemente pinchando sobre ellas. Una vez seleccionado el texto o la imagen, hacemos clic sobre ella con el botn derecho del ratn, y en el men que nos aparece seleccionamos hipervnculo. Entonces nos sale esta ventana:

Si queremos hacer un enlace a otro sitio web escribiremos su direccin URL en la casilla donde pone direccin. As:

Si queremos hacer un enlace a otra pgina de nuestro sitio web, tenemos que buscarla en la lista de carpetas que nos aparece en el centro.

3. Otros elementos
Antes de pinchar en aceptar podemos, si queremos, introducir la "informacin de pantalla". Se trata de un mensaje explicativo que aparecer sobre el hipervnculo cuando los usuarios pasen el ratn sobre l. Prueba a pasar el ratn sobre el siguiente enlace, sin pinchar sobre l: Google

Para introducir la informacin de pantalla tenemos que pinchar en en la ventana de "insertar hipervnculo". Luego escribimos el texto que queramos y damos a aceptar. Tambin podemos elegir el marco de destino de nuestro hipervnculo. Es decir, podemos elegir si queremos que la pgina de destino aparezca en esta misma ventana o en una ventana nueva. Vamos a ver dos ejemplos: Este hipervnculo abrir google en esta misma ventana. Cuando aparezca, pincha en para volver a esta pgina.

Este hipervnculo abrir google en una ventana nueva. Cuando aparezca la nueva ventana, la puedes cerrar en , y esta pgina seguir estando aqu.

Si no especificamos lo contrario, nuestros hipervnculos se abrirn en la misma ventana, como en el primer ejemplo. Si queremos que se abran en una ventana nueva tenemos que pinchar en .

Nos sale el siguiente men: ventana y damos a Aceptar.

. Seleccionamos nueva

4. Los marcadores
Si queremos hacer un hipervnculo que nos lleve a otra parte de un mismo documento, primero tenemos que hacer marcadores, lo cual veremos en el captulo correspondiente.

Los marcadores
1. Definicin 2. Insertar marcadores 3. Enlazar a los marcadores

1. Definicin
Seguramente hemos visto alguna vez una pgina web que arriba del todo tiene un ndice de los apartados y debajo tiene el contenido. El ejemplo ms cercano es esta misma pgina. Arriba tenemos el ndice, y cada uno de los ttulos es un hipervnculo que nos lleva al correspondiente apartado dentro de esta misma pgina. A lo largo de la pgina tambin tenemos otros hipervnculos que nos llevan de vuelta a la parte superior. Hemos visto que para hacer hipervnculos tenemos que especificar a qu pgina web queremos que nos lleve el enlace, pero en este caso el hipervnculo nos tiene que llevar a un lugar de esta misma pgina.

Para ello, antes de hacer los hipervnculos tenemos que hacer los marcadores, que son marcas ocultas que definen zonas dentro de una pgina. Los ponemos donde queremos y luego al hacer los hipervnculos solamente tendremos que decir "llvame al marcador 1, llvame al marcador 2, ..." (no con estas palabras, claro). Volver arriba

2. Insertar marcadores
Para insertar un marcador primero ponemos el cursor en el lugar deseado (normalmente al inicio de un apartado). Entonces vamos al men Insertar > marcador y nos sale una ventana como esta:

Conviene poner un nombre al marcador que nos permita identificarlo fcilmente. En este ejemplo he puesto "definicin" porque as sera el marcador correspondiente al primer apartado de esta pgina.

Cuando insertamos un marcador nos aparecer el smbolo en el lugar correspondiente. Este smbolo es para que sepamos que ah hay un marcador, pero no aparecer en la pgina web publicada. Tambin podemos poner un marcador en la parte superior de la pgina y llamarlo top o arriba. Volver arriba

3. Enlazar a los marcadores

Ya solo nos queda hacer los hipervnculos que nos lleven a esos marcadores. Para ello seguimos el procedimiento de hacer un hipervnculo normal: seleccionamos el texto o imagen correspondiente, pinchamos encima con el botn derecho y seleccionamos hipervnculo. En la ventana que nos aparece

pinchamos en y nos sale la lista de marcadores que hay en la pgina actual. Entonces seleccionamos el marcador deseado y ya est.

Volver arriba

Las imgenes
Uno de los elementos que ms enriquecen los sitios web son las imagenes.

1. Insertar imgenes desde archivo

Cuando tenemos una imagen guardada (siempre que sea dentro del sitio web, preferiblemente en la carpeta images) podemos insertarla en una pgina web de la siguiente manera: Vamos al men Insertar y seleccionamos Imagen > desde archivo A continuacin usamos la ventana de exploracin hasta encontrar la imagen correspondiente. La seleccionamos y pinchamos en Aceptar.

2. Insertar una imagen desde el catlogo de imgenes

Esta es una de las opciones ms interesantes de FrontPage 2003. Si vamos a Insertar > Imagen > Imgenes Prediseadas, nos encontraremos con una ventana como esta: Con esta opcin podemos buscar imgenes entre unos catlogos online amplsimos. En el ejemplo de esta imagen, he insertado la palabra "colegio" y he pinchado en buscar. Entonces nos salen las miniaturas y slo nos queda elegir una y hacer doble clic para que nos la inserte en la pgina web. Para utilizar las imgenes prediseadas de FrontPage se requiere conexin a internet.

Cuando en una pgina web hayamos insertado imgenes de internet nos va a ocurrir lo siguiente: al ir a guardar la pgina web (Archivo > Guardar) nos aparecer la siguiente pantalla: Esta ventana sirve para decirle al Frontpage en qu parte de nuestro propio sitio web queremos guardar la imagen que hemos incrustado en la pgina. Es conveniente pinchar en Cambiar carpeta... y

seleccionar la carpeta images.

3. Insertar una imagen desde internet

Si encontramos en internet una imagen que nos interese y cuyo uso est permitido libremente, podemos insertarla en nuestra pgina de la siguiente manera: Navegando por internet, encontramos una imagen, pinchamos sobre ella con el botn derecho y seleccionamos Copiar. Luego, en nuestra pgina web pinchamos con el botn derecho en el lugar deseado y seleccionamos Pegar. Conozco un par de sitios que permiten copiar sus imgenes con la condicin de citar la procedencia (incluyendo un enlace a su pgina). Se trata de: ARTIE: Con cientos de imgenes animadas. GRAPHICSBYDEZIGN: con diseos especialmente pensados para sitios web. Seguro que hay muchos ms, pero no he buscado mucho. Por cierto, una imagen animada (normalmente llamados gifs animados) es esto:

Pues eso, una imagen que se mueve.

4. Modificar imgenes
Si pinchamos sobre cualquiera de las imgenes que hemos insertado en nuestra pgina, nos aparecer la barra de herramientas de imagen:

Si no aparece iremos al men Ver > Barras de herramientas > Imagen. Insertar imagen desde archivo. (Una imagen que est dentro de nuestro ordenador). Insertar un texto superpuesto a una imagen. Crea una miniatura de la imagen.

Coloca la imagen en posicin absoluta (por encima de todas las dems capas) Estos iconos colocan la imagen por delante o por detrs de otras capas. Estos son para rotar la imagen 90 , a la izquierda o a la derecha.

Rotar:

-->

Estos son para voltear la imagen, horizontal o verticalmente:

Voltear horizontal:

Voltear vertical:

Ajustar contraste y brillo de la imagen. Recortar: Si queremos recortar un trozo de la imagen (por ejemplo, de una foto de cuerpo entero quedarnos slo con la cara) hay que pinchar en este botn, luego seleccionar el trozo deseado y luego volver a pinchar en el botn. Definir color transparente. Si insertamos una imagen como esta sobre un fondo de color:

Si queremos que la imagen se integre en el fondo tenemos que hacer transparente el color blanco de la imagen. Eso se hace con la

herramienta , que vuelve transparente el color que pincha. El resultado es este:

Ajustar color: poner en blanco y negro, escala de grises, etc. Dar efecto biselado:

Sin biselado:

Con biselado:

Volver a muestrear. Es necesario pulsar este botn cada vez que se cambie el tamao de una imagen, para que quede memorizada con el nuevo tamao. Estas herramientas sirven para definir zonas activas en una imagen. Esto sirve para definir zonas con hipervnculos diferentes dentro de una misma imagen. En esta imagen, cada futbolista nos llevar a su propia pgina si pinchamos sobre l. Es porque hemos definido zonas activas. Para ello elegimos la herramienta: Definir zona rectangular

Definir zona elptica o circular Definir zona poligonal (el ms utilizado para formas no definidas. Se define el contorno de la zona activa punto a punto) Cuando definimos una zona dentro de la imagen con estas herramientas nos sale al momento la ventana en la que tenemos que insertar el hipervnculo (la direccin a la que nos tiene que llevar cada zona activa)

Los bordes compartidos

En la mayora de los sitios web hay una estructura general que se mantiene en todas las pginas del sitio. Una de las ms 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 informacin legal, datos de contacto, etc. Si tuvieramos que poner todo esto en cada pgina que hacemos sera mucho trabajo. Para ello estn los bordes compartidos. Se trata de mrgenes que tendremos que rellenar slo una vez y aparecern en todas las pginas que hagamos. Para hacer los bordes compartidos abrimos la pgina principal (index.htm, default.htm o home.htm) y vamos al men Formato > Bordes compartidos. Nos saldr la siguiente ventana:

Seleccionamo s Todas las pginas y despus seleccionamo s los bordes que queremos que aparezcan. En este ejemplo hemos seleccionado el borde superior y el izquierdo. Cuando insertamos los bordes compartidos nos aparecern en nuestras pginas delimitados por unas lneas de puntos. La primera vez nos aparecer: Comentario: Este borde aparece en todas las pginas 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 hipervnculos que nos lleven a los diversos apartados de nuestro sitio web. Si en alguna de las pginas de nuestro sitio web no queremos que aparezcan los bordes compartidos, tenemos que ir a Formato > Bordes compartidos, luego pinchar en pgina 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 pgina ms atractiva: 1. Las marquesinas 2. Los botones interactivos 3. Los contadores de visitas

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 dinmicos, y en el cuadro de la derecha hacemos doble clic en Marquesina.

A continuacin nos saldr esta ventana:

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

Cuando le damos a aceptar nos aparecer la marquesina integrada en nuestra pgina 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 despus 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 servirn para hacer que el men de nuestro sitio web parezca mucho ms profesional. El resultado ser algo as:

Donde cada botn nos llevara a la pgina correspondiente. Vamos a Insertar > Componente web y luego seleccionamos Efectos dinmicos > Botn interactivo. Nos saldr la siguiente ventana:

Aqu seleccionaremos el modelo que queramos, pondremos el texto e insertaremos el hipervnculo al que nos tiene que llevar el botn. Para ello pincharemos en examinar y buscaremos la pgina correspondiente.

3. Contador de visitas a la pgina

Esto es un contador de visitas a la pgina: Muestra el nmero de usuarios que han visto la pgina. .

Vamos a Insertar > Componente web, luego pinchamos en Contador de visitas a la pgina y seleccionamos el modelo que ms nos guste.

Galeras de fotografas
Las galeras de fotografas 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 galera de fotografas Para hacer una galera de imgenes seguiremos el siguiente proceso.

Lo primero ser tener guardadas en el ordenador las fotografas 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 imgenes dentro de las carpetas de nuestro sitio web antes de empezar. Las tendremos en otro lugar (mis documentos, mis imgenes, etc.) Tambin existe la opcin de agregar imgenes directamente desde el escner o la cmara digital. Vamos a Insertar > Componente Web y seleccionamos Galera de Fotografas. Nos saldrn varios modelos: Yo recomiendo elegir el modelo

, que nos muestra arriba las miniaturas y debajo, en la misma pgina, nos muestra la ampliacin de la imagen seleccionada. Hacemos doble clic en el modelo seleccionado y nos saldr la siguiente ventana:

Ahora tenemos que pinchar en

y nos saldr una ventana de exploracin para buscar las imgenes que queremos insertar. Podemos insertarlas una a una o seleccionarlas todas juntas.

A continuacin, una vez agregadas todas las imgenes, vamos a ajustar su tamao. Para ello seleccionamos la primera de las

fotografas agregadas (con un simple clic) y pinchamos en el botn Modificar:

Nos saldr una ventana que nos permite cambiar el tamao de las fotografas, as como rotarlas o recortarlas: Yo recomiendo poner un alto de 500 pxeles como mucho, ya que si la fotografa es mayor no nos entrar en la pantalla. An as, puede que sea demasiado grande si la pgina es vista desde un monitor antiguo (resolucin 800x600) o si tenemos un margen superior (borde compartido) que ocupe mucho. Normalmente nos interesar poner el mismo tamao para todas las imgenes, as que seleccionaremo s la casilla Tamao predetermina do, para no tener que cambiar el

tamao de todas las fotos una a una. Podemos ir pinchando en el botn siguiente para ver si todas las fotos estn bien o si hay que girar alguna. Finalmente pinchamos en aceptar. Volvemos otra vez a la ventana de antes, la de Propiedades de la galera de fotografas. Ya slo nos queda poner ttulos a las fotografas, si queremos. Los ttulos que pongamos aparecern debajo de cada fotografa. Empezamos seleccionando la primera fotografa, con un simple clic. En la parte inferior seleccionamos Reemplazar y usar formato de fuente personalizad o. Elegimos el tipo de fuente, el tamao y el color y escribimos el ttulo. 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 ttulos, ...) podemos pinchar sobre la galera con el botn derecho, seleccionar

Propiedades de la galera de fotografas y hacer los cambios necesarios. Cuando vayamos a guardar los cambios en la pgina web nos saldr la ventana Guardar archivos incrustados: Aqu tenemos que decirle al programa en qu carpeta de nuestro web queremos guardar todas las fotografas que hemos incrustado en la galera que acabamos de crear. Para ello pinchamos en Cambiar carpeta y seleccionamo s la carpeta images (recomendad o).

Las transiciones de pgina

En una pgina web podemos establecer efectos especiales al entrar o al salir de la pgina. Esta pgina tena uno de esos efectos, no se si lo habrs notado al entrar. Tambin puedes verlo cuando pases al siguiente captulo. Para establecer las transiciones de pgina vamos al men Formato > Transicin de pgina y nos sale esta ventana:

En evento seleccionamos entrar en pgina y establecemos el efecto que queremos al entrar (mezclar, recuadro entrante, salida en crculo, etc.) y el tiempo que queremos que dure (unos 3 segundos). Luego seleccionamos el evento Salir de pgina y repetimos la operacin. Pinchamos en Aceptar y ya est.

Los formularios
Los formularios son tablas en las que el visitante de la pgina web puede escribir algo o seleccionar algunos valores. Los formularios se utilizan para obtener opiniones de los visitantes, para permitir que ellos mismos vayan enriqueciendo la pgina web con sus aportaciones, etc. Los formularios son muy importantes para convertir nuestro sitio web en un recurso dinmico y participativo. Un formulario puede tener un aspecto como este:
Principio del formulario

Nombre:
E. Infantil

Curso: Te ha gustado nuestro sitio web? Si Comentarios: No

Enviar

Restablecer

Final del formulario

Los datos que los usuarios introducen en un formulario pueden ser enviados por correo a la direccin que queramos o pueden ser insertados en otra pgina. Vamos a fijarnos en los elementos del anterior formulario: Esto es un cuadro de texto. Se utiliza para escribir pocas palabras (nombre, provincia, etc)
E. Infantil

Esto es un cuadro desplegable. Se utiliza para que el visitante pueda elegir entre varias opciones. Esto es un botn de opcin. Se utiliza para que el visitante pueda elegir una o varias opciones.

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

El botn enviar enva los resultados y el botn restablecer borra todo lo escrito en el formulario. Para insertar un formulario vamos a Insertar > Formulario > Formulario. Nos aparecer una lnea de puntos que delimita el formulario y los botones Enviar y Restablecer. A continuacin 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 continuacin tenemos que ajustar las propiedades de cada elemento (llamados campos). Para ello pinchamos con el botn derecho sobre cada elemento y seleccionamos Propiedades de Campo de Formulario. Segn 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). Tambin conviene poner el Ancho en caracteres. Si tienen que escribir el nombre y los apellidos, por ejemplo, tal vez convendra poner 40 o ms. Si se trata de un cuadro desplegable nos aparecer esta ventana. Tambin tenemos que poner el nombre a este campo (en este caso he puesto "curso") y agregar las opciones seleccionables con el botn Agregar. En este ejemplo he agregado una opcin correspondiente a cada curso.

En el caso del botn de opcin 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 nmero de lneas.

Ahora nos queda ajustar las propiedades de formulario. Para ello pinchamos con el botn derecho dentro del formulario (cualquier punto dentro de la lnea de puntos que lo delimita) y seleccionamos Propiedades de Formulario. Nos saldr esta ventana:

Si queremos enviar los resultados a otra pgina web pincharemos en examinar y buscaremos la pgina seleccionada. Si lo que queremos es que se enven los resultados a nuestro correo electrnico escribiremos la direccin de email en la casilla correspondien te. En la ventana anterior, antes de Aceptar, pincharemos en opciones. Nos sale una ventana con cuatro pestaas:

. Vamos a ver lo que hay que hacer en cada una de ellas:

Dentro de la pestaa resultados, pincharemos en examinar para seleccionar la pgina web a la que queremos enviar los resultados. En Formato de archivo yo recomiendo elegir HTML.

En la pestaa resultados por correo electrnico insertaremos la direccin de correo que ha de recibir los resultados. Ms abajo podemos escribir la lnea asunto. Esto ser el ttulo del mensaje enviado por correo electrnico.

En la pestaa campos guardados, simplemente hemos de seleccionar los campos que queremos que sean guardados o enviados (aparecern todos salvo que borremos alguno en esta ventana).

En la pestaa Pgina de confirmacin 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 pgina principal. Bueno, pues lo que tenemos que hacer es crear esa pgina de confirmacin. Simplemente creamos una nueva pgina en blanco, dentro de la misma carpeta, que podemos llamar confirmacion.htm. En esta pgina metemos un texto de confirmacin y agradecimiento y un enlace a la pgina principal o de vuelta al apartado en el que estbamos. A continuacin volvemos a propiedades de formulario y pinchamos de nuevo en opciones para que nos vuelva a salir esta ventana. En direccin URL de la pgina de confirmacin pinchamos en examinar para seleccionar la pgina confirmacion.htm que acabamos de crear. A veces, si hemos seleccionado que los resultados del formulario se incluyan en otra

pgina web, resulta interesante que la pgina de confirmacin sea esa misma pgina a la que hemos enviado los resultados. De esta manera, el usuario podr ver su contribucin publicada en el mismo momento en que pinche en enviar. NOTA IMPORTANTE: Los formularios creados de esta manera slo funcionarn 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 y los marcos

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

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

Lo unico que tenemos que hacer es colocar la capa donde queramos y escribir dentro de ella. Tambin podemos colocar imgenes y otros elementos en la capa. Todo es cuestin de probar. El recuadro azul no se va a ver cuando sea publicado, por supuesto. No es extrao que las capas aparezcan descolocadas al publicarse, sobre todo si cambia la resolucin de pantalla del usuario.

2. Los marcos flotantes

Esto es un marco flotante: El explorador no admite los marcos flotantes o no est configurado actualmente para mostrarlos. Un marco flotante es una ventanita que permite ver una pgina dentro de otra. Observa que incluso permite navegar de unas pginas a otras dentro de esta ventanita. Su tamao es ajustable. Iremos a Insertar > Marco flotante y nos saldr esto: Tan solo tenemos que pinchar en establecer pgina inicial y escribir la pgina que queremos que aparezca dentro del marco. Puede ser una pgina de nuestro sitio web o de otros.

Comportamientos
Los comportamientos hacen que nuestra pgina web sea ms dinmica. 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 ratn por encima de las palabras elephant y lion)

Para empezar, seleccionamos una imagen o un texto de nuestro sitio web. Vamos al men Formato > Comportamientos. A la derecha nos sale la ventana Comportamientos: Pinchamos en insertar y luego en intercambiar imagen. Nos saldr la siguiente ventana:

En el recuadro de arriba vemos la lista de imgenes que hay en la pgina web actual. Seleccionamos la imagen que queremos que cambie (puede ser la misma o otra) y despus introducimos la imagen de intercambio buscando en Examinar. Si queremos que la imagen vuelva a ser la original despus de quitar el ratn, seleccionaremos Restaurar al restaurar el mouse, de lo contrario el cambio de imagen ser permanente. Una vez que damos a aceptar nos saldr el intercambio de imagen en la lista de comportamientos:

Onmouseover significa que el cambio de imagen se producir con solo pasar el ratn por encima de la imagen. Si pinchamos sobre esa palabra veremos que hay muchas ms opciones, aunque la ms normal, aparte de onmouseover, es Onclick (cambiar la imagen al hacer clic sobre ella). Conviene que la imagen de intercambio tenga un tamao parecido a la original. Sobre todo que si una es vertical, que la otra no sea apaisada, porque se mostrara muy deformada (la segunda se adapta al tamao 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 ms usuales. Se trata de probar y experimentar...