Вы находитесь на странице: 1из 31

Curso de Front Page

ndice General
NDICE Introduccin a Front Page. Contenidos Bsicos de: Conceptos. Descripcin de Front Page. Propiedades de la Pgina. Mrgenes. Guardar la Pgina. Insercin de Elementos. Opcin Marquesina. Lneas. Imgenes. Ver o Editar la Pgina. Tablas. Enlaces (Hipervnculos). Formularios. Imprimir la Pgina. Frames y mapas activos. Ejercicios propuestos.

Curso de Front Page

Introduccin a FRONTPAGE

Vamos a ver una pequea introduccin a FrontPage. Vamos a aprender para qu sirve esta aplicacin y cmo nos puede ayudar a hacer desde una sencilla pgina Web hasta un sitio completo en Internet. Tambin haremos una pgina Web para que veamos lo fcil que puede llegar a ser.

Curso de Front Page

Qu es FrontPage y para qu sirve?

FrontPage es un programa con el cual podemos crear pginas Web de una forma visual. Gracias a esto el usuario slo tiene que concentrarse en el diseo de su Web sin necesidad de saber programar. No obstante, un usuario avanzado puede usar las caractersticas avanzadas de FrontPage para hacer sitios Web ms complejos. Una pgina Web es un documento que puede ser visualizado con un navegador de Internet. Un sitio Web es un conjunto de pginas Web relacionadas entre s. FrontPage nos permite disear y modificar tanto el sitio como cada pgina individualmente, y nos ayuda en su edicin y mantenimiento. FrontPage forma parte del paquete de aplicaciones Office, y comparte muchas de las caractersticas 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 servirn para FrontPage y viceversa. Algunas de las caractersticas que comparten son: Los mens y los iconos son similares entre cada aplicacin y realizan la misma funcin. El portapapeles de Office es ahora comn a todas las aplicaciones Office, y permite guardar de forma temporal grficos 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 Word y pegarlos en una pgina Web de FrontPage, y despus abrir una hoja de clculo de Excel, y copiar una tabla de Excel a Word. Otras funciones, como el corrector ortogrfico, funcionan de la misma manera o de una forma casi idntica en todas las funciones. Por otra parte, los documentos de Word pueden ser convertidos a pginas Web. Gracias a esto podemos crear pginas Web a partir de documentos que ya tengamos escritos en Word de una forma fcil y sencilla. Esto tambin se aplica a otra clase de documentos como hojas de clculo de Excel, ficheros de Access, etc. Descripcin del programa FrontPage es el editor de pginas Web que se incluye en la suite de Office de Microsoft. Permite crear y dar formato a pginas 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 podrs ver la apariencia real del formato y el diseo. 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 ver:
1 3

Curso de Front Page 1 2 3 4

6 7

1. 2. 3. 4. 5. 6. 7.

Barra de ttulo Barra de mens desplegables. Barras de herramientas Estndar. Barras de herramientas Formato. Espacio en blanco para disear nuestra pgina Barra de vistas Barra de estado

Al iniciar el programa se muestra una pgina en blanco. Existen unas plantillas definidas y asistentes que nos guan y que, a veces, pueden ser tiles. Si deseamos acceder a ellas elegimos Archivo Nuevo. Tambin podemos continuar la edicin de una pgina previamente guardada en el disco con la opcin Archivo - Abrir. En nuestro caso continuamos con la pgina en blanco. Propiedades de la pgina Antes de comenzar a insertar elementos en nuestra pgina podemos configurar algunas propiedades que afectan a toda ella. Accedemos pulsando en Archivo Propiedades (o con el botn derecho de ratn sobre ella). De la pestaa General se destacan: Ubicacin: lugar donde guardamos la pgina (sea en la red o en el disco). No lo podemos modificar. Ttulo: nombre de la pgina que aparecer en la pantalla del navegador.
4

Curso de Front Page

Ubicacin base: ruta en donde se buscarn los elementos que aparecen en la pgina. Sonido de fondo: archivo que contiene el sonido de fondo que se oir al cargar la pgina y nmero de veces que se repetir. Fondo: Imagen, o color que vamos a colocar como fondo de nuestra pgina. Podemos escribir su nombre y ruta o examinar en el disco y elegir del mismo. Tambin podemos elegir los colores del texto, enlaces, etc.

Mrgenes: Podemos modificar margen superior e izquierdo. Esto no afecta fondo de la pgina. Los mrgenes derecho e inferior estarn en funcin de la resolucin de pantalla que tenga la persona que acceda a nuestra pgina.

