31
 Curso de Front Page Índice General ÍNDICE Introducción a Front Page. Contenidos Básicos de: Conceptos. Descripción de Front Page. Propiedades de la Página. Márgenes. Guardar la Página. Inserción de Elementos. Opción Marquesina. Líneas. Imágenes. Ver o Editar la Página. Tablas. Enlaces (Hipervínculos). Formularios. Imprimir la Página. Frames y mapas activos. Ejercicios propuestos.  1

Manual de Front Page

Embed Size (px)

Citation preview

Page 1: Manual de Front Page

5/16/2018 Manual de Front Page - slidepdf.com

http://slidepdf.com/reader/full/manual-de-front-page-55ab50e10e308 1/31

 

Curso de Front Page

Índice General

ÍNDICE

Introducción a Front Page.

Contenidos Básicos de:

• Conceptos.• Descripción de Front Page.• Propiedades de la Página.• Márgenes.• Guardar la Página.• Inserción de Elementos.• Opción Marquesina.• Líneas.• Imágenes.• Ver o Editar la Página.• Tablas.• Enlaces (Hipervínculos).• Formularios.• Imprimir la Página.• Frames y mapas activos.• Ejercicios propuestos.

  1

Page 2: Manual de Front Page

5/16/2018 Manual de Front Page - slidepdf.com

http://slidepdf.com/reader/full/manual-de-front-page-55ab50e10e308 2/31

 

Curso de Front Page

 Introducción a FRONTPAGE 

Vamos a ver una pequeña introducción a FrontPage. Vamos a aprender para qué sirve esta aplicación y

cómo nos puede ayudar a hacer desde una sencilla página Web hasta un sitio completo en Internet.

También haremos una página Web para que veamos lo fácil que puede llegar a ser.

  2

Page 3: Manual de Front Page

5/16/2018 Manual de Front Page - slidepdf.com

http://slidepdf.com/reader/full/manual-de-front-page-55ab50e10e308 3/31

 

Curso de Front Page

¿Qué es FrontPage y para qué sirve?

FrontPage es un programa con el cual podemos crear páginas Web de una forma visual. Gracias aesto el usuario sólo tiene que concentrarse en el diseño de su Web sin necesidad de saber 

 programar. No obstante, un usuario avanzado puede usar las características avanzadas deFrontPage para hacer sitios Web más complejos.

Una página Web es un documento que puede ser visualizado con un navegador de Internet. Unsitio Web es un conjunto de páginas Web relacionadas entre sí. FrontPage nos permite diseñar ymodificar tanto el sitio como cada página individualmente, y nos ayuda en su edición ymantenimiento.

FrontPage forma parte del paquete de aplicaciones Office, y comparte muchas de lascaracterísticas del resto de programas del Office, tanto en procedimientos como en el interfaz.Gracias a esto, muchas de las tareas que nos son familiares en Word nos servirán para FrontPagey viceversa. Algunas de las características que comparten son:

Los menús y los iconos son similares entre cada aplicación y realizan la misma función.

El portapapeles de Office es ahora común a todas las aplicaciones Office, y permite guardar deforma temporal gráficos y textos de distintos documentos de Office y de otros programas, y

 pegarlos en un documento de Office. Por ejemplo, puedes copiar textos de un documento de Wordy pegarlos en una página Web de FrontPage, y después abrir una hoja de cálculo de Excel, ycopiar una tabla de Excel a Word.

Otras funciones, como el corrector ortográfico, funcionan de la misma manera o de una forma casiidéntica en todas las funciones.

Por otra parte, los documentos de Word pueden ser convertidos a páginas Web. Gracias a esto podemos crear páginas Web a partir de documentos que ya tengamos escritos en Word de unaforma fácil y sencilla. Esto también se aplica a otra clase de documentos como hojas de cálculo deExcel, ficheros de Access, etc.

Descripción del programa

FrontPage es el editor de páginas Web que se incluye en la suite de Office de Microsoft. Permitecrear y dar formato a páginas Web en HTML (Lenguaje de marcado de hipertexto) trabajando enuna vista WYSIWYG ("lo que se ve es lo que se obtiene"), de modo que podrás ver la apariencia

real del formato y el diseño.

Cuando se instala la suite Office, FrontPage se instala, por defecto, en el grupo de programas deOffice. Por supuesto este acceso podemos sacarlo al escritorio o a donde nos interese.

FrontPage

Al comenzar nos encontramos con la siguiente pantalla en la que de la parte superior a la inferior  podemos ver:

  3

 

1

Page 4: Manual de Front Page

5/16/2018 Manual de Front Page - slidepdf.com

http://slidepdf.com/reader/full/manual-de-front-page-55ab50e10e308 4/31

 

Curso de Front Page

 

1. Barra de título2. Barra de menús desplegables.3. Barras de herramientas Estándar.4. Barras de herramientas Formato.5. Espacio en blanco para diseñar nuestra página6. Barra de vistas7. Barra de estado

Al iniciar el programa se muestra una página en blanco. Existen unas plantillas definidas y asistentesque nos guían y que, a veces, pueden ser útiles. Si deseamos acceder a ellas elegimos Archivo -Nuevo. También podemos continuar la edición de una página previamente guardada en el disco conla opción Archivo - Abrir.En nuestro caso continuamos con la página en blanco.

Propiedades de la página

Antes de comenzar a insertar elementos ennuestra página podemos configurar 

algunas propiedades que afectan a todaella. Accedemos pulsando en Archivo -Propiedades (o con el botón derecho deratón sobre ella).

De la pestaña General se destacan:Ubicación: lugar donde guardamos la

 página (sea en la red o en el disco). No lo podemos modificar.Título: nombre de la página que apareceráen la pantalla del navegador.

  4

 

3

2

4

5

6

7

1

Page 5: Manual de Front Page

5/16/2018 Manual de Front Page - slidepdf.com

http://slidepdf.com/reader/full/manual-de-front-page-55ab50e10e308 5/31

 

Curso de Front Page

Ubicación base: ruta en donde se buscarán los elementos que aparecen en la página.Sonido de fondo: archivo que contiene el sonido de fondo que se oirá al cargar la página y númerode veces que se repetirá.

Fondo:

Imagen, o color que vamos acolocar como fondo de nuestra página. Podemos escribir sunombre y ruta o examinar en eldisco y elegir del mismo.

También podemos elegir loscolores del texto, enlaces, etc.

