21

Una vez determinadas las páginas necesarias y los enlaces entre ellas, se comenzarán a crearlas y guardarlas con un nombre de archivo y título adecuados al contenido de las

mismas. Esto es lo que prácticamente hemos hecho hasta el momento.

Ahora vamos a ver otra forma de crear la estructura de la web que nos permitirá la utilización de navegación automática. Para

ello pulsamos sobre el icono del pa-nel de Vistas. Este icono nos abre una ven-tana que nos muestra solamente la página index.htm

Si la web esta creada (como es el caso), podemos ir creando la estructura de páginas haciendo clic sobre la página en el panel de Lista de carpetas y, manteniendo el botón pulsado, arrastrarla hasta la página index.htm de la cuál dependen todas. En el ejemplo que estamos trabajando nos quedaría la siguien-te estructura:

Práctica 5ª: Crear la estructura de la web Con lo acabado de explicar, crear la estructura de la web. Como podemos ver por la imagen superior, las páginas aparecen con el título que tienen y no con el nombre que le hemos dado. Si hubiera alguna discrepancia entre el título de esta imagen y la que va apareciendo en la práctica, habrá que cambiar el titulo a la página en cuestión. Para ello procederemos de la siguiente forma:

22

a. Borrar el archivo enlazado creado en la estructura, pulsando sobre él con el botón derecho del ratón y eligiendo la opción Eliminar.

b. Hacer clic sobre el botón derecho del ratón sobre el nombre del archivo en cues-tión dentro del panel Lista de carpetas.

c. Elegir la opción Propiedades (al final de la lista). Con esta acción se abrirá el si-guiente cuadro de diálogo.

d. En el cuadro de texto Título escribir el título del archivo (no confundir con el nombre). Este título aparece en la barra de titulo del navegador.

e. Pulsar sobre Aplicar y luego Aceptar.

10. Los formularios Los formularios se utilizan en las páginas webs para recoger información del usuario de la misma. Éste puede escribir libremente en los campos que se le presentan o seleccionar una opción de las que se le ofrecen. Para crear un formulario, en cualquier parte de la página o dentro de una tabla, se hace desde el menú Insertar, eligiendo a continuación la opción Formulario. También podemos crear una página con el formato formulario tal como hemos hecho en formulario.htm. Si elegimos crear un formulario en una página a partir de la opción Formulario, se abre un panel de posibilidades. De todas ellas elegiremos Cuadro de texto, entonces en modo normal, nos aparece un rectángulo con una línea entrecortada como la siguiente:

El rectángulo primero en blanco es un campo de texto de una línea y luego hay dos boto-nes, uno de Enviar y otro de Restablecer, pulsando este último se borra todo lo que se tiene escrito en los cuadros de contenido del formulario. Las opciones disponibles para crear un formulario aparecen en la siguiente imagen:

23

El formulario hay que crearlo dentro del rectángulo con línea entrecortada. Para ello, al igual que en Word, se van creando los espacios necesarios y poniendo los títulos que que-ramos a los campos. Un ejemplo de formulario creado sobre una tabla de una celda, para poder darle un fondo diferente y destacarlo, podría ser el siguiente. Este ejemplo lo va-mos a utilizar para la siguiente práctica

Práctica 6ª: Adaptar y crear un formulario Vamos a utilizar la página que hemos creado y a la que hemos llamado formulario.htm. En ella modificaremos el cuestionario existente y añadiremos otro nuevo

En primer lugar, el cuestionario creado por defecto junto al archivo vamos adecuarlo a las necesidades de nuestra organización.

a. Para ello lo primero a hacer es cambiar el color del texto del cuestionario para que contraste con el fondo azul de la página. Marcamos todo el texto y seleccionamos el color blanco el botón de cambio de color de texto de la barra de herramientas.

b. Del texto inicial quitamos “nuestros productos”. c. Modificamos la lista desplegable haciendo doble clic sobre ella. A continuación se-

leccionamos una opción y pulsamos el botón Modificar. Con ello se abre el cuadro de diálogo Modificar opción, en Opción escribiremos el rotulo y pulsamos Aceptar

24

El cuadro desplegable debe quedar con las siguientes opciones:

d. Pulsar sobre el botón Guardar

Una vez concluida esta primera parte, vamos a introducir el cuestionario que aparece en la siguiente imagen en el mismo archivo, a continuación del cuestionario que acabamos de modificar.

25

e. El primer paso es crear el marco del cuestionario a continuación del anterior. Para ello colocamos el cursor del ratón en lugar donde queremos crear el cuestionario (a continuación de los botones de Enviar y Restablecer del cuestionario anterior) y pulsamos sobre el menú Insertar, elegimos la opción Formulario y, del menú des-plegable que aparece, de nuevo la opción Formulario.

