FrontPage

Las páginas Web están basados en lo 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

Creación de páginas con FrontPage

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 .

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

“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 pagina

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.

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:

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

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.

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 .

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.

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.

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

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.

Ejemplo 

Trabajo de construcción de una web(Como mejor se ve es con Internet Explorer 4 o superior)

La página consiste en presentar una agencia de viajes con todas sus ofertas de forma que quien la visite no tenga problemas de navegación para acceder

a las diferentes partes de la página. La página también tiene que tener la posibilidad de comunicarse con la agencia para pedir cualquier tipo de

información y poder solicitar la suscripción a un viaje a través de Internet.Todas las páginas tienen que estar totalmente acabadas:

El fondo tiene que elegirse con un diseño que sea agradable. El color blanco se considera como un color más. Los colores tienen que ser coherentes en toda la web, es decir, que hay que utilizar los mismos colores para toda la

web. También se pueden utilizar imágenes de fondo. En alguna página habrá que utilizar alguna imagen de fondo que cree un lateral.

Los colores de la letra, las fuentes y el tamaño de las mismas también hay que trabajarlo. También habrá que seleccionar colores para los enlaces.

Algunas páginas tendrán que ser sencillas, como la index, y otras tendrán que ser con marcos de forma que ofrezcan un menú y que cambie sólo una parte de la pantalla como en la presente pantalla que está construida con dos marcos. También hay que usar marcadores en las páginas que sean extensas o en aquellas que queramos saltar a un punto determinado de una página.

Hay que utilizar imágenes, especialmente botones e imágenes pequeñas que se integren bien en la página. Algunas tienen que ser animadas. Dentro de las imágenes habrá que utilizar el texto alternativo que aparece cuando se pone el cursor sobre la imagen como en el ejemplo siguiente:

La lista de carpetas tiene que estar bien organizada de forma que las imágenes estén dentro de su carpeta. Se puede utilizar la navegación automática, pero no en todas las páginas. Por supuesto hay que utilizar tablas para colocar todos los elementos que compongan la página de forma conveniente. La web hay que diseñarla para una pantalla de 800 píxeles de ancho.

http://www.programatium.com/

manuales1.Presentación del programa. 2.Crear una web. 3.La primera página. 4.Propiedades de página. 5.Las tablas y las celdas. 6.Ejercicio 1: primera parte. 7.Los hipervínculos. 8.Los marcadores. 9.Ejercicio 1: segunda parte. 10.Las imágenes 11.Imágenes de fondo. 12.Crear la estructura de la web. 13.Navegación automática. 14.Los temas. 15.Páginas de marcos 16.Ejercicio 1: tercera parte 17.Mailto. 18.Los formularios 19.Ejercicio 2 20.Las hojas de estilo. 21.Html dinámico 22.Publicar en la Red. 23.Cómo bajarse una web. 24.Como insertar sonido (y video). 25.Java Scripts 26.Cómo hacer archivos que se puedan bajar desde una web. 27.Cómo crear archivos .zip y .exe con WinZip.