CREAR WEBS SOCIOEDUCATIVAS CON FRONTPAGE 2003mural.uv.es › paumopor › Pau › Pagina (de los)...

CREACIÓN DE PÁGINAS WEBS CON FRONTPAGES 2003 1 de 63

CCRREEAARR WWEEBBSS SSOOCCIIOOEEDDUUCCAATTIIVVAASS CCOONN FFRROONNTTPPAAGGEE 22000033

PPrrooff.. JJoosséé LLuuiiss UUlliizzaarrnnaa

CCuurrssoo 22000066//0077


1. Introducción al FrontPage : El hipertexto

Aunque con HTML se pueden crear páginas web, es mejor utilizar una herramienta más potente que esté diseñada específicamente con ese objetivo. Es el caso de los edito-res web como FrontPage, que permite el diseño y edición de páginas webs sin necesidad de conocer un lenguaje de programación específico como HTML, ASP, PHP, JAVA, etc.

Las páginas web están basadas en los llamados hipertextos. Estos, al contrario de lo que ocurre con el contenido de un documento escrito, que para su total comprensión debe comenzarse a leer por el principio y llegar hasta el final, no necesitan que siga-mos este procedimiento natural de lectura (lectura lineal), sino que establecen saltos (hipervínculos) de forma que cada vez que encontramos alguno de ellos podemos ir a otro sitio de la página si perder por ello compresión de lo que se está leyendo.

FrontPage provee de las herramientas necesarias para hacer más sencillo y visual la elaboración de hipertextos en soporte web sin necesidad de escribir ni una línea de código.

Hasta hace poco las páginas web había que crearlas escribiendo el código necesario en html, asp, php, etc. y comprobar el resultado en un navegador. Pero con el tiempo fueron apareciendo editores web del tipo “wysiwyg” (what you see is what you get), que signifi-ca que lo que se ve es lo que se obtiene. FrontPage , en cualquiera de sus versiones, pro-vee de esta herramienta en un entorno de trabajo muy parecido a Word con una apa-riencia que recuerda bastante al servidor de correo Outlook.

Es decir, FrontPage permite visualizar y trabajar directamente sobre los resultados finales de la web, manteniendo la posibilidad de trabajar con el código, opción necesaria cuando se trabajan con opciones más avanzadas en la creación de páginas web como, por ejemplo, javasscript o flash.

En definitiva, FrontPage es una herramienta completa de desarrollo de proyectos web que nos será muy útil a la hora de elaborar una web temática o corporativa.

2.Crear una web en Front003

Una vez activado FrontPage, se abre la ventana de trabajo de la Figura 1 (versión 2003).


Figura 1: Ventana principal de FrontPage 2003

Esta muestra diferentes elementos y herramientas para crear o importar páginas y sitios webs. De entre todos los elementos el Panel de tareas, que se encuentra a la de-recha, nos permitirán abrir una nueva página, un sitio web de un página o elegir entre una serie de plantillas el diseño de nuestro sitio web.

Para seleccionar un sitio web de una página se procederá de la siguiente forma:

a) En el apartado Nuevo sitio Web del Panel de tareas, seleccionar la poción Sitio web de una página …

b) En la ventana que se abre (Figura 2) seleccionar, si no lo está, la pestaña Gene-ral.

c) Si se encuentra seleccionado el tipo Sitio Web de una página, pulsar sobre el bo-tón Aceptar.

Aprende más Si no se mostrara el Panel de tareas, hay que pulsar en el menú Archivo la opción Nuevo. Con esta ac-ción, aparece el mencionado Panel de tareas


d) Se muestra una pestaña denominada Sitio Web, dos carpetas denominadas _private e _images y la página Web inicial denominada index.htm (el nombre de esta página es necesario mantenerlo para que los navegadores de Internet la re-conozcan como la página inicial de nuestro sitio web).

e) En el apartado Descripción se muestra un comentario explicativo del tipo de si-tio que se va a crear.

Figura 2: Ventana para seleccionar el tipo de web

Práctica 1ª: Comenzar el diseño del sitio web