f. Ahora es el momento de introducir los campos a crear eligiendo la opción corres-

podiente del menú Formulario. Para ello colocamos el puntero del ratón en el lugar donde se creará el campo, a continuación pulsamos sobre el menú Insertar, elegi-mos la opción Formulario y, del menú desplegable que aparece la opción deseada. A este respecto, los cinco primeros camps son cuadros de texto; el siguiente es un marco desplegable (al que habría que especificarle sus valores) y el último es un Área de texto. Como vemos, los botones de Enviar y Restablecer aparecen automá-ticamente.

g. Escribir el rótulo del cuestionario y el nombre de los campos tal como aparecen en

la imagen anterior. Con el tipo Comic Sans y los colores dorado y blanco.

h. Una vez creado el formulario tenemos que ir dándoles los nombres que queramos que aparezcan cuando recojamos los resultados. Para ello hay que ir por todos los campos uno a uno pulsando sobre ellos con el botón derecho del ratón y seleccio-nando Propiedades de … (cuadro de texto) (cuadro desplegable), (de cuadro de

26

área con texto). Por ejemplo, en los campos de textos se nos muestra la siguiente ventana:

Las imágenes superiores es lo que nos aparece al seleccionar el campo Nombre. En la pri-mera línea Nombre deberíamos poner Nombre, porque si no nos aparecerá como T1. Para poner los nombres de campo hay que respetar las normas de html, es decir, no se admiten acentos, ni eñes, ni espacios en blanco. Así, por ejemplo habría que escribir Apellidos, Dirección, etc.

i. Una vez puestos los nombres que queramos ver en los resultados, tenemos que pul-sar con el botón derecho sobre el formulario y seleccionar Propiedades de formu-lario. Nos aparece la siguiente ventana:

Si nosotros dejáramos el formulario con las opciones por defecto, sólo sería válido si nuestra web está colocada en un servidor que tiene extensiones de Frontpage. Po-dríamos poner una dirección de correo electrónico y elegir un archivo para que nos recoja los resultados. Lo que ocurre es que contratar las extensiones de Frontpage suele costar dinero y los servidores gratuitos no las tienen.

Importante:

27

Para poder utilizar un servidor gratuito o sin extensiones de Frontpage tenemos que pul-sar, dentro de Propiedades de formulario, Enviar a otra y luego el botón Opciones. Con ello abre las siguientes ventanas, cuyos campos hay que rellenarlos de la siguiente forma:

• Acción: Hay que poner mailto, dos puntos y la dirección de correo electróni-co donde se van a recibir los resultados. Todo esto sin espacios en blanco, acentos, ni eñes.

• Método: Se selecciona POST • Tipo de codificación: text/plain. Le estamos diciendo que nos lo mande en

texto sencillo, es decir, sin ningún tipo de formato.

j. Una vez hecho esto aceptamos todas las ventanas y el formulario está listo para funcionar.

k. Una vez que realicemos todos los pasos, hay que comprobarlo a ver cómo funciona.

Si no tenemos un programa cliente de correo instalado.

13. Crear tablas y las celdas

Para poder colocar los diferentes elementos que componen una página web, el recurso más utilizado son las tablas. Con Frontpage las tablas se generan igual que con Word. Es decir, pulsando el icono correspondiente y seleccionando el número de filas y colum-nas. También se puede crear desde el menú Tabla de la barra de tablas. En ellas, sino queremos que aparezcan los marcos de las celdas, los colocaremos como invisibles.

Cuando insertamos una tabla, hay que tener en cuenta que como las páginas web están diseñadas para monitores con resoluciones muy concretas. Las pantallas actuales más uti-lizadas tienen una medida de 800 píxeles de ancho, por lo que la medida tendrá que ser algo menor.

28

Práctica 7ª: Crear una tabla

Vamos a insertar, por ejemplo, una tabla de seis filas y dos columnas en la página enla-ces.htm para colocar dentro los enlaces a otras páginas relacionadas con la organización. Está se encontrará centrada respecto a los extremos de la pantalla. Para ello:

a. En primer lugar pulsaremos el icono de Inserta tabla o pulsando sobre le menú Tabla y eligiendo la opción Insertar / Tabla. Seleccionamos una tabla de seis filas y dos columnas, tal como se mues-tra en la imagen de la izquierda.

