FRONTPAGELAS VISTAS EN FRONTPAGE

FrontPage nos da la posibilidad de tener diferentes vistas para organizar y administrar nuestro sitio web (recordemos que sitio se refiere a un conjunto de páginas web, cuando vamos a un sitio web, se llama página principal a la primer página a la que llegamos y que generalmente lleva el nombre de index.html)

Vista exploración: Es tal vez donde mejor podemos visualizar el sitio, ya que nos muestra su estructura en forma de organigrama, donde tenemos en la parte superior la página principal (con un icono de una casita) y debajo de esta, todas las páginas secundarias ramificadas. Podemos colocar nuestras páginas, o no, en la vista exploración (arrastrándolas de la lista de carpetas o seleccionando nueva página con el menú del botón derecho del mouse) pero si alguna no se coloca, esta no aparecerá en las barras de exploración que coloquemos en las páginas (una barra de exploración es una lista automática con hipervínculos a las demás páginas).

Vista Pagina: esta es la vista donde se arma y se da formato a la página, como se verá, el proceso es similar a editar un documento en Word, ya que las herramientas son parecidas.

Vista Carpetas: Aquí es donde podemos ver las diferentes carpetas en donde guardamos los archivos. Generalmente nos conviene organizarlos para trabar más ordenados, por ejemplo, las imágenes las guardamos todas  juntas en una carpeta; también podemos guardar una sección entera de nuestro sitio en una carpeta diferente. Es importante no confundir la estructura de exploración con la estructura de las carpetas ya que no tienen porqué ser iguales.

Vista Informes: En esta vista podremos obtener una serie de datos muy útiles para nuestro sitio como páginas lentas, archivos no vinculados, archivos nuevos, hipervínculos rotos, etc.

Vista Hipervínculos: Nos muestra cada página con sus hipervínculos entrantes y salientes.

Tareas: Acá podemos organizarnos las próximas tareas que iremos a realizar en nuestro sitio o en algún archivo determinado. Es una especie de agenda.

Dentro de la vista página podremos observar que existen tres lengüetas: Normal, HTML y Vista previa. 

La vista Normal es en donde editamos nuestra página, es decir, donde podemos agregar el texto, gráficos, etc. 

La vista HTML, nos es útil para cuando tenemos que hacer alguna modificación en el código de la página. Muchos sitios web ofrecen la opción de darnos contadores o banners de intercambio, y nos pueden enviar por e-mail, el código html que debemos agregar a nuestra página. Para hacer esto, debemos copiar dicho código en la vista HTML. Para ubicarlo con precisión coloquen el cursor en la vista Normal en donde quieren que aparezca el contador o el banner, y luego en la vista HTML, aparecerá en el mismo lugar; presionen Edición / Pegar y se copiará el código. Puede ser que en algunas ocasiones tengan problemas y que el código se copie como un texto para leer en la vista Normal o Vista previa; para evitar esto, copien el código al bloc de notas (texto sin formato con extensión .txt) y luego vuelvan a copiarlo, después lo pegamos en la página.

Por último la Vista previa nos da una idea de como se va a ver la página en el explorador, aunque algunos elementos, como contadores o formularios, deben estar publicados en Internet para que funcionen correctamente.

COMO EMPEZAR DESDE CERO

Crearemos un sitio web desde cero a modo de ejemplo:

1. Vamos a Archivo / Nuevo / Web y elegimos la opción Web vacío. 2. Una vez hecho esto se crearán las carpetas images y _private y aparecerá

una página en blanco. Nosotros comenzaremos por cerrar esta página en blanco e iremos a la vista exploración.

3. Una vez en la vista exploración hacemos clic derecho y seleccionamos Nueva Página. Una vez creada, si hacemos doble clic, automáticamente pasaremos a la vista página. Aún en la vista exploración, hacemos clic derecho sobre la nueva página que creamos y seleccionamos Nueva Página otra vez, creando así una página secundaria.

4. Si hacemos clic derecho sobre cada página y elegimos Cambiar nombre podremos colocar un título a la página (que es diferente al nombre de archivo). Pondremos "Los Desertores" a la primer página y "Nuestras Canciones" a la segunda.