Antes de comenzar las prácticas, colocar los archivos comprimidos de prácticas, que se encuentran en el sitio web indicado por el profesor, en la carpeta Sitios webs que se hallan en la carpeta Mis documentos del ordenador del alumno.

• Abrir el programa FrontPage si todavía no se ha hecho. • Descomprimir los archivos de prácticas que se encuentran en formato rar.

1. En el apartado Nuevo sitio Web del Panel de tareas, seleccionar la opción Sitio web de una página …

2. Comprobar que se encuentra seleccionado el tipo Sitio Web de una página y pulsar sobre el botón Aceptar.


3. Se muestra el nuevo sitio creado con las carpetas por defecto (Figura 3).

Figura 3; Sitio web con las carpetas y archivos creados por defecto

4. En la barra Contenido de:, situada en la parte superior de la ventana de FrontPage debajo de la pestaña Sitio Web, se puede observar que, por defecto, el sitio web se crea en la carpeta: Mis documentos\Mis sitios Webs. Lo que aparece después de la última barra (\) es el nombre que FrontPage asigna a nuestro website (por de-fecto misitio).

5. Para cambiar el nombre del sitio web creado, hay que activar el cuadro de diálogo Configuración de sitio (Figura 4) pulsando con el botón derecho del ratón sobre la barra Contenido de: y en el panel de opciones que se despliega eligiendo la opción Configuración del sitio …

6. La pestaña activa en este cuadro de diálogo es la General. Dentro de ella aparece un cuadro de texto con el rótulo Nombre del sitio web:. Escribir el nombre practi-caweb

7. Podemos observar como en la barra Contenido de: aparece el nombre que acabamos de darle.


Figura 4: Cuadro de diálogo y pestaña activa para escribir el nombre de nuestro sitio web

Podemos ver la estructura del sitio web haciendo clic sobre el icono , que se encuentra en la Barra de Herramientas debajo del menú Insertar. Este icono abre y cierra una partición de la pantalla en la que podemos ver la lista de carpetas y ar-chivos que forman la web. La estructura básica es la siguiente:

Figura 5; Carpeta y archivo que crean FrontPage por de-fecto

Aprende más

Al principio aparece la ubicación que hemos dado a la página y des-pués dos carpetas vacías. La llamada images es para guardar todas las imágenes y la llamada _private es para guardar información que no se publicarán en Internet.

Por supuesto podemos cambiar el nombre de las carpetas, igual que crear todas las que queramos utilizando cualquiera de las técnicas que sirven para hacerlo en el Explorador de Windows.

Figura 5: Carpetas y archivo index.htm que se genera al crear un sitio web

3. Nuestra primera página.

Cuando creamos un sitio web directamente se genera la página index.htm (Figura 5 enmarcada en rojo). Esta página en blanco es muy importante, puesto que debe ser la primera de cualquier sitio web. Es la página por defecto que buscan los navegadores para mostrarla. En consecuencia, es la primera que tenemos que editar y construir.


Para crear una página en blanco dentro de la carpeta del sitio web, pulsaremos sobre la flecha de la izquierda del botón Nuevo de la Barra de Herramientas. Se despliega entonces un panel de opciones de la que elegiremos Pagina…

Con esta acción se abre el cuadro de diálogo que se muestra en la Figura 6 denominado Plantillas de página y activa dentro de él la plantilla Pagina normal. Pulsaremos entonces el botón Aceptar y se mostrará en la ventana de diseño de FrontPage una hoja en blan-co con el nombre por defecto pagina_nueva_1.htm (Figura 7)

Figura 6: Cuadro de diálogo para seleccionar una plantilla de página web

Figura 7: Página inicial en blanco


Al guardar la página, lo que podemos hacer antes de introducir ninguna información, FrontPage abre el cuadro de diálogo Guardar como (Figura 8), que nos va a pedir un nombre de archivo y un nombre para el título de página que aparecerá en la barra de título del Explorer y que, de hecho, supone introducir dentro del archivo de forma au-tomática el código html necesario para generarlo.

Figura 8: Cuadro de diálogo estándar “Guardar como”