b. Con el botón derecho del ratón pulsamos dentro de la tabla creada y selecciona-mos Propiedades de tablas. Vemos que en la parte derecha de la ventana que se abre (imagen izquierda) aparece la op-ción Especificar ancho en píxeles o por-centaje. Si, por ejemplo, aplicamos un 100% de porcentaje, la tabla ocupará toda la pantalla (imagen de la izquierda), pero ocurrirá que los textos que ponga-mos y los gráficos se deformarán y no mantendrán el aspecto que queremos. En cambio, si elegimos un ancho fijo en píxeles (550), el tamaño de la tabla será siempre el mismo y se mantendrá el as-pecto que le demos. Esta última opción

es la más utilizada por esta razón. c. El siguiente paso será seleccionar la Alineación.

Conviene elegir el centrado, porque siempre se situará la tabla en esta posición. Si, por ejem-plo, alineamos a la izquierda puede ocurrir que si el usuario tiene una resolución de pantalla más grande quede un espacio vacío muy grande en la parte derecha.

d. En relación a los Bordes /Tamaño, si los pone-

mos a 0 la tabla no se verá en la vista previa.

29

e. También podemos dar ciertas propiedades a las celdas. En el cuadro de diálogo que se abre (imagen de la izquierda), podemos colocar el margen de celdas y espaciado entre ellas lo podemos probar poniendo por ejemplo 25 y viendo lo que pasa. También pode-mos elegir un color de fondo para la tabla (en nuestro caso blanco) diferente al de la página o una imagen.

f. Todo esto funciona igual que para las páginas. Una vez configurada la tabla pulsamos

Aplicar y Aceptar g. En relación a las propiedades de las celdas

también podemos actuar sobre ellas pulsando con el botón derecho de ratón dentro de la celda y eligiendo la opción Propiedades de cel-da. En la imagen de la izquierda vemos una serie de opciones para una celda. Vemos por ejemplo que cada celda puede llevar una imagen o un co-lor de fondo diferente al resto. Podemos pro-bar las diferentes opciones para ver cómo fun-cionan. En nuestro caso les daremos a cada cel-

da un color de fondo alternativo. Tal como se muestra en la imagen siguiente:

Para trabajar con tablas es conveniente tener visible la barra de herramientas de tablas. Para ello, al igual que en Word, pulsamos con el botón derecho sobre cualquiera de las barras de herramientas que tengamos en la parte de arriba de la pantalla y seleccionamos Tablas, que se nos muestra de la siguiente manera:

30

Desde esta barra se pueden añadir y quitar celdas, unirlas, justificar horizontalmente su contenido, etc.

a. En la pagina enlaces.htm tenemos que rehacerla tabla. En ella debe aparecer en amarillo y en tipo Comic Sans MS el encabezamiento Enlaces de interés

b. La alineación vertical de la tabla es centrada por defecto pero si queremos que el

texto aparezca al comienzo de la celda tenemos que utilizar los iconos de alinea-

ción vertical en las herramientas de tabla que son: . Seleccionar toda la tabla y pulsar sobre el icono de alineación centrada.

c. Introducir en cada celda los siguientes enlaces:

i. http://www.mediterraneas.org/ para el texto Mujeres mediterráneas ii. http://www.iemed.org/afkar/7/earagall.php para el texto Afkar/Ideas iii. http://indice.elpais.es/articulo/20041002elpepiint_21/comision/pondra/marcha/on

u/centros/inmigrantes/magreb para el texto El País iv. http://jclavijo.bitacoras.com/archivos/2005/10/12/el-pastel-del-magreb para el

texto La Manzana de Newton v. http://www.gees.org/articulos/t34/ para el texto Grupo de estudios estratégicos vi. http://es.marweb.com/ para el texto Marweb vii. http://estrecho.indymedia.org/magreb/ para el texto Noticias del Magreb viii. http://cepam.cesga.es/article.php3?id_article=95 para el texto Asoc. de inmigrantes en

Galicia ix. http://www.redaragon.com/sociedad/inmigracion/6.asppara el texto Red Aragón x. http://www.webislam.com/numeros/2004/273/noticias/raices_valencianas_magreb

.htm para el texto Web Islam xi. http://www.efe.es/Omedio/principal.asp?opcion=6 para el texto Oriente Medio/Magreb

xii. http://www.emigraweb.net/hitzadugu18.htm para el texto Emigraweb

(Resultado de la práctica)

31

