INTRODUCCIN

Microsoft Office FrontPage, es uno de los lenguajes de creacin de Pginas Web ms verstil y til al momento de un diseo mejorado, pues este programa presenta nuevas herramientas de diseo y creacin, plantillas y temas mejorados, todo ello con el fin de ayudarte a obtener una visin de su sitio Web sin tener conocimientos del lenguaje HTML. FrontPage centraliza todas las caractersticas de diseo Web y proporciona una vista panormica de todo el sitio Web, con lo que el diseo del sitio y de las pginas es ms sencillo que nunca. Su mayor rea de diseo tambin reduce los desplazamientos. La finalidad de toda Pgina Web es el resultado final y su publicacin en la Red. La nueva vista Sitio Web remoto de Microsoft Office FrontPage le ayuda a publicar sitios Web completos y archivos y carpetas individuales en cualquier ubicacin: un servidor Web extendido, un servidor Web que admita el protocolo de transferencia de archivos (FTP) o la creacin y control de versiones distribuidas en Web (WebDAV), o una ubicacin del sistema de archivos. La vista Sitio Web remoto muestra los archivos en el sitio Web local y en el sitio Web remoto. Los iconos y el texto descriptivo indican el estado de los archivos y las carpetas, y la funcin de sincronizacin ayuda a garantizar que no se sobrescriben archivos o carpetas por accidente. Slo trata de seguir tus habilidades y curiosidades y podrs crear sitios web simples hasta Pginas Web de calidad profesional, sta gua te llevar a conocer el entorno y la base de una Pgina Web en base a cdigos HTML.

El Autor

-2-

FUNDAMENTOS BSICOS

Vamos a empezar aclarando conceptos para evitar confusiones. Llamaremos Sitio Web a una publicacin en Internet por una empresa o institucin en particular. Por ejemplo, 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 o tambin puede ser .es, .net, entre otros; es el dominio. Un dominio es como una marca registrada en Internet. Es decir, que si yo registro el dominio www.cetprojmc.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.cetprojmc.com/presentacin.htm www.cetprojmc.com/proyectos.htm www.cetprojmc.com/galera.htm La primera ser la pgina web presentacin.htm, que est alojada en el dominio www.cetprojmc.com la segunda ser la pgina web proyectos.htm y la tercera pgina web es galera.html que tambin estn alojadas 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.cetprojmc.com/proyectos.htm no habr ninguna duda, ya que en Internet slo hay un dominio llamado cetprojmc.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. El ms conocido es el Internet Explorer, pero hay otros como el Netscape, Mozilla FireFox, etc. -3-

 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.com.pe 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 debe 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, digite 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. Algo muy importante al momento de crear la carpeta que almacena la pgina web; es no usar acentos, la letra , ni usar espacios; si tenemos una materia que se llama Mtodo Enlaces de Investigacin, la carpeta creada se deber llamarse metodo_enlaces_de_investigacion. Sin usar acentos ni espacios en blanco. 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 clic en Nuevo:

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

-4-

3. A continuacin nos sale una ventana donde 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, para lo cual pincharemos en examinar.

4. A continuacin nos sale una ventana, donde tenemos que seleccionar la unidad y crearemos la carpeta donde guardaremos todo el nuevo sitio web. Entonces nos saldr la ventanita donde solo tendremos que introducir el nombre de nuestra carpeta y daremos en 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, sta 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.

-5-

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 difcil 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 Enter, tambin podremos cambiar el nombre luego. Si queremos crear una carpeta dentro de otra, seguiremos el mismo proceso salvo que empezaremos seleccionando 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 siguiente:

-6-

Hacemos clic 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 Enter. Tambin se puede cambiar el nombre posteriormente. Recuerda que al cambiar el nombre tienes 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 si 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. Las pginas web llevan la extensin .htm por ejemplo: rincondelalectura.htm La pgina principal del sitio web ha de llamarse index.htm. Cada vez que creemos una pgina nueva tenemos que ajustar sus propiedades (lo veremos en tema siguiente).

-7-

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 clic 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 sta pgina. Tambin aparecer como ttulo de nuestra pgina en los buscadores (google, yahoo, msn, etc.)

Descripcin de la pgina:

Tambin aparecer en buscadores, debajo del ttulo.

algunos

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 demasiadas). Y finalmente nos queda pulsar en Aceptar. Es importante hacer esto con cada una de las pginas de nuestro sitio web.

COLOR, IMGENES y MSICA DE FONDO

Ya sabemos que para poner fondo a la pgina web existen dos formas: Color Slido y Textura, adems dentro del color slido se tiene tambin dos formas colores con el nombre en ingls y los cdigos hexadecimales. Pero usando el FrontPage, es ms sencillo aplicar un fondo para mejorar la vista de nuestra pgina web.

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.

-8-

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. Veamos algunas muestras:

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