5. Podemos, de este modo, definir toda la estructura de nuestro sitio para luego tener listas todas las páginas para trabajar. Una característica importante es que si hacemos clic en una página y sin soltarla la arrastramos, veremos una línea punteada que une a la misma con su página superior, ya al moverla, podremos colocarla en cualquier otra posición, modificando así la estructura del sitio.

6. Una vez hecho esto, si hacemos doble clic sobre una página, pasamos a la vista página para comenzar a ingresar el contenido. 

7. Cuando guardamos una página (con la opción Archivo / Guardar), esta se guarda como un archivo .htm. Si vamos a la carpeta de Windows donde estamos armando el sitio veremos que el archivo de página tiene el icono de nuestro explorador, y si lo abrimos, no se abrirá en FrontPage, sino en el explorador. Para abrir el archivo para editarlo debemos abrir FrontPage y elegir la opción Archivo / Abrir y buscar la página que queremos editar. Si por el contrario queremos abrir el sitio entero (es más recomendado para verlo completo) debemos elegir Archivo / Abrir Web con lo que distinguiremos a las carpetas de sitios web, de las demás porque tienen un

icono de un globo terráqueo. No obstante, las carpetas de sitios web se verán como carpetas comunes si la buscamos desde Windows.

Ventana Abrir Web: vemos que las carpetas de sitios tienen un icono distinto. Para abrirlas, seleccionamos la que queremos, y hacemos clic en Abrir dos veces.

Es muy importante que cuando guardemos una página o cualquier otro archivo de nuestro sitio (imágenes, sonidos), no utilicemos en el nombre del mismo, ningún carácter con acento ni la letra "Ñ", ya que cuando  la queramos publicar, nos será rechazada!!

DAR FORMATO A LAS PAGINAS

Como es fácil de observar es muy fácil dar formato a las páginas ya que disponemos de herramientas muy similares a las de cualquier procesador de texto como Word. Solamente caben algunas aclaraciones.

Cuando iniciamos una nueva página, aparece en el menú de fuentes Fuente predeterminada, y en el de tamaño, Normal. Esto se refiere a la fuente y el tamaño configurados en el navegador predeterminado de Internet que se tenga instalado. Si por ejemplo tienes Internet Explorer y la fuente predeterminada que tiene configurada (en Opciones de Internet del Panel de Control) es Times New Roman, entonces esta será la fuente predeterminada de FrontPage, pero una vez publicada la página, cada persona verá la página con el tipo de letra y tamaño que tenga configurada en su navegador.

Para que no suceda esto, y que todos vean la página con la letra que nosotros elegimos, debemos elegir una fuente del menú, distinta a la predeterminada.

Seguiremos ahora con la construcción de nuestra página de ejemplo::

1. Para elegir un color de fondo para la página vamos a Formato / Fondo y Formato / Propiedades  y hacemos clic en la ficha Fondo. Una vez allí podemos elegir el color de fondo, el color del texto, de los hipervínculos, podremos optar por colocar una imagen de fondo que se multiplicará en mosaico

Si optamos por colocar una imagen de fondo deberán tildar la casilla Imagen de fondo y luego seleccionarla haciendo clic en el botón Examinar. Si seleccionan además la casilla Marca de agua, la imagen de fondo permanecerá fija, mientras que el texto o el contenido de la página se podrá desplazar con las barras de desplazamiento.

2. Para cambiar el color de las letras debemos seleccionar el texto y elegir el nuevo color en la barra de herramientas (el símbolo de una A con una raya debajo). También se pueden editar todas las opciones de formato del texto en el menú Formato / Fuente.

3. Al guardar una página por primera vez, nos encontraremos con la ventana Guardar como donde podremos colocar el nombre del archivo y el Título de la página.

4. Si al escribir, nos parece exagerado el espacio entre párrafo y párrafo, podemos incluir un salto de línea presionando MAYÚS+INTRO.

5. Para insertar una línea horizontal, la cual nos es útil para separar secciones o títulos, vamos a Insertar / línea horizontal. Si luego hacemos doble clic en la línea, se abrirá el cuadro de diálogo con las propiedades de la misma.