al

La pestaa Personalizar generalmente no debemos modificarla, si no nos lo indica nuestro servidor de Internet. La pestaa Idioma nos permite elegir el idioma de la pgina, en nuestro caso el Espaol. De esta forma los sistemas de bsqueda avanzados, permiten detectar el idioma de la pgina. En caso de no poner nada, Front Page detecta el idioma a travs del teclado o a partir de la configuracin local de usuario.

Guardar una pgina en el disco El procedimiento es el habitual en el entorno Windows, con la diferencia
5

Curso de Front Page

de que adems de solicitarnos la ruta y nombre del archivo, nos pide un ttulo para la pgina (es el que aparecer en el navegador). Completaremos el campo Ttulo de la pgina, pulsando Cambiar y escribiendo el nombre con el que queremos que aparezca la pgina en el navegador, y despus elegimos la ubicacin y el Nombre de archivo y el tipo (normalmente Pginas Web),

Prctica 1

Escribe como ttulo de tu pgina: Pgina personal Cambia el fondo de tu pgina. Prueba primero con un color plano. Elige ahora como fondo una imagen. Djala con el fondo que desees y gurdala con el nombre PAGINA1.

Insercin de elementos en una pgina Los principales elementos que podemos insertar en nuestra pgina son: Texto En el editor podemos escribir como en cualquier procesador utilizando el teclado y las herramientas bsicas de edicin de texto. La barra de formato nos ofrece acceso rpido 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 tamao (entre 7 diferentes), estilo (negrita, cursiva, subrayado), color, ajustes, escribir de izquierda. A derecha. O al revs, vietas numeradas o con iconos y sangras. Tambin podemos modificar el texto a travs del men Formato en sus opciones Fuente, Prrafo, Numeracin y vietas.

Curso de Front Page

La opcin Insertar - Smbolo permite incluir en el documento algn carcter 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 tambin podemos utilizar las opciones (cortar, copiar, pegar y deshacer o rehacer) de edicin de texto de la barra de herramientas estndar. As mismo, en el men Edicin contamos con las opciones Buscar y Reemplazar que tienen el mismo sentido y funcin que en cualquier editor de textos.

Prctica 2

Escribe algo similar a lo que viene a continuacin (completando con los datos que desees) y dndole formato a tu gusto (colores, tamaos, estilos, ajustes, etc.): MI PGINA WEB

Esta pgina pertenece a............................, estudiantes de Molina, que desea transmitir al mundo sus aficiones, gustos y preferencias. Tambin 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 caracterstica propia. Lo utilizaremos normalmente para hacer enumeraciones de lneas o prrafos. Activamos una lista con los botones (segn sea numerada o con vietas) y podemos modificar su formato en Formato - Vietas y numeracin.

Prctica 3 A continuacin del texto anterior escribe una lista similar a la siguiente, utiliza las vietas que prefieras. Puedes usar los botones de sangra para desplazar hacia la derecha los diversos epgrafes. CURRICULUM PROFESIONAL
7

Curso de Front Page

ENLACES INTERESANTES ENCUESTA

Marquesina Tambin es un texto especial que se desplaza dentro de un rectngulo. Para crearla nos situamos en el punto adecuado y pulsamos Insertar Componentes-Marquesina.

Curso de Front Page

Puedes modificar los diversos parmetros que aparecen. Siempre podrs volver a editarla con el botn derecho del ratn y Propiedades de marquesina. Prueba las diferentes opciones: Direccin, Velocidad, Comportamiento. Aviso: las marquesinas no funcionan en los navegadores de Netscape. Lneas Para separar los diversos apartados de nuestra pgina vamos a insertar lneas entre ellos. Para ello debes situarte en la posicin deseada y pulsar Insertar - Lnea horizontal. Observa que aparece una lnea. Si deseas modificar su aspecto, colcate sobre ella y pulsa el botn derecho del ratn, elige Propiedades de la lnea horizontal, aparece el cuadro siguiente en el que puedes modificar su aspecto.

Imgenes Para incluir imgenes en nuestro documento, nos situamos en el punto donde queremos colocarla (debajo del ttulo principal) y pulsamos el botn correspondiente o Insertar - Imagen. Seleccionamos en el disco la imagen que deseamos y el programa la colocar en el lugar sealado en nuestra pgina. Observa que al seleccionarla aparece rodeada por botones que te permiten cambiar su tamao. Tambin puedes modificar algunas de sus caractersticas pulsando el botn derecho y eligiendo Propiedades de imagen En la pestaa General puedes cambiar la imagen, eligiendo otra del disco, el formato, el tipo de presentacin: transparente o entrelazada (se muestra como en capas que se superponen). Tambin en el formato JPEG podemos modificar la calidad.
9