-9-

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 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. Por esto, en las pginas web se utilizan solo las fuentes ms comunes, como son: Arial o Times New Roman y Comic Sans. 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.

Barra de Herramientas de Formato

La barra de herramientas da formato a nuestro texto. Empezando por poner el formato del tipo de letra que queremos dentro de nuestra pagina. Tambin el tamao de la letra, si queremos negritas (N) Cursivas (K) o subrayado (S). El tipo de alineacin de nuestro texto (justificacin, centrado) Vietas y color de la letra. Todo eso esta en la parte superior de nuestra aplicacin.

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.

- 10 -

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 Para crear tablas en una pgina web lo primero que seleccionamos es Tabla en el men principal como lo muestra la pantalla. Nos iremos a insertar. Despus de seleccionarlo nos aparecer el siguiente men.

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

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. Propiedades de la Tabla: Una vez creada la tabla podemos Insertar nuevas filas o nuevas columnas segn sea el caso si es que nos faltaron. Vamos a darle clic con el botn derecho del Mouse para que abra este nuevo men que nos indicia si queremos insertar nuevas filas, columnas o dividir celdas. Incluso podemos modificar las propiedades de la celda o de la tabla.

Insertar Word Art

En el FrontPage tambin disponemos de la herramienta WordArt que podremos usar siempre y cuando utilicemos las fuentes mencionadas anteriormente. Adems que nos ayuda a poder seleccionar letras para ttulos u otras funciones en nuestra pgina. As se ver ms atractiva y no tan montona. Para ir ah daremos clic en el men de Insertar Imagen WordArt. Aparecer una pantalla como la imagen inferior:

Seleccionamos el tipo de letra que queremos y a continuacin escribimos el titulo etc. Finalmente aparecer en la pgina web el titulo con las caractersticas predefinidas de WordArt.

- 12 -

Finalmente puedo tener una pgina que tenga imgenes insertadas dentro de una tabla con texto y adems un titulo como el que se muestra en el ejemplo.

Los ttulos que se insertar con WortArt, no se modifican o alteran por los navegadores, pues funcionan como imgenes. Otro recurso importante y necesario que se puede insertar 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 de diseo como 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.

LAS IMGENES
Uno de los elementos que ms enriquecen los sitios web son las imgenes. 1. Imagen desde archivo:

Cuando tenemos una imagen guardada podemos insertarla en una pgina web de la siguiente manera: Men Insertar, luego Imagen> desde archivo A continuacin usamos la ventana de exploracin hasta encontrar la imagen correspondiente. La seleccionamos y pinchamos en Aceptar. Es esencial que las imgenes que queramos integrar a nuestra pgina Web estn dentro de nuestro sitio Web. Hay una carpeta que se llama images, podemos utilizar esa carpeta para poder guardar nuestras imgenes ah.

NOTA IMPORTANTE:

- 13 -

2. Insertar imagen desde el catlogo de imgenes: Esta es una de las opciones ms interesantes de FrontPage. 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: Hacemos clic 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. Existen 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. - 14 -

Antes de que se me vaya (je je je), una imagen animada normalmente llamados gifs animados, son imgenes que tienen movimiento y dan una sensacin viveza y realidad a una imagen, puedes insertar muchos, en este ejemplo esta imagen es un nmero uno y se mueve muuuuucho: (aqu esta esttico)

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.

Herramienta

Accin
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. Estos son para voltear la imagen, horizontal o verticalmente. 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. Permite cambiar el fondo con respecto a una imagen, veamos algunos cambios:

- 15 -

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 ser este:

Ajustar color: poner en blanco y negro, escala de grises, etc. Dar efecto biselado: Al pulsar en esta herramienta se aplica un estilo al borde en la imagen, veamos

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. Zonas Activas: Estas herramientas sirven para definir zonas activas en una imagen, aadindole hipervnculos diferentes dentro de una misma imagen.

- 16 -

LOS HIPERVNCULOS
Hemos llegado por fin 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", o ah hay algo.

1. Tipos de hipervnculos:
Este es un hipervnculo que nos lleva a un sitio web diferente Si pinchas en l sers conducido a google Veamos el cdigo: <p> <font face="Tahoma"> <b> <a href="http://www.google.com">Este es un hipervnculo que nos lleva a un sitio web diferente</a> </b>Si pinchas en l sers conducido a google.</font></p> Este es un hipervnculo que nos lleva a una pgina de este mismo sitio web Si pinchas en l te llevar al ndice Veamos el cdigo: <p> <font face="Tahoma"> <b> <a href="../index.htm">Este es un hipervnculo que nos lleva a una pgina de este mismo sitio web</a> </b> Si pinchas en l te llevar al ndice</font></p> 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 Veamos el cdigo: <p> <font face="Tahoma"> <b> <a href="#fin">Este es un hipervnculo que nos lleva a otra parte de esta misma pgina</a> </b>Si pinchas aqu te llevar al final de este mismo documento.</font></p>