6. Una herramienta muy útil para trabajar con el formato es Copiar formato (al lado de la herramienta Pegar). Si ya tenemos un texto con el formato que deseamos aplicado y queremos aplicar el mismo formato a otro párrafo, tenemos que tomar la herramienta Copiar formato, seleccionar el primer texto (la parte que contiene el formato a copiar, por lo que puede ser solo una letra) y luego, (verán que todavía tendrán el cursor con la herramienta activa) sombrear todo el texto al cual le queremos aplicar el formato. Si desean aplicar formato varias veces, deben hacer doble clic al seleccionar la herramienta, y para desactivarla, pulsen la tecla Esc.

COMO ORGANIZAR LOS ARCHIVOS

A la hora de organizar los archivos disponemos de la opción de crear carpetas para que no se nos mezclen todos en la lista de carpetas.

Nuestro sitio se ha creado en una carpeta determinada, y dentro de esa carpeta FrontPage creó dos más: _private e images. Es conveniente  que todas las imágenes las guardemos en la carpeta images. Cuando guardemos una página que contiene imágenes, se nos preguntará donde la queremos guardar y si queremos cambiarle el nombre.

Cuadro de diálogo para guardar archivos incrustados: podemos elegir entre cambiar el nombre del archivo o cambiarlo de carpeta (siempre dentro de la

carpeta de nuestro sitio web).

También nos conviene guardar páginas de una sección muy grande todas juntas en una misma carpeta. Por ejemplo, supongan que  tenemos el sitio de un grupo de música y queremos publicar una página para cada una de las letras de unas 20 canciones. Para que no se nos mezclen tantas páginas juntas vamos a crear una carpeta que llamaremos "Canciones":

1. En la lista de carpetas, hacemos clic derecho sobre la carpeta principal (la superior) y seleccionamos Nueva Carpeta en el menú emergente.

2. Aparecerá una Nueva_Carpeta con su nombre seleccionado, lista para que escribamos uno nuevo. Escribamos, por ejemplo, Canciones (recuerden que no podemos usar acentos ni la letra Ñ).

3. En la vista Carpetas, podremos ver todo el contenido de archivos como si se tratase del explorador de Windows.

CREACION DE HIPERVINCULOS

Los hipervínculos, también conocidos como vínculos o links, son conexiones entre dos archivos. Podemos insertar un vínculo en una palabra, frase o imagen, de modo que al hacer clic sobre esta, el explorador abra una nueva página o un nuevo archivo.

1. Para insertar un vínculo a una página o archivo de nuestro sitio Web, primero escribimos la palabra o frase correspondiente, la seleccionamos y vamos a Insertar / Hipervínculo, o bien pulsamos en el icono de un globo terráqueo con una cadena ( ) en la barra de herramientas. En el cuadro de dialogo, aparecerá una lista de los archivos de nuestro sitio, elegimos uno y presionamos Aceptar. Luego veremos que la palabra aparecerá subrayada en un color diferente. Podemos cambiar el color del vínculo en el menú Formato / Propiedades.

Cuadro de diálogo Crear hipervínculo

2. Para insertar un vínculo a una dirección (URL) de otro sitio o página Web de Internet, la escribimos en el recuadro Dirección URL. Igualmente, si escribimos esa dirección en la vista página, FrontPage la reconocerá como tal y creará un hipervínculo automáticamente, lo mismo sucederá con las direcciones de correo electrónico.

3. Para insertar un vínculo a un archivo que esté en nuestra computadora, hacemos clic en el icono de una lupa con una carpeta ( ), el segundo  a la derecha, y  buscamos el archivo en nuestra máquina. Posteriormente, FrontPage creará una copia de ese archivo que se guardará en nuestro sitio.

4. Para insertar una dirección de correo electrónico, debemos hacer clic en el icono del sobre (el tercero a la derecha) o escribir en el recuadro de Dirección URL: mailto:nombre@servidor.com , es decir la palabra "mailto" seguida de dos puntos y la dirección a la que queremos vincular.

5. Y por último, si deseamos crear un link a una página nueva (que aún no ha sido creada), hacemos clic en el cuarto icono, con un dibujo de una hoja de papel en blanco, y se abrirá una página lista para ser editada   (aunque no se guarda hasta que presionemos Guardar).

6. Para insertar un hipervínculo a una imagen lean el capítulo de imágenes. [Las imágenes en el sitio web]

Otra clase de hipervínculos son los llamados marcadores, los cuales unen distintos puntos de una misma página. Son muy útiles para las páginas largas.

