PRESENTACIÓN DEL PROGRAMA

Las páginas web están basadas en los que se llama el hipertexto. Word,
por ejemplo, es un procesador de textos y el producto final está previsto
para imprimirlo. Se trata de un texto lineal, es decir, que se comienza
por la primera línea del primer párrafo y se acaba en la última línea del
último párrafo. En el hipertexto no hace falta seguir el documento de
forma lineal, sino que se establecen saltos (hipervínculos) de forma que
cada vez que encontramos alguno de ellos podemos ir a otro sitio de la
página. Por esta razón son documentos que se crean para ser vistos en
pantalla.

Las páginas web sirven para preparar materiales en este formato y ser
utilizados con los navegadores de Internet y también para ser
publicados en Internet.
FrontPage es del grupo de Microsoft Office y en la versión 2000 aparece
junto con Word, Access, Excel, etc. El entorno que ofrece es muy
parecido a Word y se trabaja igual en líneas generales. Ya iremos viendo
las opciones que puedan ser diferentes.

Hasta hace poco las páginas web había que hacerlas escribiendo el
código html y comprobando el resultado en un navegador. Pero con el
tiempo fueron apareciendo programas wysiwyg (what you see is what
you get), es decir, que se puede trabajar directamente sobre los
resultados finales.

En la creación de páginas web Frontpage 2000 es uno de estos

programas que nos permite trabajar directamente sobre los resultados
finales. También sigue manteniendo la posibilidad de trabajar con el
código, que es necesario cuando se trabajan con opciones más
avanzadas en la creación de páginas web como, por ejemplo, con java
script.

En las tres pestañas que aparecen en la parte inferior de la ventana de

trabajo podemos ver:

• Normal: Es el modo edición de trabajo en la que se trabaja la

página y todas las modificaciones que necesite.
• HTML: Es donde aparece todo el código de la página y que
podemos también modificarlo. Frontpage va creando el código de
forma automática.
• Vista previa: Es el resultado de la página, es decir, tal como se
vería en Internet Explorer, ya que ambos programas pertenecen a
Microsoft. Este mismo resultado lo podemos ver directamente en
el navegador con el icono .
La forma en que funcionan las páginas es a través del código, que es
ASCII. Este código es el que viaja por las líneas telefónicas y cuando
llegan al navegador de un ordenador, éste lo interpreta y muestra
los resultados

Crear una web

Para crear una web hay ir a Archivo / nuevo /web. Se nos abre la
siguiente ventana:

En esta ventana aparecen diferentes asistentes para crear o importar

webs. Para verlos cómo funcionan, cuando se tenga tiempo uno puede
dedicarse a probar. Nosotros vamos a seleccionar la última de las
opciones que se nos ofrece que es un "Web vacío".

En la ventanita de la derecha donde pone "Especifique la ubicación del

nuevo Web" hay que elegir el lugar donde queremos tener la página.
Para ello habrá que crear las carpetas que queramos para contener la
página. Lo que aparece después de la última barra (\) es el nombre que
le ponemos a nuestra página.

Cuando hayamos escrito la ubicación deseada, aceptamos y en unos

momentos Frontpage crea la estructura mínima necesaria para la web.
Esto lo podemos ver haciendo click sobre el icono, que se encuentra
debajo de insertar. Este icono abre y cierra una partición de la pantalla
en la que podemos ver la lista de carpetas y archivos que forman la
web. La estructura básica es la siguiente:

Al principio aparece la ubicación que hemos dado a la página y después dos carpetas
vacías. La llamada "images" es para guardar todas las imágenes. Y la llamada _private es
para guardar cosas que no se publicarán en Internet.

Por supuesto podemos cambiar el nombre de las carpetas, igual que

crear todas las que queramos utilizando cualquiera de las técnicas que
sirven para hacerlo en el Explorador de Windows.

La primera página.
Cuando creamos la web, directamente se nos queda en pantalla una
página nueva para empezar a trabajar. Al igual que en Word, Frontpage
va dando a las páginas nuevas que creamos el nombre de página _
nueva 1, 2, 3, etc., hasta el momento que la guardamos que es cuando
hay darle el nombre que queramos.
Al guardar la página, que lo podemos hacer al principio, Frontpage nos
va a pedir un nombre de archivo y un nombre de título de página. Al dar
a guardar se nos abre la siguiente ventana:
En esta pantalla hay que dar un nombre de archivo y en "Cambiar..." un
título de página. El nombre de archivo tiene que respetar ciertas reglas:
 • No se admiten espacios en blanco, sí guiones bajos.
• Sólo se admiten letras del alfabeto inglés, es decir no se admiten
ni eñes ni acentos.
• Es mejor no utilizar mayúsculas porque algunos servidores Unix
dan problemas.

En el título se puede utilizar cualquier cosa: espacios, eñes, acentos,

mayúsculas, etc.

La primera página de la web, es decir, desde donde se parte para

navegar por toda ella, siempre se guarda con el nombre de index o
home. Frontpage utiliza el nombre de index.

Propiedades de página
Tenemos que tener en cuenta que el diseño de páginas web, está
pensado para mostrarse en pantalla, por lo que es importante trabajar
los colores y los fondos de página.

En Frontpage para acceder a las propiedades de cualquier elemento hay

que pulsar con el botón derecho sobre el elemento y nos aparece una
ventana con la opción deseada. Así, si pulsamos sobre cualquier parte
de la página con el botón derecho podremos seleccionar propiedades de
página, que nos abrirá la siguiente ventana:

Si seleccionamos la segunda pestaña (fondo), vemos que podemos

seleccionar para el fondo de la página en primer lugar alguna imagen. Si
la imagen es pequeña, ésta se repite indefinidamente como fondo de la
página. Pero esto lo veremos más detenidamente cuando hablemos de
imágenes.
Las otras opciones que vemos son seleccionar el color de fondo, de
texto y de hipervínculos.
Para seleccionar un color pulsamos sobre el botón que aparece a la
derecha de cada opción y nos muestra la siguiente ventana:

En esta ventana podemos seleccionar uno de los colores que aparecen,

pero si aún queremos más colores podemos pulsar sobre el botón que
pone "personalizado" y se nos abre otra ventana con 16.000.000 de
colores como aparece en el siguiente dibujo:

En esta ventana se nos muestra una paleta de 16 colores y aquellos que hemos ido
guardando para utilizarlos en otras ocasiones.

Si pulsamos sobre más colores se nos abre otra ventana con 256
colores como el que se muestra en el siguiente en el dibujo siguiente.
Aquí seleccionamos un color y en la barra vertical de la derecha se
puede seleccionar el matiz de ese color. También se pueden memorizar
los colores si pensamos que vamos a utilizarlos posteriormente.
Una vez seleccionado un color, aceptamos todas las ventanas y el color
lo tenemos disponible en la página.
Hay que tener en cuenta que para fondo se utilizan colores suaves
donde destaque el texto, o colores oscuros con textos en color claro.
Son más difíciles de manejar los fondos oscuros.
Las otras opciones de propiedades de página, no vamos a trabajarlas
excepto la pestaña siguiente que son los márgenes. Quien quiera
establecer unos márgenes diferentes puede establecerlos desde ahí.