Concretamente, al pulsar sobre el botón Guardar se nos abre la ventana que vemos arriba. En esta pantalla hay que escribir un Nombre de archivo en el cuadro de texto asociado y, si queremos cambiar en título de la página, que por defecto es Página nueva 1), pulsaremos sobre el botón que se muestra en la parte inferior rotulado como "Cam-biar titulo...". Con esta acción se abre un cuadro (Figura 9) en el que podemos sobre-escribir un nuevo nombre sobre el que aparece por defecto. Una vez escrito pulsare-mos sobre el botón Aceptar.

Figura 9: Cuadro de diálogo para establecer un titulo de página

Un nombre de archivo web tiene que respetar ciertas reglas:

• No se admiten espacios en blanco, sí guiones bajos. • Sólo se admiten letras del alfabeto inglés, es decir, no se admiten ni eñes ni

acentos. • Es mejor no utilizar mayúsculas porque en algunos servidores con el sistema ope-

rativo Unix dan problemas.


Sin embargo en el título, es decir, el rótulo que aparece en la línea de título del nave-gador y que acabamos de aprender a cambiarlo, se puede utilizar cualquier carácter: espacios, eñes, acentos, mayúsculas, etc.

4. Propiedades de página. Fondo

Tenemos que tener en cuenta que el diseño de páginas web, está pensado para mos-trarse en la pantalla del ordenador, por lo que es importante trabajar los colores y los fondos de página.

En FrontPage para acceder a las pro-piedades de cualquier elemento hay que pulsar con el botón derecho sobre ese elemento y seleccionar en la persiana de opciones que se abre Propiedades de la página. (Figura 10)

Si seleccionamos la pestaña Formato, vemos en primer lugar que podemos se-leccionar para el fondo de la página al-guna imagen. Si la imagen es pequeña, ésta se repite indefinidamente como fondo de la página.

Las otras opciones que vemos son: acti-var una marca de agua y seleccionar el color de fondo, de texto y de loa hiper-vínculos.

Para seleccionar un color pulsamos so-bre la flecha que aparece a la derecha de cada opción para desplegar la paleta de colores que se muestra en la figura 12.

Figura 11: Opciones de fondo de una página web


A la izquierda se muestra una paleta de 16 colores y aquellos que hemos ido guardando para utilizarlos en otras ocasiones.

Si pulsamos sobre más colores se nos abre la paleta ampliada (derecha) con 256 colores y donde podemos incluso persona-lizar el color.

Figura 12: Paleta de colores básica y ampliada

En la paleta básica podemos seleccionar uno de los colores que aparecen, pero si aún queremos más colores podemos pulsar sobre el botón Personalizado de la paleta am-pliada para abrir otra ventana con 16.000.000 de colores tal como muestra la figura 13.

En esta paleta podemos seleccionar un color y en la barra vertical de la derecha seleccionar el matiz de ese color. También se pueden me-morizar los colores si pensamos que vamos a utilizarlos posteriormente. Una vez seleccionado un color, aceptamos todas las ventanas y el color lo tenemos disponible en la página.

Figura 13: Paleta para personalizar el color

Hay que tener en cuenta que para el fondo se utilizan colores suaves donde pueda des-tacar el texto o colores oscuros con textos en color claro; aunque son más difíciles de manejar los fondos oscuros.

Por otra parte, las pestañas General y Avanzadas del cuadro de diálogo Propiedades de la página (Figura 11) permiten introducir ciertos parámetros como el titulo de la pági-na, sonido, marco, etc. En la pestaña Avanzadas se puede establecer los márgenes, es decir, la distancia vertical y horizontal desde donde comenzará a aparecer la informa-ción en la página web. (Figura 14).


Figura 13: Contenido de las pestaña General y Avanzadas de Propiedades de la página

Práctica 2ª: Dar formato a dos páginas 1. Introducir una imagen como fondo a la página index.htm. Para ello, pulsar con el bo-

tón derecho de ratón sobre de la página, seleccionar Propiedades de la página, y a continuación la pestaña Formato.

2. Activar la casilla Imagen de fondo y pulsar Examinar. Buscar en la carpeta de imágenes los archivos de prácticas el archivo fondomagrebayuda.jpg y pulsar Acep-tar.

Figura 15.- Resultado final de esta parte de la práctica