Márgenes:Podemos modificar margen superior e izquierdo. Esto no afecta alfondo de la página.

Los márgenes derecho e inferior estarán en función de laresolución de pantalla que tenga la persona que acceda a nuestra

 página.

La pestaña Personalizar generalmente no debemos modificarla, si no nos lo indica nuestro servidor de Internet.

La pestaña Idioma nos permiteelegir el idioma de la página, ennuestro caso el Español. De estaforma los sistemas de búsquedaavanzados, permiten detectar elidioma de la página. En caso de no

 poner nada, Front Page detecta el

idioma a través del teclado o a partir de la configuración local de usuario.

Guardar una página en el disco

El procedimiento es el habitual en el

entorno Windows, con la diferencia

5

Page 6: Manual de Front Page

5/16/2018 Manual de Front Page - slidepdf.com

http://slidepdf.com/reader/full/manual-de-front-page-55ab50e10e308 6/31

 

Curso de Front Page

de que además de solicitarnos la ruta y nombre del archivo, nos pide un título para la página (es elque aparecerá en el navegador).

Completaremos el campoTítulo de la página,

 pulsando Cambiar yescribiendo el nombre con elque queremos que aparezcala página en el navegador, ydespués elegimos laubicación y el Nombre dearchivo y el tipo(normalmente PáginasWeb),

 Práctica 1

 Escribe como título de tu página: Página personal 

Cambia el fondo de tu página. Prueba primero con un color plano.

 Elige ahora como fondo una imagen.

 Déjala con el fondo que desees y guárdala con el nombre PAGINA1.

Inserción de elementos en una página

Los principales elementos que podemos insertar en nuestra página son:

Texto

En el editor podemos escribir como en cualquier procesador utilizando el teclado y las herramientas básicas de edición de texto. La barra de formato nos ofrece acceso rápido a la mayor parte de

herramientas necesarias para este trabajo:

Las opciones de esta barra permiten elegir formatos ya definidos (normal, encabezados, etc.), tipo deletra y tamaño (entre 7 diferentes), estilo (negrita, cursiva, subrayado), color, ajustes, escribir deizquierda. A derecha. O al revés, viñetas numeradas o con iconos y sangrías.

También podemos modificar el texto a través del menú Formato en sus opciones Fuente, Párrafo,Numeración y viñetas.

  6

Page 7: Manual de Front Page

5/16/2018 Manual de Front Page - slidepdf.com

http://slidepdf.com/reader/full/manual-de-front-page-55ab50e10e308 7/31

 

Curso de Front Page

La opción Insertar - Símbolo permite incluir en el documento algún carácter especial que quizá noencuentres en el teclado.

Si hemos elegido un determinado formato para nuestro texto y deseamos volver al texto normal, lohacemos con Formato - Quitar formato.

Por supuesto también podemos utilizar las opciones (cortar, copiar, pegar ydeshacer o rehacer) de edición de texto de la barra de herramientas estándar.

Así mismo, en el menú Edición contamos con las opciones Buscar y Reemplazar que tienen elmismo sentido y función que en cualquier editor de textos.

 Práctica 2

 Escribe algo similar a lo que viene a continuación (completando con los datos que desees) y

dándole formato a tu gusto (colores, tamaños, estilos, ajustes, etc.):

MI PÁGINA WEB

Esta página pertenece a............................, estudiantes de Molina, que desea transmitir almundo sus aficiones, gustos y preferencias. También está abierta para recibir todas las ideas,

sugerencias o comentarios que quieras enviar.

Listas

 No deja de ser un tipo de texto, pero con alguna característica propia. Lo utilizaremos normalmente

 para hacer enumeraciones de líneas o párrafos. Activamos una lista con los botones (segúnsea numerada o con viñetas) y podemos modificar su formato en Formato - Viñetas y numeración.

 Práctica 3

 A continuación del texto anterior escribe una lista similar a la siguiente, utiliza las viñetas que

 prefieras. Puedes usar los botones de sangría para desplazar hacia la derecha los diversos

epígrafes.

CURRICULUM PROFESIONAL

7

Page 8: Manual de Front Page

5/16/2018 Manual de Front Page - slidepdf.com

http://slidepdf.com/reader/full/manual-de-front-page-55ab50e10e308 8/31

 

Curso de Front Page

ENLACES INTERESANTES

ENCUESTA

Marquesina

También es un texto especial que se desplaza dentro de un rectángulo. Para crearla nos situamos en

el punto adecuado y pulsamos Insertar – Componentes-Marquesina. 

8

Page 9: Manual de Front Page

5/16/2018 Manual de Front Page - slidepdf.com

http://slidepdf.com/reader/full/manual-de-front-page-55ab50e10e308 9/31

 

Curso de Front Page

Puedes modificar los diversos parámetros que aparecen. Siempre podrás volver a editarla con el botón derecho del ratón y Propiedades de marquesina. Prueba las diferentes opciones: Dirección,Velocidad, Comportamiento.

Aviso: las marquesinas no funcionan en los navegadores de Netscape.

Líneas

Para separar los diversos apartados de nuestra página vamos a insertar líneas entre ellos. Para ellodebes situarte en la posición deseada y pulsar Insertar - Línea horizontal. Observa que aparece unalínea. Si deseas modificar su aspecto, colócate sobre ella y pulsa el botón derecho del ratón, eligePropiedades de la línea horizontal, aparece el cuadro siguiente en el que puedes modificar suaspecto.

Imágenes

Para incluir imágenes en nuestro documento, nos situamos en el punto donde queremos colocarla(debajo del título principal) y pulsamos el botón correspondiente o Insertar - Imagen.Seleccionamos en el disco la imagen que deseamos y el programa la colocará en el lugar señalado ennuestra página.

Observa que al seleccionarla aparece rodeada por botones que te permiten cambiar sutamaño. También puedes modificar algunasde sus características pulsando el botónderecho y eligiendo

Propiedades de imagen

En la pestaña General  puedes cambiar laimagen, eligiendo otra del disco, el formato,el tipo de presentación: transparente oentrelazada (se muestra como en capas que sesuperponen). También en el formato JPEG

 podemos modificar la calidad.

9

Page 10: Manual de Front Page

5/16/2018 Manual de Front Page - slidepdf.com

http://slidepdf.com/reader/full/manual-de-front-page-55ab50e10e308 10/31

 

Curso de Front Page