Las tablas y las celdas

Para poder colocar los diferentes elementos que componen la página, el
recurso más utilizado son las tablas, que normalmente son invisibles.

Las tablas funcionan igual que en Word. Podemos insertar una tabla
utilizando la opción tabla / insertar, el icono o las herramientas de la
barra de tablas.

Cuando insertamos una tabla, hay que tener en cuenta que como las
páginas web están diseñadas para pantalla hay que tener cuidado con
el ancho de la tabla para que no sea mayor que la pantalla. Las
pantallas actuales más utilizadas tienen una medida de 800 píxeles de
ancho, por lo que la medida tendrá que ser algo menor. Los píxeles son
una medida que se utiliza en los ordenadores y son unos cuadraditos
muy pequeños que se ven cuando se aumenta mucho una imagen.

Vamos a insertar, por ejemplo, una tabla de dos filas y dos columnas:

Con el botón derecho pulsamos dentro de la tabla, seleccionamos

propiedades de tablas y nos aparece una ventana como la siguiente:
Vemos que en la parte derecha aparece la opción de especificar ancho
en píxeles y porcentaje. Si, por ejemplo, aplicamos un 100% de
porcentaje, la tabla ocupará toda la pantalla del que lo vea, tenga la
resolución que tenga su ordenador. Pero ocurrirá que los textos que
pongamos y los gráficos se deformarán, que no mantendrán el aspecto
que queremos. En cambio si elegimos un ancho fijo en píxeles el
tamaño de la tabla será siempre el mismo y se mantendrá el aspecto
que le demos. Esta última opción es la más utilizada por esta razón.

En alineación conviene elegir el centro porque siempre se situará la

tabla en esta posición. Si alineamos a la izquierda, por ejemplo puede
ocurrir que si uno tiene una resolución de pantalla más grande, que
quede un espacio vacío muy grande en la parte derecha.
Si ponemos los bordes a 0 la tabla no se verá en la vista previa. Las
otras opciones de margen de celdas y espaciado entre celdas lo
podemos probar poniendo por ejemplo 25 y viendo lo que pasa.

También podemos elegir un color de fondo para la tabla diferente al de

la página o una imagen. Todo esto funciona igual que para las páginas.
Si pulsamos con el botón derecho sobre una celda en concreto y
seleccionamos propiedades de celda aparecerá una ventana como esta:

Aquí vemos una serie de opciones para esta celda. Vemos por ejemplo
que cada celda puede llevar una imagen o un color de fondo diferente al
resto. Podemos probar las diferentes opciones para ver cómo funcionan.
Para trabajar con tablas es conveniente tener visible la barra de
herramientas de tablas. Para ello, al igual que en Word, pulsamos con el
botón derecho sobre cualquiera de las barras de herramientas que
tengamos en la parte de arriba de la pantalla y seleccionamos "tablas",
que se nos muestra de la siguiente manera:
Desde esta barra se pueden añadir y quitar celdas, unirlas, justificar
verticalmente, etc.

Ejercicio 1: primera parte

Vamos a aplicar los conocimientos que ya tenemos. Si no hemos creado
una web la creamos, y si la tenemos vamos a utilizarla para el siguiente
ejercicio.
Se trata de crear una pequeña web de una zapatería que vende zapatos
de distinto tipo. Para ello con el icono de página nueva vamos a crear
cuatro páginas que vamos a necesitar según el siguiente esquema:
La primera la guardamos con el nombre de index y las otras como
mocasines, botas y zapatos.
En las cuatro ponemos en la parte de arriba y centrado con letras
grandes los nombres que vemos en el esquema. Buscamos también un
color de fondo de página, color de letra y de enlaces que nos parezcan
convenientes.
En la index tenemos que crear una tabla con borde 0 donde aparezcan
los diferentes tipos de zapatos y la presentación de la tienda donde se
cuenta que tiene unos productos de primera calidad. Si queremos
podemos dar un fondo diferente a la celda de presentación. La tabla
tendría una estructura como la siguiente.
La alineación vertical de la tabla es centrada por defecto pero si
queremos que el texto aparezca al comienzo de la celda tenemos que
utilizar los iconos de alineación vertical en las herramientas de tabla
que son:

Una vez llegados a este punto vamos a pasar al punto siguiente que es
cómo se crean los hipervínculos.

Los hipervínculos
Los hipervínculos es lo que nos permite establecer los saltos de una
página a otra. El proceso es muy sencillo, se selecciona con el ratón el
trozo de texto que queremos que salte y pulsamos el icono de
hipervínculo y se nos abre una ventana como la siguiente:

Pulsamos sobre la página a la que queramos ir y aceptamos. Ya está el

vínculo creado. Se pueden vincular también las imágenes de la misma
manera, se hace click sobre la imagen y se sigue el mismo proceso.

Es importante para que en la vista previa tome efecto todo lo que

hacemos, que vayamos guardando los cambios.
Los hipervínculos los podemos ir viendo en la vista previa. Si queremos
verlos en la vista normal, tenemos que mantener pulsada la tecla
control y pulsar sobre el hipervínculo.

Hay veces que la vista previa no funciona correctamente, entonces

conviene recurrir directamente al Explorer pulsando sobre el icono.

Los marcadores
Los marcadores son hipervínculos que se establecen dentro de una
misma página. Sirven para navegar dentro de una página o para saltar a
otra página, pero no al principio, sino a un punto determinado de la
página. Por ejemplo vamos a saltar a la página de presentación, pero al
final donde se explica las tres vistas que tiene FrontPage. Para ello pulsa
en el siguiente icono:

Otro ejemplo donde podemos ver el funcionamiento de los marcadores

es el siguiente:
Para crear un marcador se coloca el cursor donde queramos insertarlo y
va a insertar/marcador y se nos abre la siguiente pantalla:
Se le pone el nombre que se quiera y se acepta. Si hemos seleccionado
una palabra, ésta aparecerá subrayada y si teníamos el cursor en un
espacio en blanco aparecerá un icono como este:
Para saltar al marcador se selecciona el icono o el texto que queremos
que enlace y pulsamos sobre la tecla de hipervínculos: y se nos abre la
pantalla que ya conocemos:

Entonces, en la ventana que aparece junto a "marcador" seleccionamos

el marcador cuando el salto se produce en la misma página. Si es otra
página a la que queremos saltar, se selecciona primero la página con un
click del botón izquierdo y después el marcador que queremos de la
página y que previamente lo hemos creado.
Ahora convendría crear una página en la que utilizáramos marcadores
para practicar con ellos.

Ejercicio 1: segunda parte

Volvemos a retomar el ejercicio y vamos a vincular las páginas
estableciendo las siguientes relaciones:
Vamos a relacionar cada tipo de zapatos con su página. Dentro de cada
página tiene que haber una vuelta al index para no perder la
navegación por la página. A la vez vamos a relacionar las páginas entre
sí. Para ello vamos a escribir el texto como aparece en el esquema o
también podemos utilizar imágenes para ello.

Crear una web

Para crear una web hay ir a Archivo / nuevo /web. Se nos abre la
siguiente ventana:

En esta ventana aparecen diferentes asistentes para crear o importar