Curso de Front Page

Las representaciones alternativas permiten incluir imgenes en baja resolucin o texto que se mostrarn antes de su carga. Los hipervnculos permiten acceder a travs de esa imagen a otro lugar. Los estudiaremos posteriormente. La pestana Vdeo slo lo utilizaremos si insertamos algn vdeo (poco recomendable para una pgina web dado el tamao que ocupa). En Apariencia: Elegimos el tipo de alineacin (importante al combinar con texto), espaciado alrededor, borde y el tamao tanto en pixels como en porcentaje.

Prctica 4 Incluye lneas de separacin (de diferentes colores, grosores y tamaos) a continuacin del ltimo texto escrito. Sitate debajo del ttulo principal e inserta algunas imgenes (directorio HTML). Si deseas modificar alguna de sus caractersticas, pulsa el botn derecho del ratn y elige la opcin Propiedades de imagen. Incluye una marquesina con el texto: No olvides contestar nuestra encuesta. Vamos a aadir otra imagen al final del documento. Escribimos el siguiente texto: Pulsa en el buzn para enviar tus sugerencias Y a continuacin inserta una de las imgenes (Carpeta HTML). Modifica los parmetros que consideres oportuno (alineaciones y ajustes, tamao, espacio alrededor, etc.) para que quede bien en relacin al texto. Observa que la imagen insertada es una animacin.

Otros elementos Adems de lo visto hasta el momento Frontpage permite insertar otros elementos en las pginas. Dos de ellos son las Tablas y Formularios que veremos ms adelante en captulo independiente. Tambin 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 pgina web. Sonido de fondo: (desde Propiedades de pgina) 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 dinmicos que hacen posible ciertas tareas difciles de conseguir con otros mtodos. Algunos de ellos son los siguientes: Formulario de bsqueda: (desde el men Insertar - Componentes) Aade una programa de bsqueda de caracteres en nuestra pgina. Fecha: (desde el men Insertar) Incluye de forma automtica la fecha y hora de la ltima actualizacin. Inclusin programada de pgina): (desde el men Insertar Componentes) Introduce la direccin de una pgina web que se cargar en la nuestra. Otros componentes: Otras utilidades avanzadas como Java, ActiveX, animaciones de PowerPoint, etc.

Ver o editar la pgina en formato HTML. Para ver la pgina en formato HTML (como se guarda en el disco y se enva al servidor de Internet) debes pulsar la pestaa HTML, que se encuentra abajo a la izquierda en la lnea de estado. Se abre una nueva ventana en la que vemos la estructura de la pgina HTML: HEAD, TITLE, BODY y dems etiquetas para presentar textos, lneas e imgenes. Desde ah puedes editar tu pgina modificando el texto que en ella aparece. Al finalizar para volver al modo anterior pulsa la pestaa 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 presentacin de texto e imgenes en nuestras pginas web. Las tablas permiten crear una estructura de celdas en las que distribuir los contenidos de nuestro documento. Prctica 5

Comenzaremos una nueva pgina pulsando el icono Nuevo . Pon el color o fondo que desees y gurdala en el disco como PAGINA2. Escribe en ella:

CURRICULUM PROFESIONAL

Titulaciones acadmicas Trayectoria docente Volver a pgina de inicio

Inserta a continuacin una lnea de separacin (o una de las imgenes llamadas lneas).
11

Curso de Front Page

Sitate a continuacin de dichas lneas 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 nmero de columnas y filas, en el segundo aparece una ventana para completar ese dato y algn otro que veremos a continuacin. En cualquier caso una vez que aparece la tabla podremos modificar su aspecto con la opcin Propiedades de tabla (botn derecho del ratn)

Como puedes observar podemos cambiar los tamaos del borde, relleno y espaciado, poner color al fondo o una imagen de fondo y los colores del borde. Tambin permite modificar el tamao de la tabla (en pixels o porcentaje). Tambin 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.

Prctica 6

Realiza dos tablas similares a las que vienen a continuacin. Crea las filas que necesites y colores, alineacin, grosor de lneas, etc., segn tus gustos personales. ESTUDIOS REALIZADOS