3. Crear un nuevo archivo pulsando sobre el botón Nuevo de la barra de herramientas 4. Colocar al archivo un color de fondo personalizado (valor hexadecimal

Hex={3F,42,5A}) y un color de texto que contraste con el fondo (sugerimos blanco). 5. Darle el titulo MagrebAyuda 6. Colocar el margen superior a 2 pixels y el izquierdo a 5 pixels. 7. Escribir el texto el siguiente texto centrado y con tipo Comic Sans MS:

MagrebAyuda

Organización no gubernamental de ayuda al inmigrante magrebí

La primera línea es de tamaño 7(36 pto) y está en negrita. La segunda 3 (12pto)

8. Añadirle como fondo el archivo fondo3 de la carpeta de imágenes de los archivos de prácticas

9. Guardar el archivo como quienes (FrontPage añade automáticamente la extensión .htm)

Figura 16.- Resultado final de esta parte de la práctica


APRENDE MÁS

Antes de continuar con la siguiente práctica, debemos seguir familiarizándonos con los botones y opcio-nes que presenta el escritorio de FrontPage. En este sentido, en la imagen superior (Figura 16) vemos un círculo rojo en la parte superior que enmarca el botón para activar/desactivar la lista de carpetas que aparecen a la derecha junto a todos los archivos que contiene el sitio web, es el llamado Panel de alter-nancia. Una vez activo podemos cambiar entre visualizar la Lista de carpetas o la Exploración de páginas del sitio web (círculo rojo inferior de la Figura 16), haciendo clic sobre la opción correspondiente (ro-deadas de un circulo en la parte inferior izquierda). El cuadrado verde engloba cuatro opciones de visionado de la página web que se encuentra activa:

• La opción Diseño es la forma de edición por defecto. Será la que elijamos a la hora de diseñar nuestra página.

• La opción Dividir permite visualizar en l aparte superior el código html y en el parte inferior la página tal como se mostrará en el navegador de Internet

• La opción Código visualiza el código html que FrontPage genera cuando estamos dise-ñando la página web

• Por ultimo, la opción Vista previa muestra la página tal que se vería en un navegador de Internet. Es interesante para comprobar como quedaría nuestra página una vez terminada

Práctica 3ª: Crear el resto de páginas del sitio web Con los conocimientos adquiridos, vamos a crear una pequeña web institucional, orien-tada publicitar los servicios que nuestra organización ofrece a los inmigrantes magre-bíes. Para ello pulsando sobre el icono de página nueva vamos a crear cinco páginas en blanco más y que vamos a necesitar según el siguiente mapa de la web:

Las primeras ya están creadas y guardadas con el nombre de index,htm y quienes.htm, las otras las guardaremos en minúsculas y sin acentos con los nombres: docu, servicios, formulario, imagenes y enlaces. Las cinco tendrán, en principio, el mismo formato que la de quienes.htm

MagrebAyuda • Quienes somos • Documentos útiles • Servicios que presta • Formulario de alta • Imágenes • Enlaces de interés

Documentos útiles

Servicios que presta

Formulario de alta

Imágenes Quiénes somos

Enlaces de interés


Crear las cinco páginas con el mismo fondo (fondo3.jpg) y el mismo rótulo de las si-guiente forma:

a. La página docu.htm se crea igual que quienes.htm b. La página servicios.htm se crea igual que quienes.htm c. La página enlaces.htm se crea igual que quienes.htm d. La página imagenes.htm se crea igual que quienes.htm e. La página formulario.htm debe diseñarse con la misma apariencia que quie-

nes.htm, pero al tener un contenido específico se procederá, para su creación, del siguiente modo: 1. Pulsar sobre el menú Archivo, elegir la opción Nuevo 2. Con esta acción se abrirá el panel de tareas Nuevo a la derecha de la ventana

de trabajo. Hacemos clic sobre la opción Más plantillas de páginas…

Figura 17.- Cuadro de plantillas con la selección de Plantilla de comentarios

3. En el cuadro de opciones que se abre (Figura 17) elegimos Formulario de co-mentarios y activamos la casilla Agregar tarea al sitio web. A continuación pulsamos el botón Aceptar.