Las representaciones alternativas permiten incluir imágenes en baja resolución o texto que semostrarán antes de su carga.

Los hipervínculos permiten acceder a través de esa imagen a otro lugar. Los estudiaremos posteriormente.

La pestana Vídeo sólo lo utilizaremos si insertamos algún vídeo (poco recomendable para una página web dado el tamaño que ocupa).

En Apariencia:

Elegimos el tipo de alineación (importanteal combinar con texto), espaciadoalrededor, borde y el tamaño tanto en

 pixels como en porcentaje.

 Práctica 4

 Incluye líneas de separación (de diferentes colores, grosores y tamaños) a continuación del 

último texto escrito.

Sitúate debajo del título principal e inserta algunas imágenes (directorio  HTML ). Si deseas

modificar alguna de sus características, pulsa el botón derecho del ratón y elige la opción

 Propiedades de imagen.

 Incluye una marquesina con el texto: No olvides contestar nuestra encuesta.

Vamos a añadir otra imagen al final del documento. Escribimos el siguiente texto:

 Pulsa en el buzón para enviar tus sugerencias

Y a continuación inserta una de las imágenes (Carpeta HTML). Modifica los parámetros que

consideres oportuno (alineaciones y ajustes, tamaño, espacio alrededor, etc.) para que quede bien

en relación al texto. Observa que la imagen insertada es una animación.

Otros elementos

Además de lo visto hasta el momento Frontpage permite insertar otros elementos en las páginas.Dos de ellos son las Tablas y Formularios que veremos más adelante en capítulo independiente.También podremos incluir, los siguientes elementos:

  10

Page 11: Manual de Front Page

5/16/2018 Manual de Front Page - slidepdf.com

http://slidepdf.com/reader/full/manual-de-front-page-55ab50e10e308 11/31

 

Curso de Front Page

Comentario: (desde el menú Insertar) Permite introducir una nota aclaratoria que no apareceráal navegar en la página web.

Sonido de fondo: (desde Propiedades de página) Admite diversos formatos (wav, mid, etc.) ysimplemente debemos indicar el archivo que deseamos incluir.

Archivo: (desde el menú Insertar) Permite incluir archivos previamente preparados y quetengamos en nuestro disco. Por defecto busca formato HTML, pero pueden ser de otros

formatos. Componentes WebBot: Son objetos dinámicos que hacen posible ciertas tareas difíciles de

conseguir con otros métodos. Algunos de ellos son los siguientes: Formulario de búsqueda: (desde el menú Insertar -  Componentes) Añade una programa de

 búsqueda de caracteres en nuestra página. Fecha: (desde el menú Insertar) Incluye de forma automática la fecha y hora de la última

actualización. Inclusión programada de página): (desde el menú Insertar  –  Componentes) Introduce la

dirección de una página web que se cargará en la nuestra. Otros componentes: Otras utilidades avanzadas como Java, ActiveX, animaciones de

PowerPoint, etc.

Ver o editar la página en formato HTML.

Para ver la página en formato HTML (como se guarda en el disco y se envía al servidor de Internet)debes pulsar la pestaña HTML, que se encuentra abajo a la izquierda en la línea de estado. Se abreuna nueva ventana en la que vemos la estructura de la página HTML: HEAD, TITLE, BODY ydemás etiquetas para presentar textos, líneas e imágenes. Desde ahí puedes editar tu páginamodificando el texto que en ella aparece. Al finalizar para volver al modo anterior pulsa la pestaña

Normal. No olvides guardar en el disco el archivo con los últimos cambios realizados

Tablas

La posibilidad de insertar tablas da una gran potencia a la presentación de texto e imágenes ennuestras páginas web. Las tablas permiten crear una estructura de celdas en las que distribuir loscontenidos de nuestro documento.

 Práctica 5

Comenzaremos una nueva página pulsando el icono Nuevo .

 Pon el color o fondo que desees y guárdala en el disco como PAGINA2.

 Escribe en ella:

CURRICULUM PROFESIONAL

• Titulaciones académicas

• Trayectoria docente

• Volver a página de inicio

 

 Inserta a continuación una línea de separación (o una de las imágenes llamadas líneas ).

  11

Page 12: Manual de Front Page

5/16/2018 Manual de Front Page - slidepdf.com

http://slidepdf.com/reader/full/manual-de-front-page-55ab50e10e308 12/31

 

Curso de Front Page

Sitúate a continuación de dichas líneas y vamos a crear dos tablas. Para insertar una tabla pulsamos

el icono correspondiente o en el menú Tabla – Insertar - Tabla. En el primer caso debemosmarcar número de columnas y filas, en el segundo aparece una ventana para completar ese dato yalgún otro que veremos a continuación. En cualquier caso una vez que aparece la tabla podremosmodificar su aspecto con la opción Propiedades de tabla (botón derecho del ratón)

Como puedes observar podemos cambiar los tamaños del borde, relleno y espaciado, poner color alfondo o una imagen de fondo y los colores del borde. También permite modificar el tamaño de latabla (en pixels o porcentaje).

También podremos, desde el menú Tabla: insertar filas o columnas, seleccionar una fila, celda ocolumna, dividir celdas, cambiar las propiedades de una sola celda, etc.

Si deseamos eliminar una fila o columna, primero la seleccionamos y pulsamos Supr.

 Práctica 6 

 Realiza dos tablas similares a las que vienen a continuación. Crea las filas que necesites y

colores, alineación, grosor de líneas, etc., según tus gustos personales.

ESTUDIOS REALIZADOS

TITULACION LUGAR FECHA DE FINALIZACIONBachiller Liceo Ercilia Pepi

 

n 30 de julio de 1998Diplomado en Empresariales Universidad Autónoma de S.D 15 junio 1999

Lic. En Contabilidad UASD 22 julio 2002

  12

Page 13: Manual de Front Page

5/16/2018 Manual de Front Page - slidepdf.com

http://slidepdf.com/reader/full/manual-de-front-page-55ab50e10e308 13/31

 

Curso de Front Page

……………….. ……………….. ………………..

HISTORIAL DOCENTE

DESTINO LOCALIDAD FECHA INICIAL FECHA FINALInstituto del Cibao Santiago 01/09/2000 30/05/2001CompuXpres San Francisco 01/11/2000 30/11/2001

SystemTec San Francisco 01/06/2001 30/03/2002……………….. ……………….. ……………….. ………………..

 Inserta una imagen junto a la primera tabla y otra junto a la segunda. (Ambas imágenes se

encuentran en la carpeta HTML ). Separa ambas por una o dos líneas.