14. Crear un enlace al correo electrónico En Frontpage el mailto es un enlace especial que, al pulsar sobre el texto o icono que lo contiene, abre el programa cliente de correo que tiene el ordenador instalado (no funcio-na si no hay ningún software de correo), como un mensaje nuevo dispuesto para escribir y que incorpora la dirección de correo que hemos introducido en el enlace. Para activarlo se selecciona el elemento que nos va a abrir el correo icono o texto (en nuestro ejemplo el enlace al correo lo hemos realizado sobre la imagen de la @ que pre-viamente hemos colocado en la parte superior izquierda de la página index.htm),

y se pulsa el icono de hipervínculo . En el cuadro de diálogo que se abre, llamado In-sertar hipervínculo, se pulsa sobre el icono que aparece abajo a la izquierda, rotulado co-mo Dirección de correo electrónico. Con esta acción se abre otro cuadro de diálogo donde escribimos el correo a donde se dirigirá el escrito del usuario (normalmente el del web-master). A continuación se pulsa el botón Aceptar.

15. Botones activables

Frontpage nos ofrece algunas posibilidades para crear botones activabes, pero hay que tener en cuenta que sólo funcionará con las últimas versiones del Navegador Explorer y que no siempre funcionan en Netscape, Mozilla u Ópera.

32

Vamos a ver un ejemplo de botón activable sobre la imagen

Para incluir un botón activable en nuestra página web, seleccionamos el menú Insertar y pulsamos sucesivamente sobre la opción Componente y luego sobre Botón activable ... Con ello se abre el cuadro de diálogo siguiente sobre él procederemos del siguiente modo:

a) Borramos el texto del cuadro Texto del botón:

b) En la casilla Vincular a: escribimos in-dex.htm

c) En Ancho ponemos el valor 34 y en Alto 37

d) Pulsamos sobre el botón Personalizado e) Se abre otro cuadro de diálogo y pulsa-

mos sobe el botón Examinar… del cuadro de texto Botón:, y buscamos en la carpe-ta de practicas web el archivo home_07.jpg.

f) Pulsamos sobe el botón Examinar… del cuadro de texto Al activar: y buscamos en la carpeta de practicas web el archivo home_08.jpg

g) Para terminar pulsamos sobre el botón Aceptar

NOTA: Para ver su funcionamiento deberemos activar la opción Vista previa.

16. Insertar vídeo y sonido en una página web

La inserción de sonido y video funciona de una forma muy parecida.

16.1 Inserción de vídeo

Los archivos de video que se admiten en las web deben tener las extensiones .avi o .wmv y para introducirlo en una página web, lo primero que hay que hay es colocar el puntero del ratón en la parte de la página donde queremos que se visualice el vídeo. A continua-ción procederemos del siguiente modo:

a) Seleccionar el menú Insertar y elegir la opción Imagen y posteriormente Video…

33

b) Se abrirá el cuadro de diálogo Video. Elegiremos el archivo que deseemos, en nues-tro caso de la carpeta prácticas web, pulsando a continuación Abrir.

c) Con ello se insertará en la página deseada un cuadro que contendrá el vídeo. Este solo será posible visualizarlo desde un navegador.

d) Para darle propiedades al archivo de vídeo, pulsaremos sobre el cuadro que lo con-tiene y en el panel que se abre elegiremos Propiedades de la imagen

e) En el cuadro de diálogo que se abre, pulsaremos sobre la pestaña Video. Elegiremos el valor de Bucle: 1 y activaremos la casilla de selección Al abrir el archivosi que-remos que el video se reproduzca al abrir la página.

f) Por último pulsamos sobre el botón Aceptar

NOTA: Debemos tener en cuenta que los archivos de vídeo suelen ser muy pesados (grandes de tamaño), por lo que hay que optimizarlos el máximo a costa de bajar localidad del mismo. Un archivo muy grande tardaría mucho tiempo en reproducirse o incluso colap-saría la página

16.1 Inserción de sonido

Los archivos de sonido son de muchas más cla-ses, los más habituales son los siguientes:

• .wav de Microsoft. • .snd y .mac de sonido Macintosh. • .au de audio de Sun. • .mid o . midi que sólo se utilizan para

música.

34

Para introducir una melodía de fondo:

a) pulsaremos con el botón derecho del ratón sobre la página, seleccionaremos Propie-dades y dentro de ellas la pestaña General.

b) En el apartado de Sonido de fondo y dentro de la casilla de Ubicación, escribimos la dirección el nombre del archivo de sonido a reproducir.

c) Si no sabemos su ubicación pulsamos sobre el botón Examinar y lo buscamos en la carpeta de prácticas (en nuestro caso el archivo sonido_ambiente.wav).

d) Si activamos la casilla Siempre de la opción Bucle, cuando termine el sonido volverá a reproducirse hasta que cambiamos de página.

e) Pulsamos sobre el botón Aceptar