webs. Para verlos cómo funcionan, cuando se tenga tiempo uno puede
dedicarse a probar. Nosotros vamos a seleccionar la última de las
opciones que se nos ofrece que es un "Web vacío".

En la ventanita de la derecha donde pone "Especifique la ubicación del

nuevo Web" hay que elegir el lugar donde queremos tener la página.
Para ello habrá que crear las carpetas que queramos para contener la
página. Lo que aparece después de la última barra (\) es el nombre que
le ponemos a nuestra página.

Cuando hayamos escrito la ubicación deseada, aceptamos y en unos

momentos Frontpage crea la estructura mínima necesaria para la web.
Esto lo podemos ver haciendo click sobre el icono , que se encuentra
debajo de insertar. Este icono abre y cierra una partición de la pantalla
en la que podemos ver la lista de carpetas y archivos que forman la
web. La estructura básica es la siguiente:
Al principio aparece la ubicación que hemos dado a la página y
después dos carpetas vacías. La llamada "images" es para
guardar todas las imágenes. Y la llamada _private es para
guardar cosas que no se publicarán en Internet.

Por supuesto podemos cambiar el nombre de las carpetas, igual que

crear todas las que queramos utilizando cualquiera de las técnicas que
sirven para hacerlo en el Explorador de Windows.

La primera página.
Cuando creamos la web, directamente se nos queda en pantalla una
página nueva para empezar a trabajar. Al igual que en Word, FrontPage
va dando a las páginas nuevas que creamos el nombre de página _
nueva 1, 2, 3, etc., hasta el momento que la guardamos que es cuando
hay darle el nombre que queramos.

Al guardar la página, que lo podemos hacer al principio, FrontPage nos

va a pedir un nombre de archivo y un nombre de título de página. Al dar
a guardar se nos abre la siguiente ventana:
En esta pantalla hay que dar un nombre de archivo y en "Cambiar..." un
título de página. El nombre de archivo tiene que respetar ciertas reglas:

• No se admiten espacios en blanco, sí guiones bajos.

• Sólo se admiten letras del alfabeto inglés, es decir no se admiten
ni eñes ni acentos.
• Es mejor no utilizar mayúsculas porque algunos servidores Unix
dan problemas.

En el título se puede utilizar cualquier cosa: espacios, eñes, acentos,

mayúsculas, etc.

La primera página de la web, es decir, desde donde se parte para

navegar por toda ella, siempre se guarda con el nombre de index o
home. FrontPage utiliza el nombre de index.

Propiedades de página
Tenemos que tener en cuenta que el diseño de páginas web, está
pensado para mostrarse en pantalla, por lo que es importante trabajar
los colores y los fondos de página.

En FrontPage para acceder a las propiedades de cualquier elemento hay

que pulsar con el botón derecho sobre el elemento y nos aparece una
ventana con la opción deseada. Así, si pulsamos sobre cualquier parte
de la página con el botón derecho podremos seleccionar propiedades de
página, que nos abrirá la siguiente ventana:
Si seleccionamos la segunda pestaña (fondo), vemos que podemos
seleccionar para el fondo de la página en primer lugar alguna imagen. Si
la imagen es pequeña, ésta se repite indefinidamente como fondo de la
página. Pero esto lo veremos más detenidamente cuando hablemos de
imágenes.
Las otras opciones que vemos son seleccionar el color de fondo, de
texto y de hipervínculos.
Para seleccionar un color pulsamos sobre el botón que aparece a la
derecha de cada opción y nos muestra la siguiente ventana:
 En esta ventana se nos muestra una paleta de 16 colores y aquellos
que hemos ido guardando para utilizarlos en otras ocasiones.

Si pulsamos sobre más colores se nos abre otra

ventana con 256 colores como el que se muestra en
el siguiente en el dibujo siguiente.

En esta ventana podemos seleccionar uno de los colores que aparecen,

pero si aún queremos más colores podemos pulsar sobre el botón que
pone "personalizado" y se nos abre otra ventana con 16.000.000 de
colores como aparece en el siguiente dibujo:
Aquí seleccionamos un color y en la barra vertical de la derecha se
puede seleccionar el matiz de ese color. También se pueden memorizar
los colores si pensamos que vamos a utilizarlos posteriormente.

Una vez seleccionado un color, aceptamos todas las ventanas y el color

lo tenemos disponible en la página.

Hay que tener en cuenta que para fondo se utilizan colores suaves
donde destaque el texto, o colores oscuros con textos en color claro.
Son más difíciles de manejar los fondos oscuros.

Las otras opciones de propiedades de página, no vamos a trabajarlas

excepto la pestaña siguiente que son los márgenes. Quien quiera
establecer unos márgenes diferentes puede establecerlos desde ahí.

Las tablas y las celdas

Para poder colocar los diferentes elementos que componen la página, el
recurso más utilizado son las tablas, que normalmente son invisibles.

Las tablas funcionan igual que en Word. Podemos insertar una tabla
utilizando la opción tabla / insertar, el icono o las herramientas de la
barra de tablas.

Cuando insertamos una tabla, hay que tener en cuenta que como las
páginas web están diseñadas para pantalla hay que tener cuidado con
el ancho de la tabla para que no sea mayor que la pantalla. Las
pantallas actuales más utilizadas tienen una medida de 800 píxeles de
ancho, por lo que la medida tendrá que ser algo menor. Los píxeles son
una medida que se utiliza en los ordenadores y son unos cuadraditos
muy pequeños que se ven cuando se aumenta mucho una imagen.

Vamos a insertar, por ejemplo, una tabla de dos filas y dos columnas:
Con el botón derecho pulsamos dentro de la tabla, seleccionamos
propiedades de tablas y nos aparece una ventana como la siguiente:

Vemos que en la parte derecha aparece la opción de especificar ancho

en píxeles y porcentaje. Si, por ejemplo, aplicamos un 100% de
porcentaje, la tabla ocupará toda la pantalla del que lo vea, tenga la
resolución que tenga su ordenador. Pero ocurrirá que los textos que
pongamos y los gráficos se deformarán, que no mantendrán el aspecto
que queremos. En cambio si elegimos un ancho fijo en píxeles el
tamaño de la tabla será siempre el mismo y se mantendrá el aspecto
que le demos. Esta última opción es la más utilizada por esta razón.

En alineación conviene elegir el centro porque siempre se situará la

tabla en esta posición.

Si alineamos a la izquierda, por ejemplo puede ocurrir que si uno tiene

una resolución de pantalla más grande, que quede un espacio vacío
muy grande en la parte derecha.

Si ponemos los bordes a 0 la tabla no se verá en la vista previa. Las

otras opciones de margen de celdas y espaciado entre celdas lo
podemos probar poniendo por ejemplo 25 y viendo lo que pasa.

También podemos elegir un color de fondo para la tabla diferente al de

la página o una imagen. Todo esto funciona igual que para las páginas.

Si pulsamos con el botón derecho sobre una celda en concreto y

seleccionamos propiedades de celda aparecerá una ventana como esta:
Aquí vemos una serie de opciones para esta celda. Vemos por ejemplo
que cada celda puede llevar una imagen o un color de fondo diferente al
resto. Podemos probar las diferentes opciones para ver cómo funcionan.