Enlaces (Hipervínculos)

Los enlaces son los elementos que nos van a permitir movernos de forma hipertextual por nuestra página y saltar a otras. Pueden realizarse a elementos internos o externos de nuestro documento.Podremos acceder a esta opción de dos modos diferentes: desde el menú Insertar - Hipervínculo, ohaciendo clic en el icono .

Cualquiera de estas opciones nos llevan a la ventana Crear Hipervínculo: 

Podemos establecer elhipervínvulo a:

Páginas abiertas: enlaces a páginas creadas con anterioridad.WWW: páginas que se hallan enInternet u otras utilidades comocorreo, FTP, etc.Página nueva: enlaces a páginastodavía no creadas.El campo Marco de destino serefiere a páginas con marcos

(frames) y en principio no loutilizaremos.

Enlaces internos en el mismoarchivo HTML.

Para realizar un enlace interno ennuestro documento, es necesario, en primer lugar, señalar el destino. Esto lo hacemos situándonosen el lugar de destino y creando un marcador (Insertar - Marcador). Debemos poner un nombre yaceptar. Del mismo modo borraremos los existentes. Observarás que el marcador aparece consubrayado discontinuo. Los marcadores permitirán acceder directamente a ellos a través de los

enlaces.

  13

Page 14: Manual de Front Page

5/16/2018 Manual de Front Page - slidepdf.com

http://slidepdf.com/reader/full/manual-de-front-page-55ab50e10e308 14/31

 

Curso de Front Page

Para crear un enlace a estos destinos (es decir un texto o imagen que al pulsar sobre él nos llevedirectamente a la posición del marcador) seleccionamos el texto o imagen que queremos vincular almarcador, seleccionamos la página y en el campo Marcador elegimos el adecuado.

 Práctica 7 

Crea dos destinos (uno delante del título de la primera tabla y otro de la segunda), llámalos

estudios y docencia , respectivamente.

 Ahora vamos a crear los enlaces a estos destinos. Para ello colócate al principio de la página y

 selecciona con el Mouse las palabras Titulaciones académicas , sigue el procedimiento

explicado anteriormente para crear el enlace correspondiente al marcador estudios.

 Repite la operación con la frase Trayectoria docente , asignándole el otro destino. 

Enlaces internos a otro archivo de la misma página web.

El procedimiento a seguir es exactamente igual que en el caso anterior: debemos elegir la páginaabierta que deseemos.

 Práctica 8

Selecciona ahora la frase Volver a página de inicio y busca como enlace el archivo guardado

con el nombre pagina1.

Sitúate en el documento pagina1 (utiliza las flechas de la barra de herramientas). Selecciona la

 frase CURRICULUM PROFESIONAL y crea, de igual forma, un enlace con pagina2.

Enlaces externos

Estos enlaces nos permiten acceder a otras páginas web, correo electrónico, FTP, etc.  Para surealización se sigue el mismo procedimiento que en los casos anteriores. Se selecciona el texto oimagen donde pulsaremos para enlazar, y si sabemos la dirección la escribimos en el campoDirección URL. Si no sabemos la dirección podemos navegar para encontrarla pulsando en el icono

, una vez que la tengamos tecleamos ALT + TAB para volver a FrontPage y la dirección de la página visitada se mostrará en el campo Dirección URL.

Si queremos hacer un enlace a una dirección de correo electrónico, pulsamos en el icono y acontinuación escribimos la dirección correspondiente. Cuando alguien visite la página y quieramandar un e-mail a esa dirección, al pulsar en ese enlace se le abrirá su programa de correo con ladirección de destino ya escrita.

 Práctica 9

 En la página 2 selecciona el texto Ercilia Pepin. Crea con él un enlace externo a su página web