Para insertar un marcador primero seleccionemos cual va ser el punto de destino en la página, situemos el cursor ahí y vayamos a Insertar / Marcador. Aparecerá el

cuadro de diálogo de los Marcadores y se nos pedirá un nombre cualquiera para el mismo. Una vez hecho esto, pulsamos Aceptar. 

Ahora iremos al lugar de la página en donde insertaremos el hipervínculo, y como hicimos antes, seleccionamos la palabra, frase o imagen y seleccionamos Insertar / hipervínculo. En el cuadro de diálogo hacemos clic en el menú desplegable Marcador y elegimos el nombre del marcador que hemos creado (puede haber muchos en una misma página).

Si por el contrario, desde otra página queremos llegar a ese marcador en particular, en lugar de que lleguemos a la parte superior, debemos seleccionar primero la página de la lista y luego, sin presionar Aceptar seleccionamos el marcador.

LAS TABLAS

las tablas no solo tienen su uso habitual (listas, planillas, etc.), sino que también se utilizan para alinear el texto, los gráficos, barras de exploración; lo cual nos da muchas posibilidades para un diseño elegante. 

Las celdas se pueden combinar y dividir, se puede hacer que los bordes sean visibles o invisibles, se pueden crear tablas una dentro de otra y un montón de posibilidades más.

1. Para crear una tabla, vayan al menú Tabla / Insertar / Tabla. Aparecerá el cuadro de diálogo Insertar Tabla en donde deberán especificar el número de filas y columnas. La alineación de la tabla con respecto a la página puede

ser derecha, izquierda, centro o justificada. El tamaño del borde puede hacerse cero para que este no sea visible en el explorador, esta opción nos es útil para cuando deseamos alinear texto, gráficos o escribir en dos o más columnas y que no se vean los bordes de la página. Podemos especificar un ancho determinado en porcentaje o en píxeles, si no lo hacemos,

podremos modificarlo luego manualmente. También podremos determinar el margen de las celdas y el espacio que hay entre ellas.

2. Una vez creada la tabla pueden combinarse dos o más celdas que seleccionemos mediante la opción Combinar celdas en el menú Tabla.

3. Si lo que queremos es dividir una celda en filas o columnas deberemos elegir Dividir celdas.

4. También se pueden insertar nuevas filas o columnas mediante la opción Insertar / Filas o columnas. Si elegimos Insertar / Tabla crearemos una tabla dentro de otra, lo cual a veces nos puede llegar a ser bastante útil.

5. En el cuadro de diálogo Propiedades de tabla, se pueden modificar muchas características de la misma: para llegar al cuadro hay que hacer clic derecho sobre l a tabla y seleccionar Propiedades de tabla en el menú emergente. Algunas de las características que podemos editar

son: la alineación (derecha, izquierda, centrada o justificada) con respecto a la página, si el ancho se va a especificar o se ajustará al contenido de la tabla, el margen de las celdas (el espacio desde el borde de la misma), el espaciado entre celdas, el tamaño de los bordes (recuerden que ancho 0 es un borde invisible en el explorador pero si se ve durante la edición). También se puede elegir un color de fondo para toda la celda o una imagen. Si lo que desean es un color para cada celda (o imagen) deben elegir color de fondo en el cuadro de Propiedades de celda.

6. El cuadro de diálogo Propiedades de celda  es similar al de la tabla solo que en este caso solo afectaremos a la celda seleccionada o aquella en donde esté el cursor. Para llegar al cuadro se procede de la misma forma que antes, haciendo clic derecho. Una característica importante es la de alineación vertical, con lo que se nos permite alinear el texto o las imágenes a las partes superior, inferior o central de la celda (ver ejemplo).

LAS IMAGENES

Al trabajar con imágenes en un sitio web es importante saber que los archivos que se manejan en Internet son de dos clases: los .jpeg y los .gif, ambos son archivos de imagen comprimidos.

Los primeros se utilizan para fotografías, las cuales al utilizar este formato comprimido, ocupan menos memoria al costo de bajar un poco la calidad.

El formato .gif, se utiliza para títulos, logotipos, y gráficos con menos de 256 colores. También se pueden usar para fotos pero la calidad será peor. A diferencia del formato jpeg, el gif no hace disminuir la calidad de la imagen.

Insertando Imágenes

El proceso para insertar una imagen es muy simple:

1. Sitúen el cursor en el lugar en que desean insertar la imagen. 2. Vayan a: Insertar/Imagen/Desde archivo o Imágenes. Si eligen imágenes,

aparecerá la galería de imágenes prediseñadas de Microsoft Office de donde podrán buscar imágenes por varias categorías. Una vez seleccionada la imagen, clic en ella y elijan insertar en el menú emergente.

3. Si eligen Desde archivo, se abrirá una ventana en donde se mostrarán todos los archivos del sitio Web. Esto es por si la imagen que desean insertar ya se encuentra dentro del sitio Web (dentro de la carpeta del mismo). Si esto no es así, hagan clic en el icono de la carpeta, para buscar en las carpetas de su computadora la imagen a insertar.

4. Una vez insertada la imagen, es posible que esta haya desplazado el texto a su alrededor, lo cual se puede corregir o ajustar...

Acerca del Tamaño de las imágenes

Como ya dije antes, el tamaño de los archivos gráficos en una página Web debe ser pequeño para optimizar el tiempo de descarga de la página. Si abres la imagen en

algún editor como PhotoShop, deberás elegir ver la imagen al 100% para saber cual es el tamaño real de la imagen que se verá en la página. Con esto lograrán un mayor control de la misma.

Otro punto importante es que nunca es conveniente insertar una imagen grande y luego achicarla mediante los manejadores de la misma (los pequeños cuadraditos que aparecen en los bordes para cambiar el tamaño), ya que si hacemos esto, se achica la imagen que se ve en pantalla pero no el tamaño del archivo.

Ubicación

Para ubicar la imagen con precisión deben ir al menú Formato/Ubicación, y le aparecerá el siguiente cuadro de diálogo:

 Ningún estilo de Ajuste: la imagen se ajustará como un carácter más.Izquierda: La imagen se alineará a la izquierda y se rodeará con texto.Derecha: Similar al anterior.

Ningún estilo de ubicación: en este caso, no se podrá mover la imagen de la ubicación que tiene, para hacerlo, seleccionen:Relativo: en este caso pueden especificar los valores de ubicación y tamaño en los cuadros de diálogo, así como el orden Z, es decir, la profundidad de la imagen con respecto a los demás objetos de la página, es decir, atrás o adelante del texto, o de otras imágenes.Absoluto: utilicen este método para ubicar

una imagen con total libertad, pero en este caso, el texto no se ajustará a ella.

Barra de herramientas imagen

Si seleccionan la imagen, les aparecerá una barra de herramientas de imagen. Si no la ven, vayan a Ver/Barras de herramienta/Imágenes.

Estas son las funciones de los botones:

1. Insertar imagen desde archivo 2. Escribir texto sobre una imagen existente: con esto, se transforma a la

imagen en GIF y se crea un archivo de texto y otro con la imagen del texto que se superpone a la imagen original.

3. Vista en miniatura automática: con esto se crea una copia del archivo de imagen de menor tamaño y de rápida descarga. Para ver la imagen a tamaño normal, habrá que hacer clic en ella y se descargará automáticamente. No hace falta insertar ningún hipervínculo ya que FrontPage hace todo automáticamente. Esto es útil cuando hacemos una "galería de fotos" con muchas de ellas.

4. Ubicación absoluta. 5. Traer al frente o enviar atrás.

6. Rotar 90°, o espejar. 7. Contraste (más, menos) 8. Brillo (más o menos) 9. Recortar: con esta herramienta podemos eliminar parte de una imagen que

no precisemos, con lo cual también reduciremos su tamaño. Hagan clic en la esquina de la porción de imagen que desean conservar y desplacen el mouse hasta lograr un cuadrado. Para recortarla, vuelvan a hacer clic en el botón recortar en la barra de herramientas.

10. Establecer color transparente: haciendo clic en un color de la imagen, este se volverá transparente. Solo se puede elegir un solo color. A continuación vemos un ejemplo de imagen transparente y otra que no lo es :

   

11. Convertir a blanco y negro 12. Decolorar: es útil cuando se desea utilizar la imagen en el fondo y que no

interfiera con el texto. 13. Efecto de biselado.