Para trabajar con tablas es conveniente tener visible la barra de

herramientas de tablas. Para ello, al igual que en Word, pulsamos con el
botón derecho sobre cualquiera de las barras de herramientas que
tengamos en la parte de arriba de la pantalla y seleccionamos "tablas",
que se nos muestra de la siguiente manera:

Desde esta barra se pueden añadir y quitar celdas, unirlas, justificar

verticalmente, etc.

Ejercicio 1: primera parte

Vamos a aplicar los conocimientos que ya tenemos. Si no hemos creado
una web la creamos, y si la tenemos vamos a utilizarla para el siguiente
ejercicio.

Se trata de crear una pequeña web de una zapatería que vende zapatos
de distinto tipo. Para ello con el icono de página nueva vamos a crear
cuatro páginas que vamos a necesitar según el siguiente esquema:
La primera la guardamos con el nombre de index y las otras como
mocasines, botas y zapatos.

En las cuatro ponemos en la parte de arriba y centrado con letras

grandes los nombres que vemos en el esquema.

Buscamos también un color de fondo de página, color de letra y de

enlaces que nos parezcan convenientes.

En la index tenemos que crear una tabla con borde 0 donde aparezcan
los diferentes tipos de zapatos y la presentación de la tienda donde se
cuenta que tiene unos productos de primera calidad. Si queremos
podemos dar un fondo diferente a la celda de presentación.

La tabla tendría una estructura como la siguiente.

La alineación vertical de la tabla es centrada por defecto pero si
queremos que el texto aparezca al comienzo de la celda tenemos que
utilizar los iconos de alineación vertical en las herramientas de tabla
que son:

Una vez llegados a este punto vamos a pasar al punto siguiente que es
cómo se crean los hipervínculos

Los hipervínculos
Los hipervínculos es lo que nos permite establecer los saltos de una
página a otra. El proceso es muy sencillo, se selecciona con el ratón el
trozo de texto que queremos que
salte y pulsamos el icono de hipervínculo y se nos abre una ventana
como la siguiente:

Pulsamos sobre la página a la que queramos ir y aceptamos. Ya está el

vínculo creado. Se pueden vincular también las imágenes de la misma
manera, se hace click sobre la imagen y se sigue el mismo proceso.

Es importante para que en la vista previa tome efecto todo lo que

hacemos, que vayamos guardando los cambios.
Los hipervínculos los podemos ir viendo en la vista previa. Si queremos
verlos en la vista normal, tenemos que mantener pulsada la tecla
control y pulsar sobre el hipervínculo.

Hay veces que la vista previa no funciona correctamente, entonces

conviene recurrir directamente al Explorer pulsando sobre el icono .

Los marcadores
Los marcadores son hipervínculos que se establecen dentro de una
misma página. Sirven para navegar dentro de una página o para saltar a
otra página, pero no al principio, sino a un punto determinado de la
página. Por ejemplo vamos a saltar a la página de presentación, pero al
final donde se explica las tres vistas que tiene FrontPage. Para ello pulsa
en el siguiente icono:

Otro ejemplo donde podemos ver el funcionamiento de los marcadores

es el siguiente:

Para crear un marcador se coloca el cursor donde queramos insertarlo y

va a insertar/marcador y se nos abre la siguiente pantalla:
Se le pone el nombre que se quiera y se acepta. Si hemos seleccionado
una palabra, ésta aparecerá subrayada y si teníamos el cursor en un
espacio en blanco aparecerá un icono como este:

Para saltar al marcador se selecciona el icono o el texto que queremos

que enlace y pulsamos sobre la tecla de hipervínculos: y se nos abre
la pantalla que ya conocemos:

Entonces, en la ventana que aparece junto a "marcador" seleccionamos

el marcador cuando el salto se produce en la misma página. Si es otra
página a la que queremos saltar, se selecciona primero la página con un
click del botón izquierdo y después el marcador que queremos de la
página y que previamente lo hemos creado.

Ahora convendría crear una página en la que utilizáramos marcadores

para practicar con ellos.

Ejercicio 1: segunda parte

Volvemos a retomar el ejercicio y vamos a vincular las páginas
estableciendo las siguientes relaciones:
Vamos a relacionar cada tipo de zapatos con su página. Dentro de cada
página tiene que haber una vuelta al index para no perder la
navegación por la página. A la vez vamos a relacionar las páginas entre
sí. Para ello vamos a escribir el texto como aparece en el esquema o
también podemos utilizar imágenes para ello.

Imágenes
Las imágenes en las páginas web funcionan de dos maneras. Como
imágenes normales que insertamos dentro de la página y como
imágenes que se utilizan como fondo de página o de tabla.

En este apartado vamos a ver las imágenes normales y en el siguiente

apartado las imágenes de fondo.

Las imágenes funcionan más o menos como en Word. En las páginas

web sólo se utilizan los formatos siguientes:

• GIF. Para dibujos e imágenes con pocos colores.

• JPEG. Para fotos e imágenes que requieren más calidad.

Cualquier imagen que introduzcamos, FrontPage lo transformará en uno

de estos dos formatos. Cualquier imagen que veamos en Internet
podemos copiarla pulsando sobre la misma con el botón derecho y
seleccionando copiar y pegándola donde queramos.

Si vemos imágenes interesantes se pueden guardar en una carpeta,

para cuando las podamos necesitar. Estas imágenes se pueden
recuperar mediante insertar / imagen / desde archivo o mediante el
icono Esta opción nos abre una pantalla como la siguiente:

En esta pantalla se nos abren las carpetas que tenemos en nuestra web.
Si pulsamos sobre "images" se nos mostrarían todas las imágenes de la
misma. Pero si lo hemos guardado en otra carpeta debemos pulsar
sobre el icono que tiene una lupa sobre una carpeta. Esto nos abre
todas las carpetas que tenemos en nuestro ordenador . Con este
icono buscamos la carpeta y la imagen igual que lo hacemos con el
explorador de Windows.

Hay imágenes que son estáticas, pero las imágenes GIF pueden ser
animadas como en el ejemplo siguiente:

Estas imágenes funcionan exactamente igual que las otras, pero en

modo normal no veremos la animación. Para ello tendremos que verlas
en vista previa o en el navegador de Internet. En Internet hay muchos
sitios que nos ofrecen GIFs animados. Para encontrarlas sólo tenemos
que ir a un buscador y poner las palabras claves para que nos
encuentre muchos sitios con este tipo de imágenes. Esto vale también
para imágenes de fondo y cualquier otro tipo de imágenes.

FrontPage también tiene sus propias imágenes que para utilizarlas

tenemos que ir a insertar / imagen / imágenes. Esto nos abre una
colección de imágenes preinstaladas dentro del programa.
Seleccionamos una carpeta y la imagen que queramos utilizar y se nos
abre un pequeño menú en la que la primera opción es "insertar clip".
Pulsamos sobre esa opción y la imagen se nos insertará en donde
teníamos colocado el cursor.

Una vez que hemos insertado una imagen pulsamos con el botón
derecho sobre la misma y seleccionamos propiedades de imagen y se
nos abre la siguiente ventana:

Es esta ventana vemos las diferentes opciones que podemos utilizar con
la imagen. Si utilizamos el icono con una interrogación que aparece
arriba a la derecha y vamos pulsando sobre las diferentes opciones, nos
irá explicando para qué sirven.

Donde pone texto quiere decir que lo que escribamos ahí aparecerá
sobre un fondo amarillo cuando apoyemos el cursor sobre la imagen.
Esto sólo se verá en vista previa o en el navegador. Esto es muy útil
para favorecer la navegación o facilitar información al visitante. El
siguiente dibujo presenta un ejemplo de esta utilidad. Apoya el cursor
sobre la imagen y verás que aparece un texto.

Cuando seleccionamos la imagen con un click del botón izquierdo

vemos que en la parte inferior de la ventana activa aparece la barra de
herramientas de imagen. En general las opciones que tiene son las
mismas que en Word, pero hay un par de opciones que son diferentes.
El icono nos permite establecer un color transparente de la imagen.
Esto es una propiedad de las imágenes GIF. Seleccionamos el icono y
pulsamos con el puntero el color que queremos hacer transparente y
este desaparece. Utilizando la última imagen del hipopótamo, si le
hacemos transparente el blanco quedaría de la siguiente manera.

Esto es útil muchas veces para integrar más las imágenes en el

documento.
La otra opción que es característica de FrontPage es el grupo de iconos

que no nos crean figuras geométricas dentro de la imagen,

sino que lo que hacen es lo que se llama mapear la imagen. Esto quiere
decir que, por ejemplo, si tenemos una imagen de España dividida en
provincias, si utilizamos estos iconos podemos hacer que cada parte de
la imagen, por ejemplo las provincias, puedan vincularse a páginas
diferentes. El área de hipervínculo lo establece de forma rectangular,
circular o irregular. En cuanto mapeamos una parte de una imagen
vemos que directamente se nos abre la ventana de hipervínculos para
establecer el salto a la página que queramos.

Aparte de utilizar imágenes creadas por otros, para crear nuestras

propias imágenes se suelen utilizar los procesadores de imágenes como
Photoshop, Paint Shop Pro o cualquiera de los muchos que hay en el
mercado.

Pero, si controlamos un poco el Office podemos utilizarlo también para

crear imágenes. Así si utilizamos el WordArt para crear un titular en
Word, sólo tenemos que copiarlo y pegarlo en Frontpage para usar la
imagen. Lo mismo ocurre con Power Point o Publisher.

Imágenes de fondo
Las imágenes también se pueden utilizar para crear un fondo a la
página. Si seleccionamos Propiedades de página con el botón derecho
sobre la página / fondo / imagen de fondo / examinar, vemos que se nos
abre la siguiente ventana:
Como hemos visto antes, la primera ventana que se nos abre es en la
que aparece nuestra web. Aquí podemos seleccionar una imagen, pero
si pulsamos sobre "imágenes" accederemos a las imágenes
prediseñadas que tiene FrontPage. Si la imagen la tenemos guardada en
otra carpeta tendremos que pulsar sobre

Esto nos crea una imagen de fondo repetida indefinidamente. Por eso
las imágenes de fondo siempre hay que seleccionarlas bien para que no
maten el texto o el resto del documento que queremos transmitir.

Lo mismo que decimos de imagen de fondo de una página, sirve para

imagen de fondo de una tabla utilizando para ellos las propiedades de
tabla.

Así si utilizamos como imagen de fondo de una tabla el último icono que
hemos usado nos quedaría de la siguiente manera.

Vemos que no es una imagen muy apropiada para un fondo. Pero si

utilizamos una imagen de fondo de las que ya trae preparadas
FrontPage nos quedaría así.

Estas son imágenes pequeñas que se repiten indefinidamente.

Hay otras imágenes que son estrechas y alargadas, más que toda la
pantalla y crean efectos de una banda lateral porque se repiten
verticalmente.
Estos fondos se suelen llamar laterales y se pueden encontrar en
Internet igual que las demás imágenes. Se suelen utilizar bastante y la
parte izquierda se utiliza a modo de menú.

El texto y las imágenes se colocan utilizando una tabla con borde 0 y

justificada a la izquierda.

Crear la estructura de la web

Lo primero que hay que hacer para tener clara la estructura de la web
es coger papel y lápiz y hacernos un dibujo o gráfico donde veamos
claro las páginas que necesitamos.

Una vez que tengamos claras las páginas necesarias, se pueden crear
páginas nuevas y guardarlas con el nombre de archivo y título que
queramos. Esto es lo que hemos visto hasta aquí. Ahora vamos a ver
otra forma de crear la estructura de la web y que nos permitirá la
utilización de navegación automática.

Nos vamos a ver / barra de vistas / exploración:

Este icono nos abre una pantalla azul en la que se ve que existe sólo
una página, que es la index y que tiene como título "Página principal".

Si la web es nueva, podemos ir creando las páginas nuevas que

queramos pulsando con el botón derecho sobre la página y
seleccionando página nueva. Esto nos crea una página en un nivel
inferior a la que hemos seleccionado para crear una página nueva. En el
ejemplo que hemos trabajado de la zapatería nos quedaría de la
siguiente manera:

Lo único que al principio nos aparecerá como página _ nueva 1, 2 y 3.

Para ponerlas un nombre que queramos utilizar, pulsamos con el botón
derecho sobre la página y seleccionamos cambiar nombre.

Una vez creadas las páginas de esta manera se guardan

automáticamente con el nombre que les hayamos puesto.
Si la web está creada, sólo tenemos que arrastrar las páginas desde la
lista de carpetas pulsando sobre el nombre de archivo con el botón
izquierdo y sin dejar de pulsar, arrastrarlo a la pantalla azul y ponerlo en
el nivel que queramos.
Así tenemos la estructura de la web creada.

Navegación automática
Una vez que hemos creado las páginas con el icono "exploración" de la
barra vistas, o que hayamos colocado las páginas creadas con
anterioridad formando un árbol donde unas páginas dependen de otras,
podemos crear una navegación automática. Esto es interesante cuando
queremos evitarnos problemas en webs que sean complejas de forma
que el visitante nunca se quede colgado en la web.

Hay muchas webs que utilizan esta navegación automática, pero hay
que decir que si no se utiliza con cuidado el aspecto que puede dar es
poco profesional aunque en principio parezca lo contrario.

Una vez creado el árbol de la web abrimos cualquier página haciendo

doble click sobre la misma. Pulsamos con el botón derecho sobre la
página y seleccionamos bordes compartidos. Se nos abre la siguiente
pantalla:

Seleccionamos las opciones que vemos seleccionadas en este ejemplo y

aceptamos. Vemos que en la página aparecen el título de página y los
nombres de las diferentes páginas. En el ejemplo que estamos
trabajando de la zapatería aparecería de la siguiente manera.
La página donde estamos aparece en negro y las otras en azul. Vemos
también que aparte de las páginas del mismo nivel aparece [Principal],
que es la vuelta al index o página de inicio.

Los niveles de navegación se pueden variar pulsando sobre la barra de

navegación con el botón derecho y seleccionando propiedades de la
barra de navegación.

Entonces se nos muestra la siguiente ventana:

Aquí se puede elegir los diferentes niveles de navegación, la página