TITULACION Bachiller Diplomado en Empresariales Lic. En Contabilidad

LUGAR Liceo Ercilia Pepin Universidad Autnoma 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 imgenes se encuentran en la carpeta HTML). Separa ambas por una o dos lneas.

Enlaces (Hipervnculos) Los enlaces son los elementos que nos van a permitir movernos de forma hipertextual por nuestra pgina y saltar a otras. Pueden realizarse a elementos internos o externos de nuestro documento. Podremos acceder a esta opcin de dos modos diferentes: desde el men Insertar - Hipervnculo, o haciendo clic en el icono . Cualquiera de estas opciones nos llevan a la ventana Crear Hipervnculo: Podemos establecer hipervnvulo a: el

Pginas abiertas: enlaces a pginas creadas con anterioridad. WWW: pginas que se hallan en Internet u otras utilidades como correo, FTP, etc. Pgina nueva: enlaces a pginas todava no creadas. El campo Marco de destino se refiere a pginas 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, sealar el destino. Esto lo hacemos situndonos en el lugar de destino y creando un marcador (Insertar - Marcador). Debemos poner un nombre y aceptar. Del mismo modo borraremos los existentes. Observars que el marcador aparece con subrayado discontinuo. Los marcadores permitirn acceder directamente a ellos a travs 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 posicin del marcador) seleccionamos el texto o imagen que queremos vincular al marcador, seleccionamos la pgina y en el campo Marcador elegimos el adecuado. Prctica 7

Crea dos destinos (uno delante del ttulo de la primera tabla y otro de la segunda), llmalos estudios y docencia, respectivamente. Ahora vamos a crear los enlaces a estos destinos. Para ello colcate al principio de la pgina y selecciona con el Mouse las palabras Titulaciones acadmicas, sigue el procedimiento explicado anteriormente para crear el enlace correspondiente al marcador estudios. Repite la operacin con la frase Trayectoria docente, asignndole el otro destino.

Enlaces internos a otro archivo de la misma pgina web. El procedimiento a seguir es exactamente igual que en el caso anterior: debemos elegir la pgina abierta que deseemos. Prctica 8

Selecciona ahora la frase Volver a pgina de inicio y busca como enlace el archivo guardado con el nombre pagina1. Sitate 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 pginas web, correo electrnico, FTP, etc. Para su realizacin se sigue el mismo procedimiento que en los casos anteriores. Se selecciona el texto o imagen donde pulsaremos para enlazar, y si sabemos la direccin la escribimos en el campo Direccin URL. Si no sabemos la direccin podemos navegar para encontrarla pulsando en el icono
, una vez que la tengamos tecleamos ALT + TAB para volver a FrontPage y la direccin de la pgina visitada se mostrar en el campo Direccin URL.

Si queremos hacer un enlace a una direccin de correo electrnico, pulsamos en el icono ya continuacin escribimos la direccin correspondiente. Cuando alguien visite la pgina y quiera mandar un e-mail a esa direccin, al pulsar en ese enlace se le abrir su programa de correo con la direccin de destino ya escrita. Prctica 9

En la pgina 2 selecciona el texto Ercilia Pepin. Crea con l un enlace externo a su pgina web (www.see.gov.do). Haz lo mismo con Universidad Autnoma 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 continuacin pulsas Hipervnculo en la barra de herramientas, en el men Insertar. Tambin con el botn derecho del ratn en Propiedades de hipervnculo. Una vez en la ventana correspondiente puedes modificar la direccin del enlace externo o marcador. Si quieres eliminarlo borras el campo Direccin URL y el enlace quedar suprimido Ejecutar un enlace Podemos comprobar el funcionamiento de nuestros enlaces, e incluso si estamos conectados acceder a otras pginas web, pulsando el botn derecho del ratn y eligiendo Seguir hipervnculo. Por supuesto tambin podemos comprobar el funcionamiento completo de nuestra pgina y sus enlaces abriendo el navegador y cargando en l la pgina 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 pgina debemos guardarla. Esto es recomendable hacerlo de vez en cuando, incluso si podemos con navegadores diferentes (a veces nos llevaremos sorpresas). Prctica 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 informacin sobre la gente que visita un sitio Web. Los visitantes rellenan un formulario escribiendo texto, haciendo clic en los botones de opcin y casillas de verificacin, y seleccionando opciones de los mens desplegables. Tras rellenar el formulario, los visitantes envan los datos que han introducido, que pueden procesarse de varias formas en funcin del controlador de formulario definido. Aunque suele ser una opcin avanzada, que no todos los usuarios precisan, este editor permite insertar los siguientes elementos:

Cuadro de texto de una lnea: permite al usuario introducir datos (texto o nmeros) en una sola lnea. Cuadro de texto con desplazamiento: lo mismo que el anterior pero en varias lneas. Casilla de verificacin: se debe elegir una o varias opciones entre las que se nos presentan. Botn de opcin: se elige una sola opcin excluyente de las dems. Men desplegable: seleccionar entre una lista de opciones. Botn de comando: icono rectangular que al pulsar sobre l se produce una accin (enviar el formulario, borrar). Se sita siempre al final del formulario.

Para introducir estos elementos en primer lugar debemos crear el formulario desde la opcin del men Insertar - Formulario. Se crea una zona rectangular delimitada por una lnea de guiones en la que se puede insertar, a continuacin, cualquiera de los elementos anteriores.

15

Curso de Front Page

Cuando se inserta cualquiera de estos elementos aparece un rectngulo discontinuo que nos indica el lmite del formulario. ste ir creciendo mientras seguimos insertando elementos. Adems de estos elementos podremos incorporar texto que acompae a cada uno de ellos y explique su contenido. Conforme vayamos creando los campos, podemos modificarlos pulsando sobre con el botn derecho y eligiendo Propiedades del campo de formulario. Tambin podemos incluir condiciones que debe cumplir el usuario a la hora de rellenarlo. Esto lo haremos desde la opcin Validacin de campo de formulario. Por ltimo, si deseamos modificar condiciones generales del formulario debemos acudir a la opcin Propiedades de formulario. Partimos del supuesto ms habitual: nuestra pgina 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 operacin con los datos que el usuario introduce. Este tipo de control depende, en muchos casos, del proveedor que albergue nuestra pgina 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 opcin mejor. En muchas ocasiones, simplemente desearemos recibir los datos que el visitante ha rellenado y para ello ser suficiente el buzn de correo electrnico. En este caso elegiremos las siguientes opciones en Propiedades de formulario

En el campo Enviar a escribimos la direccin 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 pgina el cdigo correspondiente. Prctica 11

Crea un nuevo documento, gurdalo con el nombre PAGINA3. Escribe como ttulo de la pgina: ENCUESTA SOBRE TUS LECTURAS. Intenta introducir un formulario como el que sigue a continuacin 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 botn derecho y elegir Propiedades de campo de formulario o Validar campo de formulario, segn lo que desees cambiar.

Aade al final de la pgina: Volver a la pgina 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 pgina web.

Otras utilidades de FrontPage. Imprimir la pgina Tres son las opciones relacionadas con imprimir una pgina. Las tres se encuentran en el men Archivo:

Configurar Pgina: permite modificar el encabezado o pie y los mrgenes de la pgina. Vista preliminar: nos muestra en pantalla la pgina tal como se imprimira. Imprimir: permite indicar las pginas que queremos imprimir, as como seleccionar la impresora adecuada.

Enviar la pgina actual por correo electrnico La opcin Archivo - Enviar permite, a travs de la pantalla de composicin de mensajes de Outlook, mandar la pgina HTML en el espacio destinado a escribir el mensaje.
17

Curso de Front Page

Prctica 12

Modifica la configuracin de una de las pginas que tienes y observa en Vista preliminar como quedara al imprimirla.

Frames y Mapas activos Los Frames o Marcos consisten en dividir la pantalla dos o ms cuadros; en cada uno de ellos se muestra una pgina 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-Pgina- pulsamos en la pestaa Pginas de marcos y elegimos una de las plantillas prediseadas. En cada una de estas plantillas, la exploracin entre marcos ya est configurada. En la plantilla de Titular y contenidos, por ejemplo, al hacer clic en un hipervnculo del marco Contenidos, a la izquierda, aparece una pgina en el marco principal, a la derecha. Una vez que se ha creado la pgina de marcos a partir de una plantilla, lo nico que el usuario debe hacer es definir la pgina inicial que desea mostrar en cada marco. Es posible seleccionar una pgina existente o crear una nueva pgina. A continuacin la pgina se puede modificar directamente en su marco.

18

Curso de Front Page

TITULAR

CONTENIDOS