(www.see.gov.do).

 Haz lo mismo con Universidad Autónoma de S.D (http://www.uasd.edu).

Modificar o Eliminar un enlace

  14

Page 15: Manual de Front Page

5/16/2018 Manual de Front Page - slidepdf.com

http://slidepdf.com/reader/full/manual-de-front-page-55ab50e10e308 15/31

 

Curso de Front Page

Al igual que lo hemos creado, primero lo seleccionas y a continuación pulsas Hipervínculo en la barra de herramientas, en el menú Insertar. También con el botón derecho del ratón enPropiedades de hipervínculo. Una vez en la ventana correspondiente puedes modificar la direccióndel enlace externo o marcador. Si quieres eliminarlo borras el campo Dirección URL y el enlacequedará suprimido

Ejecutar un enlace

Podemos comprobar el funcionamiento de nuestros enlaces, e incluso si estamos conectados acceder a otras páginas web, pulsando el botón derecho del ratón y eligiendo Seguir hipervínculo.

Por supuesto también podemos comprobar el funcionamiento completo de nuestra página y susenlaces abriendo el navegador y cargando en él la página de inicio de nuestra web desde el disco (eneste caso PAGINA1), o desde el menú Archivo – Vista previa en el explorador e incluso desde el

icono de la barra de herramientas  Comprobareis que antes de visualizar la página debemosguardarla. Esto es recomendable hacerlo de vez en cuando, incluso si podemos con navegadoresdiferentes (a veces nos llevaremos sorpresas).

 Práctica 10

 Modifica algunos de los enlaces creados.

 Elimina uno de ellos.

Comprueba el funcionamiento de los mismos.

Formularios

Un formulario es un conjunto de campos que se utiliza para reunir información sobre la gente quevisita un sitio Web. Los visitantes rellenan un formulario escribiendo texto, haciendo clic en los

 botones de opción y casillas de verificación, y seleccionando opciones de los menús desplegables.Tras rellenar el formulario, los visitantes envían los datos que han introducido, que pueden

 procesarse de varias formas en función del controlador de formulario definido.Aunque suele ser una opción avanzada, que no todos los usuarios precisan, este editor permiteinsertar los siguientes elementos:

Cuadro de texto de una línea: permite al usuario introducir datos (texto o números) en una solalínea.

Cuadro de texto con desplazamiento: lo mismo que el anterior pero en varias líneas. Casilla de verificación: se debe elegir una o varias opciones entre las que se nos presentan. Botón de opción: se elige una sola opción excluyente de las demás. Menú desplegable: seleccionar entre una lista de opciones. Botón de comando: icono rectangular que al pulsar sobre él se produce una acción (enviar el

formulario, borrar). Se sitúa siempre al final del formulario.

Para introducir estos elementos en primer lugar debemos crear el formulario desde la opción delmenú Insertar - Formulario. Se crea una zona rectangular delimitada por una línea de guiones enla que se puede insertar, a continuación, cualquiera de los elementos anteriores.

  15

Page 16: Manual de Front Page

5/16/2018 Manual de Front Page - slidepdf.com

http://slidepdf.com/reader/full/manual-de-front-page-55ab50e10e308 16/31

 

Curso de Front Page

Cuando se inserta cualquiera de estos elementos aparece un rectángulo discontinuo que nos indica ellímite del formulario. Éste irá creciendo mientras seguimos insertando elementos. Además de estoselementos podremos incorporar texto que acompañe a cada uno de ellos y explique su contenido.

Conforme vayamos creando los campos, podemos modificarlos pulsando sobre con el botón derechoy eligiendo Propiedades del campo de formulario. También podemos incluir condiciones que

debe cumplir el usuario a la hora de rellenarlo. Esto lo haremos desde la opción Validación decampo de formulario.

Por último, si deseamos modificar condiciones generales del formulario debemos acudir a la opciónPropiedades de formulario.

Partimos del supuesto más habitual: nuestra página web está colocada en el servidor de nuestro proveedor. Obviamente para que un formulario funcione correctamente debe existir algo que locontrole y realice alguna operación con los datos que el usuario introduce. Este tipo de controldepende, en muchos casos, del proveedor que albergue nuestra página y de lo que deseemos hacer con los datos (recibirlos por correo, incluirlos en una base de datos, devolverlos al usuario, etc.). La

mayor parte de controles precisan consentimiento de nuestro proveedor de Internet y será él deacuerdo a nuestros intereses quien nos ofertará la opción mejor.

En muchas ocasiones, simplemente desearemos recibir los datos que el visitante ha rellenado y paraello será suficiente el buzón de correo electrónico. En este caso elegiremos las siguientes opcionesen Propiedades de formulario

En el campo Enviar a escribimos ladirección de nuestro correo.

Esta forma de recibir los datos no funciona bien con todos los navegadores, por ello siempre serámejor negociar con nuestro proveedor de Internet la posibilidad de poner un CGI y en tal casodeberemos insertar en nuestra página el código correspondiente.

 Práctica 11

Crea un nuevo documento, guárdalo con el nombre PAGINA3.

 Escribe como título de la página: ENCUESTA SOBRE TUS LECTURAS.

 Intenta introducir un formulario como el que sigue a continuación o con otros campos que se te

ocurran.

  16

Page 17: Manual de Front Page

5/16/2018 Manual de Front Page - slidepdf.com

http://slidepdf.com/reader/full/manual-de-front-page-55ab50e10e308 17/31

 

Curso de Front Page

 Recuerda que para modificar cada una de los campos debes pulsar el botón derecho y elegir 

 Propiedades de campo de formulario o Validar campo de formulario, según lo que desees

cambiar.

   Añade al final de la página: Volver a la página de inicio y crea los enlaces correspondientes

entre ésta y la PAGINA1 y viceversa.

Guarda todos los cambios. Abre el navegador y comprueba el funcionamiento de tu primera

 página web.

Otras utilidades de FrontPage.

Imprimir la página

Tres son las opciones relacionadas con imprimir una página. Las tres se encuentran en el menú

Archivo:

Configurar Página: permite modificar el encabezado o pie y los márgenes de la página. Vista preliminar: nos muestra en pantalla la página tal como se imprimiría. Imprimir: permite indicar las páginas que queremos imprimir, así como seleccionar la

impresora adecuada.

Enviar la página actual por correo electrónico

La opción Archivo - Enviar permite, a través de la pantalla de composición de mensajes deOutlook, mandar la página HTML en el espacio destinado a escribir el mensaje.

  17

Page 18: Manual de Front Page

5/16/2018 Manual de Front Page - slidepdf.com

http://slidepdf.com/reader/full/manual-de-front-page-55ab50e10e308 18/31

 

Curso de Front Page

 Práctica 12

 Modifica la configuración de una de las páginas que tienes y observa en Vista preliminar como

quedaría al imprimirla.

Frames y Mapas activos

Los Frames o Marcos consisten en dividir la pantalla dos o más cuadros; en cada uno de ellos semuestra una página independiente, de modo que una de ellas puede permanecer fija (a modo deíndice) mientras en la otra se muestra un resultado diferente al pulsar en los diferentes enlaces queofrece la primera.

La forma de realizarlo es muy simple: vamos a Archivo-Nuevo-Página- pulsamos en la pestañaPáginas de marcos y elegimos una de las plantillas prediseñadas. En cada una de estas plantillas, laexploración entre marcos ya está configurada. En la plantilla de Titular y contenidos, por ejemplo, alhacer clic en un hipervínculo del marco Contenidos, a la izquierda, aparece una página en el marco

 principal, a la derecha.Una vez que se ha creado la página de marcos a partir de una plantilla, lo único que el usuario debehacer es definir la página inicial que desea mostrar en cada marco. Es posible seleccionar una páginaexistente o crear una nueva página. A continuación la página se puede modificar directamente en sumarco.

  18

Page 19: Manual de Front Page

5/16/2018 Manual de Front Page - slidepdf.com

http://slidepdf.com/reader/full/manual-de-front-page-55ab50e10e308 19/31

 

Curso de Front Page

 

TITULAR 

CONTENIDOS

Mapas activos: son imágenes GIF o JPG en las que podemos crear varios enlaces endiferentes partes de ellas, es decir al pulsar con el ratón en sus diferentes partes nos envía a destinosdistintos. No los vamos a tratar en este curso, aunque puedes recabar más información sobre ellos enel Manual resumido de HTML.

Con lo visto hasta el momento, conocemos las posibilidades del editor FontPage y los elementos básicos para la creación de páginas web. En la actualidad las páginas web son cada día máscomplejas e incluyen elementos y efectos logrados con lenguajes de programación (Java, JavaScript,etc.). También existe la posibilidad de insertar otros componentes más complejos (ActiveX, etc.).

  19

Page 20: Manual de Front Page

5/16/2018 Manual de Front Page - slidepdf.com

http://slidepdf.com/reader/full/manual-de-front-page-55ab50e10e308 20/31

 

Curso de Front Page

El objetivo de este curso no es formar profesionales del diseño de páginas web, sino facilitar losrecursos básicos para poder comenzar a diseñar nuestras páginas personales o las del centro escolar.Con lo visto hasta este momento se pueden realizar trabajos muy dignos que progresivamenteiremos perfeccionando con los progresos que realicemos en nuestro aprendizaje sobre este tema yayudados por nuevas y sofisticadas herramientas de edición.

Creación de una supuesta página de un centro

Pasos a tener en cuenta

Hasta ahora hemos trabajado en la descripción del editor, pero, desde luego, hay otras acciones previas y posteriores que debemos tener en cuenta al realizar nuestra página web. Yo sugiero lossiguientes pasos, seguro que se os ocurrirá alguno más, para la elaboración de la página del centro:

1- Visualizar otras páginas web especialmente de centros educativos; todas nos darán ideas (encuanto a forma y contenidos). Si el diseño se adapta totalmente, o gran medida, a nuestros gustos o

deseos podemos copiar su código HTML y variar los contenidos.

2- Determinar los contenidos a presentar y el formato de presentación de los mismos: texto, audio,imagen, etc. Implicar a las personas que deban elaborar esos contenidos. Tampoco podemos olvidar los destinatarios principales de nuestra página.

3- Realizar un mapa de la página (en papel), distribuyendo contenidos y enlaces. Navegaciónsencilla.

4- Preparación de los recursos a insertar: imágenes, textos, líneas de separación, botones, fondos,sonidos, etc.). Para ello utilizaremos los elementos necesarios: programas de dibujo, scaners, tarjetasde sonido, digitalizadoras de vídeo, etc.

