ASPTutor.com Tutorial de FrontPage

Las páginas web están basados 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:

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

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

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

Presentación del programa