Mapas activos: son imgenes GIF o JPG en las que podemos crear varios enlaces en diferentes partes de ellas, es decir al pulsar con el ratn en sus diferentes partes nos enva a destinos distintos. No los vamos a tratar en este curso, aunque puedes recabar ms informacin sobre ellos en el Manual resumido de HTML. Con lo visto hasta el momento, conocemos las posibilidades del editor FontPage y los elementos bsicos para la creacin de pginas web. En la actualidad las pginas web son cada da ms complejas e incluyen elementos y efectos logrados con lenguajes de programacin (Java, JavaScript, etc.). Tambin existe la posibilidad de insertar otros componentes ms complejos (ActiveX, etc.).

19

Curso de Front Page

El objetivo de este curso no es formar profesionales del diseo de pginas web, sino facilitar los recursos bsicos para poder comenzar a disear nuestras pginas 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 edicin. Creacin de una supuesta pgina de un centro Pasos a tener en cuenta Hasta ahora hemos trabajado en la descripcin del editor, pero, desde luego, hay otras acciones previas y posteriores que debemos tener en cuenta al realizar nuestra pgina web. Yo sugiero los siguientes pasos, seguro que se os ocurrir alguno ms, para la elaboracin de la pgina del centro: 1- Visualizar otras pginas web especialmente de centros educativos; todas nos darn ideas (en cuanto a forma y contenidos). Si el diseo se adapta totalmente, o gran medida, a nuestros gustos o deseos podemos copiar su cdigo HTML y variar los contenidos. 2- Determinar los contenidos a presentar y el formato de presentacin de los mismos: texto, audio, imagen, etc. Implicar a las personas que deban elaborar esos contenidos. Tampoco podemos olvidar los destinatarios principales de nuestra pgina. 3- Realizar un mapa de la pgina (en papel), distribuyendo contenidos y enlaces. Navegacin sencilla. 4- Preparacin de los recursos a insertar: imgenes, textos, lneas de separacin, botones, fondos, sonidos, etc.). Para ello utilizaremos los elementos necesarios: programas de dibujo, scaners, tarjetas de sonido, digitalizadoras de vdeo, etc. 5- Diseo de los diversos archivos HTML (utilizando el editor) 6- Comprobacin de la pgina en nuestro computador. 7- Envo al servidor y comprobacin en lnea. 8- Mantenimiento y renovacin permanente de la pgina, implicando a las personas que aportan informacin. Prctica 14 A partir de los conocimientos del programa que ya tienes y de recursos y esquema previamente preparado, vamos a crear una pgina web, formada por 4 sencillos archivos HTML. El esquema ser el de la pgina siguiente. Los recursos se encuentran todos en la carpeta HTML. Se pretende simplemente que repasemos todas las posibilidades del editor, incluyendo: tablas, imgenes, listas, enlaces, formularios, etc., De este diseo puedes modificar todo lo que desees y hacerla a nuestro gusto, con datos de nuestros centro, siempre sabiendo que no deja de ser una pgina de prueba.
20

Curso de Front Page

Una pgina web es algo vivo y puede ir creciendo poco a poco.

Ejercicios Propuestos:

Ejercicio1 1. Abre FrontPage. 2. Crear una pgina web en la carpeta Mis documentos\Mis ejercicios con el nombre indice.htm. La pgina tendr de ttulo Indice (no uses acentos). 3. Guardar y cerrar la pgina web. 4. Abre la pgina web Indice. 5. Visualiza la pgina web. 6. Vuelve a cerrarla. 7. Cierra FrontPage.

Ejercicio2 1. Abre FrontPage. 2. Crea una pgina web en la carpeta Mis documentos\Mis ejercicios\ con el nombre pagina_ppal.htm. La pgina tendr de ttulo Principal. 3. Guarda y cierra la pgina web. 4. Abre la pgina web pagina_ppal.htm. 5. Visualiza la pgina 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 imgenes 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 deberan estar en una Carpeta llamada Mis ejercicios. 1. Importa los archivos a la carpeta raz 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 imgenes 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 deberan estar en una carpeta llamada Mis ejercicios. 1. Importa los archivos a la carpeta raz 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 formatalo para que quede una pgina como la que te mostramos a continuacin:

Bienvenido!
Sunrisei le ofrece soluciones tecnolgicas 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 telefona de su empresa. No lo dude y llmenos.
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 formatalo para que quede una pgina como la que te mostramos a continuacin: CONTENIDO Indice Grupo Sunrisei Productos Servicios Contactar

3. Guarda el archivo y cierra FrontPage.

23