4. A continuación se abre el cuadro de diálogo Guardar como, en la casilla Nombre del archivo escribimos el nombre formulario

5. Darle la misma apariencia de las otras páginas y dejarla, de momento, como está.

6. Pulsar sobre el botón Guardar para actualizar y fijar los cambios en nuestro sitio web.


5. Imágenes

Las imágenes en las páginas web funcionan de tres maneras. Como imágenes normales que insertamos dentro de la página, como imágenes que sirven de enlace y como imáge-nes que se utilizan como fondo de página o de tabla. En este apartado vamos a ver las imágenes normales y con enlace y en el siguiente apartado recordaremos como insertar imágenes de fondo de una página web.

Las imágenes funcionan más o menos como en Word. Pero, en las páginas web sólo se utilizan los formatos siguientes:

• GIF. Para dibujos e imágenes con pocos colores. (gif) • JPEG. Para fotos e imágenes que requieren más calidad. (jpg) • PNG. Formato originario de Microsoft para fotos e imágenes de cierta calidad y

de tamaño adecuado. (png)

Imagen jpg Imagen gif

Cualquier imagen que introduzcamos FrontPage lo transformará en uno de estos for-matos.

Recordemos que cualquier imagen que veamos en Internet podemos copiarla pulsando sobre la misma con el botón derecho del ratón y seleccionando, del panel de opciones que se despliega, la opción Copiar imagen como para guardarla en la carpeta oportuna. Si pulsamos sobre el botón Copiar, la imagen se guardará en el portapapeles, pudiendo insertarlas en nuestra página web.

5.1 Insertar imágenes

En el caso anterior, la imagen se inserta en el punto donde tengamos el cursor dentro de la página web. Para ello pulsamos en el menú Editar y eligiendo la opción Pegar. Si lo que queremos es insertar una imagen que tenemos guardada en una carpeta, desde el menú Insertar y eligiendo la opción Imagen. Esta opción permite insertar una imagen de clipart (prediseñada), una imagen de archivo, una galería de fotos e incluso una se-cuencia de vídeo. Si se trata de una imagen de archivo, también se puede insertar pul-sando sobre el icono que se encuentra en la Barra de herramientas.


Esta última opción nos abre el siguiente cuadro de diálogo (figura 18)

Figura 18.- Cuadro de diálogo para seleccionar una imagen

En este cuadro podemos elegir en buscar la imagen a insertar. Si en el modo de visio-nado (rodeado con un circulo rojo en la figura 18) tenemos activado el modo Vista pre-via, al pulsar sobre cualquiera de los nombres de archivo de la izquierda se nos muestra a la derecha la imagen que contiene.

5.2 Insertar gif animados

Hay imágenes que son estáticas, pero las imágenes GIF pueden ser animadas. Estas imágenes gif animadas se insertan exactamente igual que las otras, pero en modo de vista Diseño de la web no veremos la animación. Para verla tendremos que activa el mo-do de Vista Previa o abrir la página web en un navegador de Internet pulsando el bo-

tón de la Barra de herramientas.

En Internet hay muchos sitios que nos ofrecen GIF’s animados. Para encontrarlos sólo tenemos que ir a un buscador como Google y poner las palabras claves para que nos encuentre muchos sitios con este tipo de imágenes. Esto vale también para imágenes de fondo y de cualquier otro tipo.

5.3 Insertar imágenes prediseñadas

FrontPage también tiene sus propias imágenes. Para utilizarlas tenemos que operar del siguiente modo:


a) Hacer clic sobe la opción Imagen del menú Insertar y elegir Imágenes predise-ñadas...

b) Esto nos muestra, a la izquierda de la ventana de edición, el panel Imágenes pre-diseñadas (Figura 19).

Figura 19.- Panel de imágenes prediseñadas y cuadro de selección de clips

c) Para visualizar los clip prediseñados haremos clip sobre la opción Organizar clips… (rodeada por un circulo rojo en la figura 19), se abrirá entonces una ven-tana que mostrará las carpetas que contienen las colecciones de imágenes pre-instaladas llamada Galería multimedia de Microsoft.

d) Seleccionamos una carpeta y posteriormente en el marco de la derecha que muestra todas las imágenes que contiene la carpeta seleccionada, hacemos clic sobre la flecha de la imagen que queremos copiar