principal, si los botones están en horizontal o en vertical, etc.

Los temas
Los temas son un conjunto de opciones que nos ofrece FrontPage para
dar un formato a nuestras páginas. Este formato supone una serie de
colores de los botones de navegación automática, fondo, texto, etc.
Para aplicar un tema se pulsa con el botón derecho sobre la página y se
selecciona tema. Nos aparece una ventana como la siguiente:

Al principio aparece la pantalla en blanco y dice que "esta página no

utiliza tema", pero en cuanto seleccionamos algún tema como en el
ejemplo de arriba aparece en qué consiste. Si aplicamos, por ejemplo,
este tema en el ejercicio que estamos trabajando, quedaría de la
siguiente forma:

Se puede aplicar un tema diferente a cada página, pero hay que tener
cuidado con esto porque el efecto puede ser un poco chabacano por lo
que es mejor utilizar un tema para toda la web o diferentes temas, pero
con mucho cuidado.

Páginas de marcos
Se llaman páginas de marcos a las que nos muestran varias páginas a la
vez. Lo que realmente se guarda, aparte de las páginas, es una vista de
la pantalla con diferentes divisiones en las que en cada una se ve una
página diferente. Podemos ver un ejemplo en el ejercicio 2, donde se
nos muestra una división vertical. En la parte de la izquierda se nos
muestra un menú, que al pulsar sobre cada apartado nos va cambiando
la pantalla de la derecha.
Este mismo efecto se suele hacer con un fondo lateral, pero sabemos
que es una página de marcos porque el texto de cada parte de la
pantalla se mueve de forma independiente al arrastrar verticalmente la
barra de desplazamiento.

Para crear una página de marcos hay que ir Archivo / nuevo / página y
se selecciona la pestaña de páginas de marcos. Entonces se nos
muestra la siguiente ventana:

Si pulsamos sobre cada tipo de página vemos las diferentes divisiones

que podemos crear.

Nosotros vamos a seguir el ejemplo más sencillo, que es el primero, que

se llama contenido.
Al aceptar nos aparece la pantalla dividida de la siguiente forma:
Aquí se nos ofrece la posibilidad de seleccionar una página para que se
vea en esa parte de la pantalla, y si no la tenemos creada, de crear una
nueva.

También observamos que las tres vistas que teníamos hasta ahora se
han multiplicado para tener más opciones para poder trabajar con
varias páginas a la vez.

A la hora de guardar nos va a pedir, si no lo hemos hecho aún, guardar

cada una de las dos páginas que componen esta vista y el nombre que
queremos dar a toda la vista para que se vean las dos ventanas.

Frontpage nos va marcando en azul lo que va a guardar. En el caso de

la vista completa aparece de la siguiente manera:
Las páginas las podemos ver y trabajar de forma individual en pantalla
completa, pero siempre que accedamos a esta vista, veremos las dos
páginas a la vez.

Así, por ejemplo si elegimos la página de botas para el marco derecho y

otra con el menú de todos los calzados a la izquierda nos podría quedar
así:
Si ya tenemos creadas las tres páginas tenemos que enlazarlas para
que al pulsar sobre la palabra se nos abra sobre la ventana de la
derecha. Para ello seleccionamos la palabra y damos al icono de
hipervínculo. En la pantalla que se nos abre seleccionamos con un click
con el botón izquierdo la página a la que se va vincular y después
seleccionamos marco de destino y se nos abre la siguiente ventana:
Seleccionamos la ventana de la derecha y aceptamos todo. Se procede
así con todos los hipervínculos que queramos ver en una ventana
determinada.
Cuando hagamos una vuelta al index desde una página de marcos,
tenemos que seleccionar "toda la página" para que se nos abra toda la
página, si no veríamos el index en la ventana de la derecha

Ejercicio 1: tercera parte

Ahora habría que aplicar las diferentes cosas que hemos visto. Vamos a
aplicar diferentes temas a las páginas y vamos a crear una página de
marcos a la que se acceda desde la index y se pueda volver al principio.
La estructura sería la siguiente:

De la index se va a una página de marcos. Dentro de esta pagina se

muestra el contenido de cada una en la ventana de la derecha. Y hay un
texto o icono que nos devuelve a la index como pantalla completa.

Mail-to
Se llama así porque crea un código html que pone mailto.
El mail-to se trata de un texto o icono que al pulsar sobre él se abre el
programa de correo que tiene el ordenador con un correo nuevo
dispuesto para escribir y la dirección puesta. Un ejemplo de esto es lo
que aparece en la página principal de esta web, al final, donde dice que
para cualquier consulta puede pulsar sobre el icono.
Otros ejemplos serían los siguientes, que al pulsar sobre cualquiera de
ellos se abre el programa de correo.
CORREO
El mail-to se puede hacer con un texto o con un icono. Para ello se
selecciona el elemento que nos va a abrir el correo y se pulsa el icono
de hipervínculo y se nos abre la siguiente pantalla:

Entonces se pulsa en el sobre que aparece a la derecha de dirección

URL y se nos abre la ventana siguiente:

Se escribe la dirección de correos a la que se quiere que llegue el correo

y se aceptan las dos pantallas

Los formularios
Los formularios se utilizan en las webs para recoger información del
visitante. Éste puede escribir libremente en los campos que se le
presentan o seleccionar una opción de las que se le ofrecen.

Para crear un formulario, en cualquier parte de la página o dentro de

una tabla, se va a Insertar / formulario / cuadro de texto de una línea o
cualquier tipo de campo que se quiera utilizar. Entonces en modo
normal, nos aparece un rectángulo con una línea entrecortada como la
siguiente:

El rectángulo primero en blanco es un campo de texto de una línea y

luego hay dos botones, uno de enviar y otro de restablecer, es decir,
borrar todo lo que se tiene escrito en el formulario.

El formulario hay que crearlo dentro del rectángulo con línea

entrecortada. Para ello, al igual que en Word se van creando los
espacios necesarios y poniendo los títulos que queramos a los campos.
Un ejemplo de formulario creado sobre una tabla de una celda, para
poder darle un fondo diferente y destacarlo, podría ser el siguiente.

[Componente Guardar resultados de FrontPage]

Nombre Apellidos

Dirección Ciudad C.P.

Bebida que toma

Tu opinión sobre esta web

Enviar Restablecer

El primer paso sería pensar los campos que queremos crear y colocarlos
en el formulario con un nombre. Pero estos nombres son los que vería el
visitante de nuestra página. Una vez creado el formulario tenemos que
ir dándoles los nombres que queramos que aparezcan cuando
recojamos los resultados.
Para ello hay que ir por todos los los campos pulsando con el botón
derecho y seleccionando propiedades de campo de formulario.

Entonces se nos muestra la siguiente ventana:

Esto es lo que nos ha aparecido en el primer campo de "Nombre",

entonces en la primera línea deberíamos poner Nombre porque si no
nos aparecerá como T1. Para poner los nombres de campo hay que
respetar las normas de html, es decir, no se admiten acentos, ni eñes,
ni espacios en blanco. Así, por ejemplo habría que escribir
Bebida_preferida, tu _ opinión, etc.