Curso de Front Page Ejercicio 9: Introducir imgenes. 1. Aade al sitio WebPersonal la pgina favoritos.htm que encontrars en la carpetas ejercicios del curso. Aade tambin a la carpeta imagenes las imgenes parque.jpg, curne1.gif. 2. Ponle a la pgina favoritos.htm el fondo parque.gif 3. Cambia el color del texto de negro a blanco. 4. Cambia el ttulo de la pgina por FAVORITOS. 5. Guarda los cambios realizados en el sitio WebPersonal y cierralo.

Ejercicio 10: Introducir imgenes. 1. Abrir el sitio web WebProfesional. 2. Abrir el archivo pagina_ppal.htm e introducir las imgenes Curne1.jpg y Curne2.jpg despus del texto. 3. Guardar y cerrar el archivo. 4. Poner a la pgina 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:


IDisear un sitio Web con las siguientes caractersticas:
1- Crear un nuevo sitio web con el nombre de Championzone 2- En la estructura del sitio web a la pgina principal (index.html), agregar las siguientes pginas: Informacin Sobre Nuestra Empresa, Productos, Galera de Fotos, Vnculos. 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 ms acerca de nuestros artculos deportivos, vea las imgenes de los productos y no se pierda la Galera de fotografas de deporte).

(Imagen frontpage.gif)

