Tutorial Frontpage.
1.- Introducción:
as 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.
2.- Crear 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.
3.- 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.
4.- Propiedades
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í.
5.- Tablas y 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.
6.- Ejercicio 1.1
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.
7.- 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
. 8.- 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.
9.- Ejercicio 1.2
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.
10.- Imagenes
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.
11.- Imagenes 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.
12.- Estructura web
Lo primero que hay que hacer para tener clara la estructura de la web es tomar 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.
13.- Navegación
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.
14.- 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.
15.- 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.
16.- Ejercicio 1.3
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.
17.- Mailto
Se llama así porque crea un código html que pone mailto.
El mailto 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.
18.- 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.
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. Asi, por ejemplo habría que escribir Bebida_preferida, tu_opinion, 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 dejaramos 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
19.- 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.
20.- HTML dinámico
El html 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.
21.- Publicar
Frontpage tiene su forma propia de publicar una web en Internet con el icono frontpage. 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.
22.- FTP
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.
23.- Insertar sonido
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.
24.- JavaScript
El JavaScript 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.
Eso fue todo de este mega post, espero les haya servido.
Saludos!