14. Nuevo muestreo: cuando modificamos el tamaño de la imagen con los manejadores, dije que no se modificaba el tamaño del archivo, pero si luego de achicarla, apretamos este botón, se hará un nuevo muestreo y se reducirá el archivo de modo que el tamaño normal sea el que hemos modificado nosotros con los manejadores.

15. Zonas activas (rectangular, elíptica o poligonal): arrastrando el mouse para dibujar una zona activa, estamos creando una imagen de hipervínculo, con lo cual se nos desplegará el cuadro de diálogo de hipervínculos pidiéndonos que escribamos la dirección del mismo. Para insertar una zona activa poligonal, deben hacer clic en cada esquina del polígono y luego cerrarlo haciendo clic.

16. Resaltar zona activa: resalta las imágenes que son hipervínculos. 17. Restaurar: restaura a la imagen a su estado original, si es que hicimos

algún cambio en ella.

Bordes compartidos.

Imagínense que deseen colocar el logotipo de su empresa, la dirección de correo electrónico o su teléfono al final de cada una de las páginas de su sitio Web ¿Habría que agregárselo página por página? No. Utilizando los bordes compartidos, bastará con escribir esa información una sola vez y especificar que se copie, en el mismo lugar, en cada página del sitio. Para insertar un borde compartido, vayan a Formato / Bordes Compartidos, inmediatamente les aparecerá el cuadro de diálogo Bordes Compartidos.

En el ejemplo de la imagen pueden ver que se ha seleccionado colocar un borde compartido en la parte inferior de todas las páginas del sitio Web. Ahí pueden escribir lo que deseen e incluso insertar imágenes. Ese contenido aparecerá en todas las páginas de su sitio.

LOS MARCOS O FRAME

Uso de marcos  

Los marcos son áreas rectangulares que dividen a la página web para representar en cada marco una página o imágenes diferentes. 

Las funciones más típicas de los marcos aparecen cuando queremos que una sección de la página se vea siempre mientras que otra sección (en un marco diferente) cambie de contenido. Esto es común cuando queremos colocar una barra de navegación. Hacerlo en todas las páginas sería agotador, entonces podemos crear un marco vertical del lado izquierdo con espacio para la barra de navegación y los destinos de los links de la barra, aparecerán en el marco de la derecha.

 

Otra función podría ser que queramos que le nombre del sitio esté siempre visible, para lo cual optamos por colocar un nuevo marco horizontal superior.

Conjunto de marcos

En realidad, cuando creamos una página web con marcos, estaremos guardando una página por cada marco más una adicional con la información de como se distribuyen los marcos y que contenido va en cada uno.

Entonces, cuando guardemos un conjunto de marcos por primera vez, tendremos que guardar un página adicional. Esta es la página a la cual debemos hacer referencia en caso de querer hacer un hipervínculo hacia el conjunto de marcos. También esta es la que debe llevar el título y a la que llamaremos index.htm en caso de ser la página principal del directorio.

FrontPage nos muestra de una forma muy gráfica, al momento de guardar los archivos, que página o páginas son las que estamos guardando.

Trabajo con marcos

Para empezar con una página con marcos lo más conveniente es ir a Archivo/Nuevo/Página/Páginas de marcos y allí elegir el que más nos guste. En el ejemplo elegimos titular y contenido. Automáticamente, aparecerán los marcos pero sin ninguna página en su interior, solo los botones Establecer página inicial y Nueva página.

Con el primero podemos elegir qué página va a mostrarse en el marco, siempre y cuando sea una que ya hallamos creado y con el otro botón insertamos una página en blanco. Este es el que nos conviene apretar si es que vamos a empezar a trabajar desde cero. Como vemos en el ejemplo, podemos usar un fondo diferente para cada marco.