Una vez puestos los nombres que queramos ver en los resultados,
tenemos que pulsar con el botón derecho sobre formulario y seleccionar
propiedades de formulario. Nos aparece la siguiente ventana:

Si nosotros dejáramos el formulario con estas opciones, sólo sería válido

si nuestra web está puesta en un servidor que tiene extensiones de
Frontpage. Podríamos poner una dirección de correo electrónico y elegir
un archivo para que nos recoja los resultados. Lo que ocurre es que
contratar las extensiones de Frontpage suele costar dinero y los
servidores gratuitos no las tienen.

Para poder utilizar un servidor gratuito o sin extensiones de Frontpage

tenemos que pulsar en "enviar a otra" y después en el botón
"Opciones". Entonces se nos abre la siguiente pantalla que la tenemos
que rellenar como la muestro:

• Acción: Hay que poner mailto, dos puntos y la dirección de correo

electrónico donde se van a recibir los resultados. Todo esto sin
espacios en blanco, acentos, ni eñes.
• Método: Se selecciona POST
• Tipo de codificación: text/plain. Le estamos diciendo que nos lo
mande en texto sencillo, es decir, sin ningún tipo de formato.

Una vez hecho esto aceptamos todas las ventanas y el formulario está
listo para funcionar.
Ahora convendría realizar un formulario en la web de la zapatería en la
que utilicemos diferentes tipos de campos para ver cómo se crean. Una
vez que realicemos todos los pasos, hay que comprobarlo a ver cómo
funciona. Si no tenemos un correo electrónico todavía nos abrimos uno
en www.hotmail.com

Las hojas de estilo

Las páginas de estilo sirven para aplicar un mismo formato a todas las
páginas que se desee. Pueden proporcionar, por ejemplo, tipos de letra,
fondos de página, formato de viñetas, diferentes estilos a los tipos de
encabezado, etc.

Frontpage tiene diferentes hojas de estilo. Para poder utilizarlas hay que
ir a archivo / nuevo / hojas de estilo y se nos muestra la siguiente
pantalla:
En esta ventana podemos encontrar una breve descripción de lo que
hace cada página. Así, por ejemplo, si nos interesa la hoja de estilo
denominada "Arcos", la aceptamos y se nos abre una página que está
en código html. Guardamos esta página con el nombre de arcos como
una hoja de estilo, es decir que tiene la extensión css.

Una vez que la tenemos guardada en nuestra web podemos utilizar la

hoja de estilo. Para ello creamos una página nueva en blanco y nos
vamos a formato / vínculos de hojas de estilo. Esto nos abre una
pantalla como la siguiente:

Pulsamos en agregar y seleccionamos arcos.css y aceptamos. Entonces

se nos aplicará el estilo. Al principio sólo veremos el fondo de la página
que es amarillo claro, pero según utilicemos los diferentes estilos de
título, viñetas, hipervínculos, etc, iremos viendo los resultados.
Si esto lo hacemos con las diferentes páginas que componen la web,
nos irán quedando con el mismo estilo. Estos mismos apuntes están
hechos utilizando hojas de estilo.

Conociendo un poco de código html podemos cambiar características de

las hojas de estilo, e incluso crear nuestras propias páginas de estilo.
Pero esto escapa a las pretensiones de este manual elemental. De todas
formas lo puede intentar quien le interese porque no es muy
complicado.

El único problema de las hojas de estilo es que es un recurso típico de

Microsoft y lo reconocen los navegadores Explorer 4 y posteriores, pero
Netscape, al menos por el momento, no reconoce la hoja de estilo y no
muestra sus resultados.

Html dinámico
El htmld se trata de las últimas tendencias que se quieren aplicar al
html. En este punto nos encontramos con diferencias cuando se ve la
página con los diferentes navegadores.

Frontpage nos ofrece algunas posibilidades para crear htmld, pero hay
que tener en cuenta que sólo funcionará con las últimas versiones del
Navegador Explorer y que no siempre funcionan en Netscape.

Vamos a ver un par de ejemplo de htmld:

1.- Pasa el ratón sobre el siguiente texto: Hola ¿qué tal?
2.- Pasa el ratón sobre la siguiente imagen:

Para crear efectos htmld hay que tener visible la barra de htmld. Para
ello, al igual que en Word, se pulsa con el botón derecho sobre
cualquiera de las barra de herramientas y seleccionamos efectos
DHTML. Se nos muestra la siguiente barra:

A partir de aquí se selecciona un trozo de texto o una imagen y en

"elegir evento" se selecciona una de las opciones. Después se nos van
activando los siguientes botones y seleccionamos una de las opciones
que nos ofrecen y ya está el efecto creado.

Hay que tener en cuenta que cuando se trata de una imagen que va a
cambiar, las dos tienen que tener el mismo tamaño, si no la segunda se
adaptará al tamaño de la primera.
Los efecto no se ven en vista normal, sólo en vista previa o en el
navegador.

Estos efectos son interesantes si los vamos a utilizar con Explorer 5.

Pero si los vamos a publicar hay que comprobarlo en los diferentes
navegadores para ver que funcionen como queramos.

Publicar en la Red
FrontPage tiene su forma propia de publicar una web en Internet con el
icono . Pero esto sólo vale para servidores con los que se han
contratado extensiones de FrontPage.

La mejor forma de publicar sin contratar estas extensiones, que cuestan

dinero, es a través de FTP que son las iniciales en ingles de protocolo de
transferencia de ficheros. Para ello lo primero que hay que hacer es
contratarse un espacio gratis en cualquiera de los servicios que se
ofrecen ahora mismo: terra, inicia, alehop, etc.

Estos contratos que se hacen a través de rellenar un formulario sencillo,

nos dan una cuenta de correo y un espacio gratis en la Red.

Una vez contratado el espacio tenemos que buscar un programa de FTP

que también sea gratuito y bajarnoslo de Internet. El más utilizado se
llama WS FTP. Lo podemos encontrar en diferentes sitios, por ejemplo,
en www.download.com

En esa dirección buscamos ws_ftp y en los resultados seleccionamos

WS_FTP LE (32-bit) que es el gratuito. Nos bajamos el programa a
nuestro disco duro o a un disquete y después lo instalamos.

Cuando abrimos el programa nos aparece la siguiente pantalla:

Lo primero que hay que hacer es crear nuestra cuenta con los datos que
nos ha dado el servidor. Para ello hay que tener clara la dirección a
donde debemos dirigirnos (Host Name/Address), el nombre de usuario
(user ID) y la contraseña (password).

Si los datos son correctos, en unos instantes se nos abre la siguiente

pantalla:

La pantalla de la izquierda es nuestro ordenador y la de la derecha el

espacio que nos dejan en el ordenador conectado a Internet. En la
pantalla de la izquierda nos vamos a donde está nuestra web y
seleccionamos todos los archivos que componen la web y con la flechita
los pasamos al otro ordenador.
Por el sistema de FTP sólo hace falta pasar la carpeta de imágenes y los
archivos de texto.
El resto sirven si se está utilizando navegación automática y para que
funciones con extensiones de FrontPage.

Hay que mantener el mismo esquema que tenemos en nuestra página.