5- Diseño de los diversos archivos HTML (utilizando el editor)

6- Comprobación de la página en nuestro computador.

7- Envío al servidor y comprobación en línea.

8- Mantenimiento y renovación permanente de la página, implicando a las personas que aportaninformación.

 Práctica 14

 A partir de los conocimientos del programa que ya tienes y de recursos y esquema previamente

 preparado, vamos a crear una página web, formada por 4 sencillos archivos HTML. El esquema

 será el de la página siguiente.

 Los recursos se encuentran todos en la carpeta  HTML. Se pretende simplemente que repasemos

todas las posibilidades del editor, incluyendo: tablas, imágenes, listas, enlaces, formularios, etc.,

 De este diseño puedes modificar todo lo que desees y hacerla a nuestro gusto, con datos de nuestros

centro, siempre sabiendo que no deja de ser una página de prueba.

20

Page 21: Manual de Front Page

5/16/2018 Manual de Front Page - slidepdf.com

http://slidepdf.com/reader/full/manual-de-front-page-55ab50e10e308 21/31

 

Curso de Front Page

Una página web es algo vivo y puede ir creciendo poco a poco.

 Ejercicios Propuestos:

Ejercicio1 

1.  Abre FrontPage.

2. Crear una página web en la carpeta Mis documentos\Mis ejercicios con el nombre

indice.htm. La página tendrá de título Indice (no uses acentos).

3. Guardar y cerrar la página web.

4. Abre la página web Indice.

5. Visualiza la página web.

6. Vuelve a cerrarla.

7. Cierra FrontPage.

Ejercicio2 

1. Abre FrontPage.

2. Crea una página web en la carpeta Mis documentos\Mis ejercicios\ con el nombre

 pagina_ppal.htm. La página tendrá de título Principal.

3. Guarda y cierra la página web.

4. Abre la página web pagina_ppal.htm.

5. Visualiza la página web.

6. Vuelve a cerrarla.

7. Cierra FrontPage.

Ejercicio 3: Crear la estructura del sitio web. 

1. Crea un nuevo sitio web.

2. Crea la siguiente estructura:

nombre del sitio: WebProfesional

carpetas:

21

Page 22: Manual de Front Page

5/16/2018 Manual de Front Page - slidepdf.com

http://slidepdf.com/reader/full/manual-de-front-page-55ab50e10e308 22/31

 

Curso de Front Page

grupo

productos

servicios

3. Crea una subcarpeta llamada imágenes para cada carpeta.

 

Ejercicio 4: Importar los dos archivos que creamos en el ejercicio del primer tema. 

Los archivos que creamos eran indice.htm y pagina_ppal.htm, y deberían estar en una

Carpeta llamada Mis ejercicios.

1. Importa los archivos a la carpeta raíz del sitio.

2. Inspecciona el sitio y comprueba que los archivos se han creado correctamente.

3. Ponle el nombre Web Profesional al sitio web.

4. Cierra el sitio web y cierra FrontPage.

Ejercicio 5: Crear la estructura del sitio web. 

1. Crea un nuevo sitio web.

2. Crea la siguiente estructura:

nombre del sitio: WebProfesional

carpetas:

grupo

productos

servicios

3. Crea una subcarpeta llamada imágenes para cada carpeta.

Ejercicio 6: Importar los dos archivos que creamos en el ejercicio del primer tema. 

Los archivos que creamos eran indice.htm y pagina_ppal.htm, y deberían estar en una

carpeta llamada Mis ejercicios.

1. Importa los archivos a la carpeta raíz del sitio.

2. Inspecciona el sitio y comprueba que los archivos se han creado correctamente.

3. Ponle el nombre WebProfesional al sitio web.

4. Cierra el sitio web y cierra FrontPage.

Ejercicio 7.

  22

Page 23: Manual de Front Page

5/16/2018 Manual de Front Page - slidepdf.com

http://slidepdf.com/reader/full/manual-de-front-page-55ab50e10e308 23/31

 

Curso de Front Page

 

1. Abre el sitio web WebProfesional. Abre el archivo pagina_ppal.htm.

2. Introduce el texto siguiente y formatéalo para que quede una página como la que te

mostramos a continuación:

¡Bienvenido!Sunrisei le ofrece soluciones tecnológicas innovadoras.

Nuestros productos y servicios se adaptan a sus necesidades,en cualquier momento y lugar, con unos precios irresistibles,

fuera de toda competencia.

Sunrisei es la respuesta de a las necesidades de telefonía de su empresa.

 

No lo dude y llámenos.

 

 © Copyright 1997 - 2003 Grupo Sunrisei. Todos los derechos reservados.

 Agradeceremos sus comentarios y sugerencias al webmaster.

 

3. Cierra el archivo guardando los cambios.

Ejercicio 8.

 

