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
Curso de Front Page
Introducción Introducción a FRONTP FRONTPAGE AGE
Vamos a ver ver una una pequeña introducción a FrontPage 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
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 a esto el usuario sólo tiene que concentrarse en el diseño de su Web sin necesidad de saber programar. programar. No obstante, obstante, un usuario usuario avanzado avanzado pued puedee usar las característic características as avanzadas avanzadas de FrontPage para hacer sitios Web más complejos. Una página Web es un documento que puede ser visualizado con un navegador de Internet. Un sitio Web es un conjunto de páginas Web relacionadas entre sí. FrontPage nos permite diseñar y modif modific icar ar tanto tanto el sitio sitio como como cada cada pági página na indiv individu idual alme mente nte,, y nos nos ayud ayudaa en su edic edició iónn y mantenimiento.
FrontPage form formaa parte parte del del paqu paquet etee de aplic aplicac acio ione ness Office, y com compart partee mucha uchass de las las caracterí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 FrontPage y 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 de forma temporal gráficos y textos de distintos documentos de Office y de otros programas, y pegarlos pegarlos en un docume documento nto de Office. Office. Por Por ejemplo, ejemplo, puede puedess copiar copiar textos textos de un docu documento mento de Word y pegarlos en una página Web de FrontPage, y después abrir una hoja de cálculo de Excel , y copiar una tabla de Excel a Word. Otras funciones, como el corrector ortográfico, funcionan de la misma manera o de una forma casi idéntica en todas las funciones. Por otra parte, los documentos de Word pueden ser convertidos a páginas Web. Gracias a esto podemos podemos crear páginas páginas Web a partir de docu documento mentoss que ya tengamos tengamos escritos escritos en Word de una forma fácil y sencilla. Esto también se aplica a otra clase de documentos como hojas de cálculo de Excel, 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. Permite crear y dar formato a páginas Web en HTML (Lenguaje de marcado de hipertexto) trabajando en una 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 de Office. 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 podemos ver: ver: 1 3
Curso de Front Page
1 2 3 4
5
6 7
1. 2. 3. 4. 5. 6. 7.
Barra de título Barra de menús desplegables. Barras de herramientas Estándar. Barras de herramientas Formato. Espacio en blanco para diseñar nuestra página Barra de vistas Barra de estado
Al iniciar el programa se muestra una página en blanco. Existen unas plantillas definidas y asistentes que 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 con la 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 en nuestra página podemos configurar algunas propiedades que afectan a toda ella. Accedemos pulsando en Archivo Propiedades (o con el botón derecho de rató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
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úmero de veces que se repetirá. Fondo: Imagen, o color que vamos a colocar como fondo de nuestra página. Podemos escribir su nombre y ruta o examinar en el disco y elegir del mismo. También podemos elegir los colores del texto, enlaces, etc.
Márgenes: Podemos modificar margen superior e izquierdo. Esto no afecta fondo de la página.
al
Los márgenes derecho e inferior estarán en función de la resolució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 permite elegir el idioma de la página, en nuestro caso el Español. De esta forma los sistemas de búsqueda avanzados, permiten detectar el idioma 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
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 el que aparecerá en el navegador). Completaremos el campo Título de la página, Cambiar y pulsando escribiendo el nombre con el que queremos que aparezca la página en el navegador, y después elegimos la ubicación y el Nombre de archivo tipo y el Páginas (normalmente Web),
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 de letra y tamaño (entre 7 diferentes), estilo (negrita, cursiva, subrayado), color, ajustes, escribir de izquierda. 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
Curso de Front Page
La opción Insertar - Símbolo permite incluir en el documento algún carácter especial que quizá no encuentres en el teclado. Si hemos elegido un determinado formato para nuestro texto y deseamos volver al texto normal, lo hacemos con Formato - Quitar formato. Por supuesto también podemos utilizar las opciones (cortar, copiar, pegar y deshacer 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 el mismo 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 al mundo 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ún sea 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
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
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 ello debes situarte en la posición deseada y pulsar Insertar - Línea horizontal . Observa que aparece una línea. Si deseas modificar su aspecto, colócate sobre ella y pulsa el botón derecho del ratón, elige Propiedades de la línea horizontal , aparece el cuadro siguiente en el que puedes modificar su aspecto.
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 en nuestra página. Observa que al seleccionarla aparece rodeada por botones que te permiten cambiar su tamaño. También puedes modificar algunas de sus características pulsando el botón derecho y eligiendo
Propiedades de imagen En la pestaña General puedes cambiar la imagen, eligiendo otra del disco, el formato, el tipo de presentación: transparente o entrelazada (se muestra como en capas que se superponen). También en el formato JPEG podemos modificar la calidad. 9
Curso de Front Page
Las representaciones alternativas permiten incluir imágenes en baja resolución o texto que se mostrará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 (importante al combinar con texto), espaciado alrededor, 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
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.) y simplemente debemos indicar el archivo que deseamos incluir. Archivo: (desde el menú Insertar) Permite incluir archivos previamente preparados y que tengamos 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 abre una nueva ventana en la que vemos la estructura de la página HTML: HEAD, TITLE, BODY y demás etiquetas para presentar textos, líneas e imágenes. Desde ahí puedes editar tu página modificando 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 en nuestras páginas web. Las tablas permiten crear una estructura de celdas en las que distribuir los contenidos 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 llamadaslíneas ). 11
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 debemos marcar número de columnas y filas, en el segundo aparece una ventana para completar ese dato y algún otro que veremos a continuación. En cualquier caso una vez que aparece la tabla podremos modificar 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 al fondo o una imagen de fondo y los colores del borde. También permite modificar el tamaño de la tabla (en pixels o porcentaje). También podremos, desde el menú Tabla: insertar filas o columnas, seleccionar una fila, celda o columna, 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 Bachiller Diplomado en Empresariales Lic. En Contabilidad
LUGAR Liceo Ercilia Pepin Universidad Autónoma de S.D UASD
FECHA DE FINALIZACION 30 de julio de 1998 15 junio 1999 22 julio 2002 12
Curso de Front Page
………………..
………………..
………………..
HISTORIAL DOCENTE DESTINO Instituto del Cibao CompuXpres SystemTec ………………..
LOCALIDAD Santiago San Francisco San Francisco ………………..
FECHA INICIAL 01/09/2000 01/11/2000 01/06/2001 ………………..
FECHA FINAL 30/05/2001 30/11/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 , o haciendo clic en el icono . Cualquiera de estas opciones nos llevan a la ventana Crear Hipervínculo : Podemos establecer hipervínvulo a:
el
Páginas abiertas: enlaces a páginas creadas con anterioridad. WWW: páginas que se hallan en Internet u otras utilidades como correo, FTP, etc. Página nueva: enlaces a páginas todavía no creadas. El campo Marco de destino se refiere a páginas con marcos (frames) y en principio no lo utilizaremos. Enlaces internos en el mismo archivo HTML. Para realizar un enlace interno en nuestro documento, es necesario, en primer lugar, señalar el destino. Esto lo hacemos situándonos en el lugar de destino y creando un marcador ( Insertar - Marcador ). Debemos poner un nombre y aceptar. Del mismo modo borraremos los existentes. Observarás que el marcador aparece con subrayado discontinuo. Los marcadores permitirán acceder directamente a ellos a través de los enlaces. 13
Curso de Front Page
Para crear un enlace a estos destinos (es decir un texto o imagen que al pulsar sobre él nos lleve directamente a la posición del marcador) seleccionamos el texto o imagen que queremos vincular al marcador, 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ágina abierta 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 su realización se sigue el mismo procedimiento que en los casos anteriores. Se selecciona el texto o imagen donde pulsaremos para enlazar, y si sabemos la dirección la escribimos en el campo Direcció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 ya continuación escribimos la dirección correspondiente. Cuando alguien visite la página y quiera mandar un e-mail a esa dirección, al pulsar en ese enlace se le abrirá su programa de correo con la direcció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
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 en Propiedades de hipervínculo. Una vez en la ventana correspondiente puedes modificar la dirección del enlace externo o marcador. Si quieres eliminarlo borras el campo Dirección URL y el enlace quedará 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 sus enlaces abriendo el navegador y cargando en él la página de inicio de nuestra web desde el disco (en este 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 debemos guardarla. Esto es recomendable hacerlo de vez en cuando, incluso si podemos con navegadores diferentes (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 que visita 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 permite insertar los siguientes elementos:
Cuadro de texto de una línea : permite al usuario introducir datos (texto o números) en una sola lí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 del menú Insertar - Formulario . Se crea una zona rectangular delimitada por una línea de guiones en la que se puede insertar, a continuación, cualquiera de los elementos anteriores.
15
Curso de Front Page
Cuando se inserta cualquiera de estos elementos aparece un rectángulo discontinuo que nos indica el límite del formulario. Éste irá creciendo mientras seguimos insertando elementos. Además de estos elementos 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 derecho y 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 de campo de formulario . Por último, si deseamos modificar condiciones generales del formulario debemos acudir a la opción Propiedades 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 lo controle y realice alguna operación con los datos que el usuario introduce. Este tipo de control depende, 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 de acuerdo a nuestros intereses quien nos ofertará la opción mejor. En muchas ocasiones, simplemente desearemos recibir los datos que el visitante ha rellenado y para ello será suficiente el buzón de correo electrónico. En este caso elegiremos las siguientes opciones en Propiedades de formulario
En el campo Enviar a escribimos la direcció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 caso deberemos 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
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 de Outlook, mandar la página HTML en el espacio destinado a escribir el mensaje. 17
Curso de Front Page
Práctica 12
Modifica la configuración de una de las páginas que tienes y observa en Vista prelimina r 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 se muestra 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 que ofrece la primera. La forma de realizarlo es muy simple: vamos a Archivo-Nuevo-Página- pulsamos en la pestaña Páginas de marcos y elegimos una de las plantillas prediseñadas. En cada una de estas plantillas, la exploración entre marcos ya está configurada. En la plantilla de Titular y contenidos, por ejemplo, al hacer 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 debe hacer es definir la página inicial que desea mostrar en cada marco. Es posible seleccionar una página existente o crear una nueva página. A continuación la página se puede modificar directamente en su marco.
18
Curso de Front Page
TITULAR
CONTENIDOS
Mapas activos : son imágenes GIF o JPG en las que podemos crear varios enlaces en diferentes partes de ellas, es decir al pulsar con el ratón en sus diferentes partes nos envía a destinos distintos. No los vamos a tratar en este curso, aunque puedes recabar más información sobre ellos en el 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ás complejas 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
Curso de Front Page
El objetivo de este curso no es formar profesionales del diseño de páginas web, sino facilitar los recursos 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 progresivamente iremos perfeccionando con los progresos que realicemos en nuestro aprendizaje sobre este tema y ayudados 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 los siguientes 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 (en cuanto 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ón sencilla. 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, tarjetas de 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 aportan informació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
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
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
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
Curso de Front Page
Ejercicio 9: Introducir imágenes.
1.
Añade al sitio WebPersonal 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
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 las imá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 las principales empresas en el mundo del vestuario futbolístico y los artículos deportivos. Nuestras líneas de producto incluyen numerosas marcas destacadas que proporcionan artículos para un amplio abanico de líneas como calzado, equipamiento y accesorios. 5- Volver al área de Exploración y darle un doble clic a la pagina Productos, y luego Digitar el siguiente texto e insertar las imágenes correspondientes: Imagen: FPTutor002.gif
PRODUCTOS: ELIJA ENTRE UNA AMPLIA GAMA DE ARTÍCULOS DEPORTIVOS Desde su fundación en 1974, Championzone se ha convertido en una de las principales empresas en el mundo en prendas para fútbol y artículos deportivos. Nuestras líneas de producto incluyen numerosas marcas 25
Curso de Front Page
destacadas que proporcionan artículos para un amplio abanico de líneas, como calzado, equipamiento y accesorios. Nuestra tienda en Internet está abierta las 24 horas del día y podemos garantizarle que todos los productos son de excelente calidad. Artículos de oferta esta semana: •
Bolsa del equipo
•
Balón del equipo
•
Sombrero del equipo
•
Bolsa pequeña
•
Red de portería Imagen: FPTutor001gif
6- Volver al área de Exploración de Front Page, y darle un doble clic a la pagina Galería de Fotografí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-size picture, 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. Haga clic en las miniaturas para ver las fotografías ampliadas y utilice el botón Atrás de 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 populares muestren fotografías y otro tipo de gráficos. El precio de los escáneres y las cámaras digitales se ha reducido 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 la lecció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 organizadas siguiendo un diseño específico. Para el sitio Web Championzone, crearemos una galería de fotografí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
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 alternancia y, 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 de carpetas 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, haga clic en FPTutor006. De este modo seleccionará los archivos FPTutor003, FPTutor004, FPTutor005 y FPTutor006. 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 cambios de 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
Curso de Front Page
28
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 de tema 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 encontraras información de nuestra ciudad y también podrás disfrutar al ver imágenes propias de la ciudad 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)
Nota: Colocar Imagen del Ayuntamiento
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 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 la historia Dominicana, ya que es conocida, sino como la mayor, como una de las ciudades políticamente más activas. Está ubicada en la parte nordeste de la isla, 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
Curso de Front Page
El nombre "San Francisco de Macorís" viene de una fusión del nombre de "La Orden Franciscana", que es una organización religiosa de España que llegó al territorio mientras estaba siendo colonizado, y del nombre antiguo del territorio que 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ón Nordeste, 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, Agua Santa del Yuna (distrito municipal), Cristo Rey del Guaraguao (distrito municipal), La Peña (distrito municipal), y Cenoví (distrito municipal). 5- Volver al área de Exploración de Front Page, y darle un doble clic a la página Galería de Fotografías, y digitar el texto siguiente y colocar las imágenes correspondientes. (Ayuntamiento, Catedral Santa Ana, Curne1, Curne2, Loma Quita espuela, Montecito Jetsemani, Parque, Club Esperanza)
Esperamos que disfrute con nuestra Galería de fotografías de ciudad. Haga clic en las miniaturas para ver las fotografí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)
Nota: Colocar aquí la galería de imágenes de fotos de la ciudad.
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.
(Agregar
Efectos a este titulo) •
ConeXionMacorisana.COM (Crear Hiperviculo a http://www.conexionmacorisana.com/) 30