Este hipervnculo est hecho sobre una imagen, no sobre texto. Si pinchas en la imagen tambin te llevar a google Veamos el cdigo: <p> <font face="Tahoma"> <a href="http://www.google.com"><img border="0" src="../images/hiperv1.jpg"></a> Este hipervnculo est hecho sobre una imagen, no sobre texto. Si pinchas en la imagen tambin te llevar a google</font></p> - 17 -

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: - 18 -

Este hipervnculo abrir google en esta misma ventana. Cuando aparezca, pincha en para volver a esta pgina. Veamos su cdigo HMTL: <font face="Tahoma"> <a href="http://www.google.com"> Este hipervnculo abrir google en esta misma ventana </a> Cuando aparezca, pincha en <img border="0" src="../images/hiperv5.jpg"> para volver a esta pgina.</font></p>

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

Veamos su cdigo HMTL: <p> <font face="Tahoma"> <a target="_blank" href="http://www.google.com"> Este hipervnculo abrir google en una ventana nueva</a> Cuando aparezca la nueva ventana, la puedes cerrar en <img border="0" src="../images/hiperv6.jpg">, y esta pgina seguir estando aqu.</font></p>

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: nueva ventana y damos a Aceptar. Seleccionamos

4. Los Marcadores: a) 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 una pgina que arriba tiene el ndice, y cada uno de los ttulos es un hipervnculo que nos lleva al correspondiente apartado dentro de la 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 - 19 -

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 <p><font face="Tahoma"> <b><a href="#top">Volver arriba</a></b> </font></p> <p>&nbsp;</p> <p>&nbsp;</p>

b) 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

c) Enlazar a los Marcadores:

Ya solo nos queda hacer que los hipervnculos 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 lugar de este documento y nos sale la lista de marcadores que hay en la pgina actual. Entonces seleccionamos el marcador deseado y ya est. Volver arriba - 20 -

LOS COMPONENTES WEB

Vamos a ver aqu algunos de los componentes que pueden hacer nuestra pgina ms atractiva: Las Marquesinas Los Botones Interactivos Los Contadores de Visitas

1. Las Marquesinas:
Una marquesina es un texto que se desplaza. Usando cdigo HTML se puede alterar la orientacin de la marquesina a emplear. 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.

Recuerda que puedes modificarlo usando los cdigos html!

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 Vista Previa. - 21 -

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: usuarios que han visto la pgina. . Muestra el nmero de

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

- 22 -

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. Pasos para crear Galera de Fotografas: Vamos a Men Insertar. Seleccionamos Componente Web. Luego clic en Galera de Fotografas.

- 23 -

Nos saldrn varios modelos:

Yo

elegir el modelo , que nos muestra arriba las miniaturas y debajo, en la misma pgina, nos muestra la ampliacin de la imagen seleccionada.

Diapositivas,

recomiendo

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:

- 24 -

Nos saldr una ventana que nos permite cambiar el tamao de las fotografas, as como rotarlas o recortarlas:

Personalmente 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 seleccionaremos la casilla Tamao predeterminado, 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 personalizado.

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

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, etc.) 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 seleccionamos la carpeta images (recomendado).

LAS TRANSICIONES DE PGINA

En una pgina web podemos establecer efectos especiales al entrar o al salir de la pgina. 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. Prueba los efectos que ms te gusten, recuerda el gusto est a tu alcance.

- 26 -

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 tuviramos 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 hacemos los siguiente: Vamos al men Formato > Bordes compartidos. Nos saldr la siguiente ventana:

Seleccionamos Todas las pginas y despus seleccionamos 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. 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.

- 27 -

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:

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

E. Infantil

Enviar

Restablecer

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 y describir los elementos del anterior formulario: ELEMENTO DESCRIPCIN 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 botn de opcin, se utiliza para que el visitante pueda elegir una o varias opciones. Responde a Si y No. Esto es un rea de texto, se utiliza para que el visitante pueda escribir largos textos (opiniones, sugerencias, contribuciones, etc) El botn enviar enva los resultados y el botn restablecer borra todo lo escrito en el formulario.

E. Infantil

Enviar

Restablecer

- 28 -

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) Luego 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").

- 29 -

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

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:

- 30 -

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

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

- 31 -

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

- 32 -

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 nico 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. Marcos Flotantes:
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:

- 33 -

Esto es un marco flotante: El explorador no admite los marcos flotantes o no est configurado actualmente para mostrarlos.

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.

3. Comportamientos:
Los comportamientos hacen que nuestra pgina web sea ms dinmica. Son, por ejemplo, comportamientos: 1. Que una imagen cambie al pinchar en otra. 2. 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) - esto se ve en el navegador, pues en teora no pasa nada.

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:

- 34 -

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

- 35 -

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

- 36 -