(Crear Vnculo a: http://www.microsoft.com/frontpage)

4- Volver al rea de Exploracin, y presionar un doble clic sobre la pagina: Informacin sobre nuestra Empresa, y digitar el siguiente texto: Informacin sobre nuestra empresa: Desde su fundacin en 1974, Championzone se ha convertido en una de las principales empresas en el mundo del vestuario futbolstico y los artculos deportivos. Nuestras lneas de producto incluyen numerosas marcas destacadas que proporcionan artculos para un amplio abanico de lneas como calzado, equipamiento y accesorios. 5- Volver al rea de Exploracin y darle un doble clic a la pagina Productos, y luego Digitar el siguiente texto e insertar las imgenes correspondientes:
Imagen: FPTutor002.gif

PRODUCTOS: ELIJA ENTRE UNA AMPLIA GAMA DE ARTCULOS DEPORTIVOS

Desde su fundacin en 1974, Championzone se ha convertido en una de las principales empresas en el mundo en prendas para ftbol y artculos deportivos. Nuestras lneas de producto incluyen numerosas marcas
25

Curso de Front Page

destacadas que proporcionan artculos para un amplio abanico de lneas, como calzado, equipamiento y accesorios. Nuestra tienda en Internet est abierta las 24 horas del da y podemos garantizarle que todos los productos son de excelente calidad.

Artculos de oferta esta semana:


Bolsa del equipo

Baln del equipo Sombrero del equipo Bolsa pequea Red de portera
Imagen: FPTutor001gif

6- Volver al rea de Exploracin de Front Page, y darle un doble clic a la pagina Galera de Fotografas, y digitar el texto siguiente y colocar las imgenes correspondientes:

Sports Photos (Fotografas de deportes) Please enjoy our Sports Photo Gallery. Click each thumbnail to see the full-size picture, and then use your Web browsers Back button to return to this page (Esperamos que disfrute con nuestra Galera de fotografas de deportes. Haga clic en las miniaturas para ver las fotografas ampliadas y utilice el botn Atrs de su explorador Web para regresar a esta pgina). Crear una galera de fotografas World Wide Web tiene una interfaz grfica, y es muy frecuente que muchos sitios Web populares muestren fotografas y otro tipo de grficos. El precio de los escneres y las cmaras digitales se ha reducido enormemente y muchos servicios de revelado ofrecen fotografas en CD-ROM para que pueda compartirlas en lnea. Hemos visto que con FrontPage colocar imgenes en pginas Web es muy fcil. En esta parte de la leccin, vamos a crear una galera de fotografas en lnea. Las galeras de fotografas son pginas Web que contienen un conjunto de imgenes organizadas siguiendo un diseo especfico. Para el sitio Web Championzone, crearemos una galera de fotografas relacionadas con el deporte. FrontPage 2002 incluye varios diseos para organizar fotografas. En este tutorial, vamos a utilizar el diseo Horizontal.
26

Curso de Front Page

Para modificar la pgina Galera de fotografas 1. En la barra de herramientas, haga clic en la flecha a la derecha de Panel de alternancia y, a continuacin, haga clic en Lista de carpetas. 2. Haga doble clic en Galera de fotografias.html en lista de carpetas para abrir la pgina. 3. Haga clic en la flecha a la derecha de Panel de alternancia y, a continuacin, 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 Galera de fotografas. 7. En el panel de la derecha, seleccione la primera opcin de diseo (el diseo Horizontal) y haga clic en Finalizar. 8. Automticamente se abre el cuadro de dilogo Propiedades de la galera de fotografas. 9. Haga clic en Agregar y, a continuacin, haga clic en Imgenes de archivos. 10. Haga clic en el archivo FPTutor003, mantenga presionada la tecla Ctrl y, a continuacin, haga clic en FPTutor006. De este modo seleccionar los archivos FPTutor003, FPTutor004, FPTutor005 y FPTutor006. 11. Haga clic en Abrir y, a continuacin, en Aceptar. 12. En la barra de herramientas estndar, haga clic en el botn Guardar para guardar los cambios de la pgina Galera de fotografas. 13. En el cuadro de dilogo Guardar archivos incrustados, haga clic en Aceptar.

7- Regresar al rea de Exploracin y darle un doble clic a la pagina de Vnculos, y digitar el siguiente prrafo:

Vnculos 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:


IIDisear un sitio Web con las siguientes caractersticas:
1- Crear un nuevo sitio web con el nombre de Imgenes de mi Ciudad 2- En la estructura del sitio web a la pgina principal (index.html), agregar las siguientes pginas: Informacin Sobre Nuestra Ciudad, Galera de Fotos, Vnculos. 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 Macors, Ciudad del Jaya


(Agregar Efectos a este titulo)

Bienvenidos al Web Site Imgenes de San Francisco de Macors, donde encontraras informacin de nuestra ciudad y tambin podrs disfrutar al ver imgenes propias de la ciudad y zonas aledaas a ella.

Principal. (Crear un Hipervnculo al Index.html)


Informacin Sobre Nuestra Ciudad. (Crear un Hipervnculo a dicha pagina) Galera de Fotos. (Crear un Hipervnculo a dicha pagina) Vnculos. (Crear un Hipervnculo a dicha pagina)

Nota: Colocar Imagen del Ayuntamiento

4- Volver al rea de Exploracin, y presionar un doble clic sobre la pagina: Informacin sobre nuestra Empresa, y digitar el siguiente texto: INFORMACIN SOBRE NUESTRA CIUDAD
(Colocar el titulo en Marquesina)

San Francisco de Macors: es la tercera ciudad ms grande en la Repblica 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 polticamente ms activas. Est ubicada en la parte nordeste de la isla, en la regin 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 Macors" viene de una fusin del nombre de "La Orden Franciscana", que es una organizacin religiosa de Espaa que lleg al territorio mientras estaba siendo colonizado, y del nombre antiguo del territorio que era MACORIX. Geografa
Altitud: 117 metros. Latitud: 19 18' N Longitud: 070 15' O

Duarte, la perla del Jaya DATOS ESTADSTICOS: La provincia Duarte forma parte de la Regin Nordeste, junto a las provincias Mara Trinidad Snchez, Snchez Ramrez, Salcedo, y Saman. Extensin superficial: 1.605 km2. Poblacin: 283,805 habitantes. 143,108 hombres. 140,697 mujeres. MUNICIPIOS:
San Francisco de Macors, Arenoso, Castillo, Hostos (distrito municipal), Pimentel, Villa Riva, Las Guranas, Agua Santa del Yuna (distrito municipal), Cristo Rey del Guaraguao (distrito municipal), La Pea (distrito municipal), y Cenov (distrito municipal). 5- Volver al rea de Exploracin de Front Page, y darle un doble clic a la pgina Galera de Fotografas, y digitar el texto siguiente y colocar las imgenes correspondientes. (Ayuntamiento, Catedral Santa Ana, Curne1, Curne2, Loma Quita espuela, Montecito Jetsemani, Parque, Club Esperanza)

Esperamos que disfrute con nuestra Galera de fotografas de ciudad. Haga clic en las miniaturas para ver las fotografas ampliadas y utilice el botn Atrs de su explorador Web para regresar a esta pgina. Fotos de imgenes de la ciudad: (Colocar un efecto a este titulo)

Nota: Colocar aqu la galera de imgenes de fotos de la ciudad.

6- Regresar al rea de Exploracin y darle un doble clic a la pagina de Vnculos, y digitar el siguiente prrafo:

Vnculos a sitios de San Francisco de Macors.


Efectos a este titulo)

(Agregar

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


30

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