1. Abre el sitio web WebProfesional. Abre el archivo indice.htm.

2. Introduce el texto siguiente y formatéalo para que quede una página como la que te

mostramos a continuación:

CONTENIDO

Indice

Grupo Sunrisei

Productos

Servicios

Contactar 

 

3. Guarda el archivo y cierra FrontPage.

23

Page 24: Manual de Front Page

5/16/2018 Manual de Front Page - slidepdf.com

http://slidepdf.com/reader/full/manual-de-front-page-55ab50e10e308 24/31

 

Curso de Front Page

Ejercicio 9: Introducir imágenes. 

1.  Añade al sitioWebPersonal la página favoritos.htm que encontrarás en la carpetas

ejercicios del curso.

 Añade también a la carpeta imagenes las imágenes parque.jpg, curne1.gif .

2. Ponle a la página favoritos.htm el fondo parque.gif  

3. Cambia el color del texto de negro a blanco.

4. Cambia el título de la página por FAVORITOS.

5. Guarda los cambios realizados en el sitio WebPersonal y cierralo.

Ejercicio 10: Introducir imágenes. 

1. Abrir el sitio web WebProfesional.

2. Abrir el archivo pagina_ppal.htm e introducir las imágenes Curne1.jpg y

Curne2.jpg después del texto.

3. Guardar y cerrar el archivo.

4. Poner a la página indice.htm un fondo. Cambiar el color del texto a

blanco.

5. Guardar y cerrar el archivo.

8. Cerrar la web.

24

Page 25: Manual de Front Page

5/16/2018 Manual de Front Page - slidepdf.com

http://slidepdf.com/reader/full/manual-de-front-page-55ab50e10e308 25/31

 

Curso de Front Page

PRACTICA DE FRONT PAGE:

I- Diseñar un sitio Web con las siguientes características:

1- Crear un nuevo sitio web con el nombre de Championzone

2- En la estructura del sitio web a la página principal (index.html), agregar las siguientes páginas:Información Sobre Nuestra Empresa, Productos, Galería de Fotos, Vínculos.

3- En La pagina del Index.html dar un doble clic y digitar el siguiente texto:

 

(Imagen czlogo.gif)

Welcome to Championzone!

Take a look around to learn more about our sporting goods, see pictures of our merchandise,

and look at our Sports Photo Gallery (Dé una vuelta para saber más acerca de nuestros artículos deportivos, vea lasimágenes de los productos y no se pierda la Galería de fotografías de deporte).

 

(Imagen frontpage.gif)