Si, por ejemplo, las imágenes están dentro de una carpeta habrá que
meterlas en una carpeta con el mismo nombre. Si no respetamos el
mismo esquema no funcionará bien la página porque el código html
remitirá a un lugar que si no se llama igual y está en el mismo nivel nos
dará error.

Una vez que el programa nos diga que se han pasado correctamente los
archivos de una lado a otro, ya se pueden ver publicados en Internet.
Cada vez que hagamos algún cambio en una página habrá que subir la
página completa.

Es importante recordar que las imágenes son independientes del

documento de texto y que, por tanto, habrá que subirlas de forma
independiente.

Cómo bajarse una web de la Red

utilizando el ftp de Frontpage 2000.
Cuando estamos utilizando mucho una página en Internet, resulta que
cada vez que queramos consultarla tenemos que conectarnos a Internet
con el consiguiente gasto que esto nos supone.

En muchas ocasiones podemos necesitar bajarnos una página completa

porque la queremos consultar con frecuencia, seguir modelos que nos
interesan o por el motivo que sea. Por ejemplo podemos bajar esta
misma web a nuestro ordenador y consultarla sin tener que
conectarnos.

Lo único que de vez en cuando tendréis que mirarla en la Red para ver
si tiene alguna novedad y volver a bajarla completa porque de los
diferentes puntos que tratamos voy haciendo alguna modificación.

Para bajar la web tenemos que conectarnos a Internet, abrir

Frontpage e ir a Archivo/nuevo/web.

Se nos abre la siguiente ventana y seleccionamos el asistente para

importar al web. En la ventanita de la derecha que dice especifique la
ubicación del nuevo

Web tenemos que escribir una dirección donde queremos guardar esta
web. En el ejemplo que pongo se guardaría en C:\ Mis documentos\
apuntes. Vemos que las barras son invertidas como en Msdos. Esto nos
creará una carpeta nueva dentro de Mis documentos o en la ubicación
que le demos con el nombre de "apuntes"

Aceptamos y se nos abre otra ventana como la siguiente. Dejamos la

opción que nos propone desde un sitio del www y en ubicación
escribimos la dirección de esta página que es
http://www.terra.es/personal2/cursofront
Damos a siguiente y nos aparece la siguiente ventana:

Podemos seleccionar si queremos limitar el tiempo de descarga o

desactivar las opciones que nos propone el cuadro. En el caso de estos
apuntes podemos desactivar todas las opciones porque queremos bajar
la página completa que al momento de redactar esto ocupa unos 750
kbs.

Los niveles por debajo se refiere a los diferentes carpetas por niveles
que tenemos dependiendo de la carpeta principal. En el caso de estos
apuntes serían 3 niveles.

Si queremos bajar una web completa desactivamos todo, pero el

problema que tiene esto es que hay webs muy complejas y enormes
que nos puede llevar mucho tiempo para bajarlas.

Esto normalmente pasa con webs de empresas y oficiales con muchos

contenidos que las construye un equipo de varias o muchas personas,
pero es raro en las webs de tipo personal.

Por eso cuando desconocemos lo que ocupa una web conviene ponerle
unos límites. Así cuando llega al límite de Kbs ya no baja más, pero
normalmente tenemos la index y muchas de las páginas que nos
interesan. Yo personalmente nunca pongo más de 5000 kb en alguna
página que me interesa mucho. Hay que tener en cuenta que un
disquete, por ejemplo, ocupa 1400 kbs.

Pulsamos en siguiente y nos aparece la última ventana de finalizar:

Pulsamos en finalizar y esperamos que se descargue la página. Una vez
que se termine el proceso podemos utilizar los apuntes desde
Frontpage, en vista previa, pulsando el botón de vista previa en el
explorador o abriendo el archivo de la index desde el navegador.

Insertar sonido en la página

La inserción de sonido y video funciona de una forma muy parecida. Los
archivos de video que se admiten en las web tienen las extensiones .avi
las que son de Microsoft Vídeo para Windows y .mov o .qt los de Apple.
Los archivos de sonido son de muchas más clases porque se han
utilizado desde hace mucho más tiempo. Los más habituales son los
siguientes:

• .wav de Microsoft.
• .snd y .mac de sonido Macintosh.
• .au de audio de Sun.
• .mid o . midi que sólo se utilizan para música.

Para utilizar un sonido en una página nos encontramos con las

siguientes posibilidades:

• Incrustar un sonido que lo reproduzcan Internet Explorer y

Netscape Navigator: Permite al usuario reproducir un sonido a
voluntad. Equivale también a incrustar un video.

• Configurar un sonido de fondo para usuarios de Internet Explorer

y Netscape Navigator: Reproduce un sonido cuando se carga la
página.
 • Configurar un sonido de fondo únicamente para usuarios de
Internet Explorer.

• Crear un enlace a un archivo de sonido, de forma que el usuario lo

descarga y posteriormente un programa en el ordenador del
usuario lo reproduce.

Utilización de Java Script

El Java Script es un lenguaje de programación que se utiliza dentro del
html. Lo interpreta el navegador y produce alguna acción determinada
en la página web donde está insertado. En Internet podemos encontrar
muchos ejemplos de Java Script. Yo he recopilado algunos a modo de
ejemplo para que podáis utilizarlos.

Para ello hay que trabajar en vista html porque son churros de
programación que hay que ponerlos y adaptarlos para que nos sean
útiles. El efecto lo podemos comprobar con el navegador o en vista
previa.

El html está formado por los siguientes bloques fundamentales:

<html> <head></head> <body></body> </html>

Hay scripts que van totalmente dentro del head, otros totalmente en el
body y otros que tienen una parte dentro del head y otra en el body.
Cuando veamos un script que nos interesa tendremos que que ver su
código fuente y ver cómo está estructurado para colocarlo nosotros de
la misma manera.

Para ver el código fuente con Explorer y Netscape hay que hacer clic
con el botón derecho sobre la página y seleccionar, ver código fuente o
ver origen. Entonces se nos abre una pantalla donde vemos el html del
documento y si contiene un script veremos que está contenido entre
<script Language="JavaScript"> y </script>

Todo lo que está entre estos dos códigos es el script y tendremos que
copiar todo, incluidos estos códigos. Habrá que fijarse si esta en el head
o en el body y si tiene dos partes, es tal caso habrá que copiar cada
parte y colocarla en su sitio. Cuando tiene dos partes, el script
propiamente dicho está en el head y en el body llama al script con
expresiones como <a href="JavaScript:void(0)" onmouseout="Mout(2)"
onmouseover="Mover(2)"> o códigos que hacen referencia a la primera
parte. Si queremos cambiar algo del script habrá que cambiarlo dentro
de estos códigos, tanto del head como del body.

Para aprender a manejarlos lo mejor es "pelearse" con ellos. Si no estás

acostumbrado a manejarlos, te recomiendo que empieces por los que
veas que tienen el código más sencillo.
En algunos scripts aparece el nombre y la dirección donde lo tiene
publicado el autor, conviene respetar esos datos por una cuestión de
ética. Además que son datos que no molestan porque sólo se ven en el
código y no aparecerán en nuestra página.
 BIBLIOGRAFIA
Tutorial elaborado por Patxi Iriondo Alberdi

http://www.terra.es/personal2/cursofront/
patxiriondo@telefonica.net