e) Con esta acción se nos abre un pequeño menú en la que la primera opción es Co-piar. Pulsamos sobre esa opción y la imagen elegida se nos colocará en el porta-papeles de Windows.

f) Lo último que tendremos que hacer es ir a nuestra página web y pulsar sobre el icono Pegar de la Barra de Herramientas o pulsar la secuencia de teclas <Ctrl>+V.

g) La imagen se inserta en la página que estamos editando.


5.4 Propiedades de las imágenes

Una vez que hemos insertado una imagen en la página web, podemos configurar sus pro-piedades pulsando, con el botón derecho del ratón, sobre la misma; de esta forma se desplegará un panel de opciones (Figura 20) del que seleccionaremos Propiedades de imagen.

Figura 20.- Panel de opciones de una imagen con las propiedades activadas

Con esta acción se nos abre el cuadro de diálogo Propiedades de imagen (Figura 21). Con tres pestañas: Apariencia, General y Vídeo en las que podemos ver las diferentes opciones que podemos utilizar en la imagen.

Figura 21.- Opciones de la pestaña Apariencia de propiedades de la imagen


En Apariencia podemos seleccionar:

• El ajuste respecto al texto • La alineación • El tamaño • El aspecto

En la pestaña General (Figura 22) podemos:

• Indicar el origen de la imagen. • Especificar el tipo de archivo (gif o jpg). • Colocar una etiqueta a la imagen en el cuadro Texto que aparecerá sobre fondo

amarillo cuando coloquemos el cursor sobre la imagen. Esto sólo se verá en vista previa o en el navegador y es muy útil para favorecer la navegación o facilitar in-formación al visitante.

Figura 22.- Opciones de la pestaña General de propiedades de la imagen

Cuando hacemos clic con el botón derecho del ratón sobre la imagen se abre un panel de opciones del que elegiremos la opción Abrir barra de herramientas de la imagen (Figura 23).

Figura 23.- Barra de herramientas para modificar una imagen

En general las opciones que tiene son las mismas que en PowerPoint. Así podemos, por ejemplo, hacer una imagen más clara u oscura o con mayor o menor contraste (botones enmarcados en rojo en la figura 23), Voltear la imagen con los botones enmarcados en


verde en la figura 23), establecer un color transparente de la imagen cuando esta es

gifal pulsar sobre el icono

Para activar esta última posibilidad seleccionamos el icono y pulsamos con el puntero encima del color que queremos hacer transparente y este desaparece (imágenes inferi-roes). Esto es útil muchas veces para integrar más las imágenes en el documento.

Imagen con fondo transparente Imagen sin fondo transparente 5.5 Crear mapas

Otras opciones de la barra de imagen es el grupo de iconos (botones en-marcados en amarillo en la figura 23) que permiten mapear la imagen. Esto quiere decir que, por ejemplo, si tenemos una imagen de España dividida en provincias, podemos con estas tres herramientas marcar el contorno de las provincias, y que cada contorno de cada provincia pueda vincularse a páginas diferentes.

Dependiendo del tipo de mapeo el área de hipervínculo se puede establecer de forma rectangular, circular o irregular. En cuanto mapeamos una parte de una imagen direc-tamente se nos abre la ventana de hipervínculos para establecer el salto a la página que queramos.

5.6 Otras aplicaciones para generar imágenes para la web

Aparte de utilizar imágenes creadas por otros, podemos crear las nuestras propias uti-lizando los programas de tratamiento de imágenes como Photoshop CS, PaintShop Pro o cualquiera de los muchos que hay en el mercado. Pero, si controlamos un poco el Offi-ce podemos utilizarlo también para crear imágenes, sólo tenemos que copiarlo y pegarlo en FrontPage desde PowerPoint o Publisher.

CREAR WEBS SOCIOEDUCATIVAS CON FRONTPAGE 2003mural.uv.es › paumopor › Pau › Pagina (de los)...

Documents

Transcript of CREAR WEBS SOCIOEDUCATIVAS CON FRONTPAGE 2003mural.uv.es › paumopor › Pau › Pagina (de los)...