Veremos que siempre que trabajamos en un marco determinado, este estará rodeado por un cuadrado de color azul. Esto significa que es el marco activo o seleccionado (en el cual estamos trabajando y en donde se aplicarán todas las modificaciones que hagamos. Si queremos seleccionar todo el conjunto, con los tres marcos, simplemente, debemos hacer clic en cualquier borde exterior de los marcos.

Podemos ver que ahora a las lengüetas Normal, HTML y Vista previa, se han agregado las lengüetas Sin marcos y HTML de página de marcos. La primera se utiliza para crear una página de advertencia para navegadores que no admiten marcos, pero hoy en día ya son pocos. La otra se refiere al código de la página adicional del conjunto de los marcos que ya habíamos mencionado.

Presentación de una página en un marco

Veamos el sitio que pusimos como ejemplo en la figura y supongamos que queremos que al pulsar sobre “Novedades”, aparezca el contenido en el marco de la derecha. Para ello previamente debe estar creada la página Novedades. Insertamos un hipervínculo y en el cuadro de diálogo de hipervínculos, seleccionamos, primero la página Novedades y en segundo lugar, elegimos Marco de destino, a continuación aparecerá un cuadro en donde podemos elegir en donde aparecerá el contenido, tan solo haciendo clic en el dibujo del marco correspondiente o elegir alguna de las opciones de la derecha, entre las que se encuentra: el mismo marco, toda la página nueva ventana y Nueva ventana (en este caso se abrirá una nueva ventana del explorador para presentar el contenido).

Podemos también establecer el marco de destino predeterminado, para no tener que elegirlo cada vea que insertamos un hipervínculo. Para ello seleccionemos Propiedades de página en el menú Formato y en la ficha general elijan el marco de destino predeterminado al igual que hicieron antes.  

USO DE FORMULARIOS

Cuando queramos incluir un formulario en nuestro sitio web deberemos insertar un área en donde los visitantes ingresarán los datos. Posteriormente, luego de que presionen un botón los datos nos podrán llegar por correo electrónico a través del servidor en donde esté nuestro sitio o a través de la cuenta de correo del visitante que llenó el formulario. Los datos ingresados, también se pueden guardar en un archivo de texto o en una página en nuestro sitio web. Luego de que los datos son enviados, generalmente se muestra una "página de confirmación" para agradecer, o para hacer saber que todo salió bien.

Lo primero que debemos hacer para colocar un formulario es ir al menú Insertar/Formulario/Formulario, nos aparecerán dos botones y una zona rodeada de líneas punteadas. Presionamos Enter varias veces para dejar espacio por encima de los botones y ya tendremos el área para ingresar los datos.

Configurar las Propiedades

Haciendo clic derecho dentro del área punteada, y eligiendo Propiedades de formulario en el  menú emergente accedemos al cuadro de diálogo desde donde podremos configurar las propiedades.

Enviar a: Elijamos esta opción si queremos que los resultados se guarden en un archivo de texto, que por defecto se ubica en la carpeta _private y lleva el nombre de form_results.txt. El contenido de la carpeta _private, no puede ser accedido por otra persona porque al comenzar con el signo "_" le será invisible. Si deseamos que también se envíe una copia por correo, escribimos la dirección abajo (la nuestra, por ejemplo). Si al presionar Aceptar nos aparece un mensaje de advertencia preguntando si queremos sacar la dirección de correo electrónico, contestamos que NO. Presionando Opciones, accedemos a este nuevo cuadro de diálogo.

Aquí nuevamente vemos el nombre del archivo de texto donde se guardarán los datos y donde dice Formato de archivo elijamos en que formato veremos los resultados. El más recomendable es Texto con formato. 

En la ficha Resultados por correo electrónico colocamos la dirección de correo en donde se recibirán los resultados, el formato del

mensaje y si queremos que aparezcan los nombres de los campos de formulario (ponemos que sí). Luego en la línea asunto colocamos lo que queremos que aparezca, por ejemplo "Resultado del formulario" y en la línea Responder a, podemos hacer que se incluya la dirección de correo de la persona que rellenó el formulario. Para ello seleccionamos la casilla Nombre del campo de formulario y escribimos CorreoElectronico, luego habrá que crear en el formulario un campo que se llame justamente CorreoElectronico en donde el visitante anotará su dirección. Recordemos que de otra forma, si respondemos un mensaje que nos llega de esta forma, estaremos respondiendo al servidor donde se aloja el sitio y no a la persona que lo escribió.

Por último en la ficha Página de confirmación elegimos una página de nuestro sitio a donde llevaremos a los visitantes después de enviar el formulario. Podemos elegir la página principal o crear luego una específica, por lo que si ese es el caso, dejémoslo en blanco. Si no especificamos la página de confirmación, el servidor creará una automáticamente pero sin ningún tipo de diseño.

Elementos del formulario

A continuación veremos cada uno de los elementos que se pueden incluir

Cuadro de texto de una línea: Para insertarlo, primero nos conviene escribir la etiqueta, por ejemplo "Nombre y Apellido"  luego dejamos un espacio, vamos a Insertar / Formulario / Cuadro de texto de una línea. Seleccionamos ambos y elegimos Insertar / Formulario / Etiqueta. Ahora hacemos clic derecho sobre el cuadro de texto y elegimos propiedades de campo de formulario en el menú emergente. Donde dice Nombre, ponemos un nombre descriptivo que deberemos recordar, por ejemplo "NombreyApellido", sin espacios. Este será el nombre que aparecerá en el mensaje de resultados y deberemos recordarlo para usarlo luego en la página de confirmación. En donde dice Valor inicial  podemos especificar un texto predeterminado solo en el caso que sea muy seguro que casi todos los visitantes van a poner lo mismo (por ejemplo en país podríamos poner Argentina si es un sitio muy visitado por argentinos).

Cuadro de texto con desplazamiento: El uso es similar al anterior pero sirve para escribir mensajes más largos, como comentarios o mensajes. Siempre recuerden hacer clic derecho sobre el campo, elegir propiedades de campo de formulario y colocarle un nombre descriptivo (como "Comentarios") en donde dice Nombre.

Casilla de verificación: Las casillas de verificación se suelen usar para el caso de que queramos que los visitantes elijan una o más opciones, por ejemplo una lista de ciudades que han visitado. Nuevamente, coloquemos una etiqueta y pongámosle un nombre a cada una; el nombre debería ser la opción a la que hace referencia cada casilla, por ejemplo la primera sería "Mar del Plata", la segunda "Guadalajara", la tercera "Madrid", etc.

Botón de opción: Estos botones se usan en el caso de querer elegir una sola opción entre varias, por ejemplo "Sexo? Masculino o Femenino". Los botones se agrupan y hay que dar un nombre al grupo en las propiedades de campo de formulario,  en nuestro ejemplo el nombre del grupo sería

"Sexo" y el valor del primer botón sería "Masculino" mientras que en el segundo sería "Femenino". En las propiedades también podemos especificar si alguno de los botones aparecerá previamente seleccionado o no. Si queremos agregar más botones, recordemos escribir a que grupo pertenecen.

Menú desplegable: Tienen una función similar a los grupos de botones de opción. En el menú de propiedades de campo de formulario especifiquemos el nombre del campo y presionando Agregar iremos agregando las distintas opciones para crear nuestra lista.

Botones: Por defecto, cuando insertamos un formulario o un campo, aparecen dos botones: Enviar y Restablecer. Podemos eliminar el segundo si creemos que no nos servirá ya que solo sirve para borrar los datos ingresados.

OTROS ELEMENTOS

En esta lección veremos otros elementos que encontrarán en FrontPage que les ayudarán a simplificar ciertas tareas

Insertar Fecha y Hora

Permite insertar la fecha y/o la hora de la última actualización de la página. Deben ir a Insertar / Fecha y hora. Si lo que desean es que aparezca la fecha y hora actual, pueden probar insertando este Java Script que captura la hora y la fecha del sistema que esta accediendo a su página.

Botón activable

Se trata de un botón al que se le pueden incluir ciertos efectos especiales y puede ser utilizado como hipervínculo. Su configuración es muy sencilla, a continuación vemos la ventana de Propiedades principal:

Podemos elegir un color para el botón y un color de efecto para que aparezca cuando pasemos el mouse por encima. Si hacemos clic en personalizado podremos incluso elegir un sonido para que se active junto con el botón. En el cuadro de texto Vincular a debemos colocar la dirección del hipervínculo.

 

Marquesina (No funciona bien con Netscape Navigator ni con Opera 3.6)

Este es un componente muy vistoso y muy sencillo de utilizar.

Si van al cuadro de diálogo Propiedades de Marquesina podrán elegir entre tres efectos de movimiento:

1. Desplazar: es el del ejemplo. El texto se desplaza continuamente o no (según lo hayan configurado) hacia a la izquierda o derecha (también se puede configurar).

2. Deslizar: el texto aparece de la izquierda o derecha y se detiene en el borde contrario.

3. Alternar: el texto va y viene como atrapado entre los márgenes.

En el ejemplo luego de configurar la marquesina, se le cambió la letra y el color y se le aplicó el efecto Color de resalte.