(Crear Vínculo a: http://www.microsoft.com/frontpage)

4- Volver al área de Exploración, y presionar un doble clic sobre la pagina: Información

sobre nuestra Empresa, y digitar el siguiente texto:Información sobre nuestra empresa:

Desde su fundación en 1974, Championzone se ha convertido en una de lasprincipales empresas en el mundo del vestuario futbolístico y los artículosdeportivos. Nuestras líneas de producto incluyen numerosas marcasdestacadas que proporcionan artículos para un amplio abanico de líneas comocalzado, equipamiento y accesorios.

5- Volver al área de Exploración y darle un doble clic a la pagina Productos, y luegoDigitar el siguiente texto e insertar las imágenes correspondientes:

PRODUCTOS: 

ELIJA ENTRE UNA AMPLIA GAMA DE ARTÍCULOSDEPORTIVOS

Desde su fundación en 1974, Championzone se ha convertido en una de lasprincipales empresas en el mundo en prendas para fútbol y artículos

deportivos. Nuestras líneas de producto incluyen numerosas marcas

25

Imagen: FPTutor002.gif 

Page 26: Manual de Front Page

5/16/2018 Manual de Front Page - slidepdf.com

http://slidepdf.com/reader/full/manual-de-front-page-55ab50e10e308 26/31

 

Curso de Front Page

destacadas que proporcionan artículos para un amplio abanico de líneas, comocalzado, equipamiento y accesorios. Nuestra tienda en Internet está abierta las24 horas del día y podemos garantizarle que todos los productos son deexcelente calidad.

 

Artículos de oferta esta semana:

• Bolsa del equipo

• Balón del equipo

• Sombrero del equipo

• Bolsa pequeña

• Red de portería

6- Volver al área de Exploración de Front Page, y darle un doble clic a la pagina Galería deFotografías, y digitar el texto siguiente y colocar las imágenes correspondientes:

Sports Photos (Fotografías de deportes)

 Please enjoy our Sports Photo Gallery. Click each thumbnail to see the full-sizepicture, and then use your Web browser’s Back button to return to this page(Esperamos que disfrute con nuestra Galería de fotografías de deportes. Hagaclic en las miniaturas para ver las fotografías ampliadas y utilice el botón Atrásde su explorador Web para regresar a esta página).

Crear una galería de fotografías

World Wide Web tiene una interfaz gráfica, y es muy frecuente que muchos sitios Web popularesmuestren fotografías y otro tipo de gráficos. El precio de los escáneres y las cámaras digitales se hareducido enormemente y muchos servicios de revelado ofrecen fotografías en CD-ROM para que

 pueda compartirlas en línea.

Hemos visto que con FrontPage colocar imágenes en páginas Web es muy fácil. En esta parte de lalección, vamos a crear una galería de fotografías en línea.

Las galerías de fotografías son páginas Web que contienen un conjunto de imágenes organizadassiguiendo un diseño específico. Para el sitio Web Championzone, crearemos una galería defotografías relacionadas con el deporte.

FrontPage 2002 incluye varios diseños para organizar fotografías. En este tutorial, vamos a utilizar 

el diseño Horizontal.

  26

 

Imagen: FPTutor001gif 

Page 27: Manual de Front Page

5/16/2018 Manual de Front Page - slidepdf.com

http://slidepdf.com/reader/full/manual-de-front-page-55ab50e10e308 27/31

 

Curso de Front Page

Para modificar la página Galería de fotografías

1. En la barra de herramientas, haga clic en la flecha a la derecha de Panel de alternanciay, a continuación, haga clic en Lista de carpetas.

2. Haga doble clic en Galería de fotografias.html en lista de carpetas para abrir la página.

3. Haga clic en la flecha a la derecha de Panel de alternancia y, a continuación, en Lista decarpetas para ocultarla.

4. Presione ENTRAR dos veces para crear un poco de espacio.

5. En el menú Insertar, haga clic en Componente Web.

6. En el panel de la izquierda, haga clic en Galería de fotografías.

7. En el panel de la derecha, seleccione la primera opción de diseño (el diseño Horizontal) y haga

clic en Finalizar.

8. Automáticamente se abre el cuadro de diálogo Propiedades de la galería de fotografías.

9. Haga clic en Agregar y, a continuación, haga clic en Imágenes de archivos.

10. Haga clic en el archivo FPTutor003, mantenga presionada la tecla Ctrl y, a continuación, hagaclic en FPTutor006.

De este modo seleccionará los archivos FPTutor003, FPTutor004, FPTutor005 yFPTutor006.

11. Haga clic en Abrir y, a continuación, en Aceptar.

12. En la barra de herramientas estándar, haga clic en el botón Guardar para guardar los cambiosde la página Galería de fotografías.

13. En el cuadro de diálogo Guardar archivos incrustados, haga clic en Aceptar.

7- Regresar al área de Exploración y darle un doble clic a la pagina de Vínculos, y digitar el siguiente párrafo:

Vínculos a sitios de deportes. (Agregar Efectos)

MSN Sports .

www.sports.yahoo.com

http://espndeportes.espn.go.com

  27

Page 28: Manual de Front Page

5/16/2018 Manual de Front Page - slidepdf.com

http://slidepdf.com/reader/full/manual-de-front-page-55ab50e10e308 28/31

 

Curso de Front Page

  28

Page 29: Manual de Front Page

5/16/2018 Manual de Front Page - slidepdf.com

http://slidepdf.com/reader/full/manual-de-front-page-55ab50e10e308 29/31

 

Curso de Front Page

PRACTICA FINAL DE FRONT PAGE:

II- Diseñar un sitio Web con las siguientes características:

1- Crear un nuevo sitio web con el nombre de Imágenes de mi Ciudad

2- En la estructura del sitio web a la página principal (index.html), agregar las siguientes páginas:Información Sobre Nuestra Ciudad, Galería de Fotos, Vínculos.

3- En La pagina del Index.html dar un doble clic y digitar el siguiente texto y luego colocar un color detema de fondo:

San Francisco de Macorís, Ciudad del Jaya

(Agregar Efectos a este titulo)

Bienvenidos al Web Site Imágenes de San Francisco de Macorís, donde encontrarasinformación de nuestra ciudad y también podrás disfrutar al ver imágenes propias de laciudad y zonas aledañas a ella.

• Principal. (Crear un Hipervínculo al Index.html)

• Información Sobre Nuestra Ciudad. (Crear un Hipervínculo a dicha pagina)

• Galería de Fotos. (Crear un Hipervínculo a dicha pagina)

• Vínculos. (Crear un Hipervínculo a dicha pagina)

4- Volver al área de Exploración, y presionar un doble clic sobre la pagina: Informaciónsobre nuestra Empresa, y digitar el siguiente texto:

INFORMACIÓN SOBRE NUESTRA CIUDAD(Colocar el titulo en Marquesina)

San Francisco de Macorís: es la tercera ciudad más grande en la República Dominicana. (Crear Vinculo a http:///www.dominicana.com.do) Tiene un rol activo en lahistoria Dominicana, ya que es conocida, sino como la mayor, como una de lasciudades políticamente más activas. Está ubicada en la parte nordeste de laisla, en la región del Cibao (Serie 56). Es el pueblo natal de la escritora Hilma

Contreras y de el mundialmente famoso, Porfirio Rubirosa.

  29

 

Nota: Colocar Imagen

del Ayuntamiento

Page 30: Manual de Front Page

5/16/2018 Manual de Front Page - slidepdf.com

http://slidepdf.com/reader/full/manual-de-front-page-55ab50e10e308 30/31

 

Curso de Front Page

El nombre "San Francisco de Macorís" viene de una fusión del nombre de "LaOrden Franciscana", que es una organización religiosa de España que llegó alterritorio mientras estaba siendo colonizado, y del nombre antiguo del territorioque era MACORIX.

Geografía

• Altitud: 117 metros.

• Latitud: 19º 18' N

• Longitud: 070º 15' O

Duarte, la perla del Jaya

DATOS ESTADÍSTICOS: La provincia Duarte forma parte de la RegiónNordeste, junto a las provincias María Trinidad Sánchez, Sánchez Ramírez,Salcedo, y Samaná. Extensión superficial: 1.605 km2. Población: 283,805

habitantes. 143,108 hombres. 140,697 mujeres.MUNICIPIOS:

San Francisco de Macorís, Arenoso, Castillo, Hostos (distrito municipal), Pimentel, Villa Riva, Las Guáranas, AguaSanta del Yuna (distrito municipal), Cristo Rey del Guaraguao (distrito municipal), La Peña (distrito municipal), yCenoví (distrito municipal).

5- Volver al área de Exploración de Front Page, y darle un doble clic a la página Galería deFotografías, y digitar el texto siguiente y colocar las imágenes correspondientes. (Ayuntamiento,Catedral Santa Ana, Curne1, Curne2, Loma Quita espuela, Montecito Jetsemani, Parque, ClubEsperanza)

Esperamos que disfrute con nuestra Galería de fotografías de ciudad. Haga clic en las miniaturas para ver lasfotografías ampliadas y utilice el botón Atrás de su explorador Web para regresar a esta página.

Fotos de imágenes de la ciudad: (Colocar un efecto a este titulo)

6- Regresar al área de Exploración y darle un doble clic a la pagina de Vínculos, y digitar el siguiente párrafo:

Vínculos a sitios de San Francisco de Macorís. (AgregarEfectos a este titulo)

• ConeXionMacorisana.COM (Crear Hiperviculo a http://www.conexionmacorisana.com/)

  30

 

Nota: Colocar aquí la galería deimágenes de fotos de la ciudad.

Page 31: Manual de Front Page

5/16/2018 Manual de Front Page - slidepdf.com

http://slidepdf.com/reader/full/manual-de-front-page-55ab50e10e308 31/31

 

Curso de Front Page

• MacorisanoPresente (Crear Hiperviculo a http://www.macorisanopresente.com/)

• FrancoMacorisanos (Crear Hiperviculo a http://www.francomacorisanos.com/)

• Serie56 (Crear Hiperviculo a http://www.serie56.com/)

• SFMacoris :: Brutalmente Joven (Crear Hiperviculo a http://www.sfmacoris.com/)

  31