Las indicaciones para realizar esta práctica están hechas para el programa FrontPage Express por las razones que ya han sido referidas en apartados anteriores. El profesor puede realizar la práctica con cualquier otro editor que tenga instalado en su equipo.

Las explicaciones que siguen permiten crear una página web desde el principio o bien modificar una ya creada.

Creación de un nuevo fichero HTM en disco

Para crear el fichero en disco y ponerle nombre desde el principio se elige la opción Nuevo... del menú Archivo, sobre la ventana de dialogo que aparece

se selecciona Página normal de la lista de posibilidades y se pulsa el botón Aceptar.

En el menú Archivo se elige la opción Guardar como... y en la ventana de diálogo correspondiente

se pulsa el botón Como archivo... que nos permitirá poner nombre al fichero, Proyecto_p4.htm, e indicar la carpeta, Ejercicios, donde se guardará.

Obsérvese que desde esta ventana se puede poner un nombre o título a la página. No lo vamos a hacer desde aquí; como se verá en la siguiente sección hay posibilidad de hacerlo de otra manera.

Finalmente se valida pulsando el botón Guardar que además cierra la ventana.

De vez en cuando, y a medida que se va elaborando la página, conviene guardar la página en disco para no perder la información que se almacena en memoria RAM (la puedes perder por algún fallo eléctrico, por bloqueo del sistema,...). Para ello elige la opción del menú Archivo Guardar. Esta opción no pregunta por el nombre y carpeta del archivo pues asume los que se utilizaron la primera vez con Guardar como...

Abrir un fichero HTM

• Abrir el programa FrontPage Express y después elegir la opción Abrir... del menú Archivo.
• Abrir la página con el navegador (Internet Explorer) y después elegir la opción Editar con Microsoft FrontPage del menú Archivo. O en la barra de herramientas del navegador se pulsa sobre el icono para editar la página.

Una vez abierto se guarda, como se explicó anteriormente, en la carpeta Ejercicios con el nombre Proyecto_p4.htm.

En la ficha General podemos poner un nombre a la página que como sabemos es el que aparecerá en la barra de títulos del navegador cuando sea abierta por él.

El nombre que pondremos a la página es "Proyecto práctica 4"

En la ficha Fondo podemos personalizar el color de fondo de la página.

Para ir a seleccionar el color personalizado R=254, V=230, A=184, en la paleta de colores, se despliega la lista de colores de fondo pulsando el botón flecha abajo de la entrada Fondo y seleccionando la opción de color Personalizar.

Esta opción abre la paleta de colores donde se puede seleccionar el color interesado haciendo clic sobre la pequeña ventana de color personalizado.

La ficha Fondo también permite asignar color a los textos de la página que van a ser hipervínculos, como puede observarse, pero esto no es motivo de la siguiente práctica.

Esta propiedad se refiere a la posibilidad que ofrece FrontPage Express de establecer márgenes en la página que impidan que el texto que se escriba quede pegado a los bordes.

Solo basta especificar los márgenes superior e inferior en píxeles. Los márgenes derecho e inferior quedan fijados de forma automática.

Tablas

Inserción

Las tablas están formadas con celdas. Para ver las líneas de división de celdas hay que tener activada la opción Mostrar/ocultar en la barra de herramientas estándar. Mostrar es conveniente para poder distinguir a simple vista una celda de otra y poder seleccionarlas. Las líneas de división no son bordes gráficos que se ven cuando la página se abre con un navegador, sirven para orientarnos mientras editamos la tabla.

Encabezado de la página

El encabezado de la tabla se estructura en una tabla (3x2) de tres filas y dos columnas.

Para insertar la tabla se selecciona la opción activa Insertar tabla... del menú Tabla del editor.

La ventana de dialogo que se abre permite definir las principales propiedades de la tabla:

Tamaño (número de filas y columnas).

Diseño.

La alineación (izquierda, centro, derecha) posiciona la tabla horizontalmente entre los márgenes derecho e izquierdo de la página.

El tamaño del borde (en píxeles) determina el ancho del borde. Tamaño 0 significa que no se dibujará el borde.

El relleno de celdas se refiere a la distancia en píxeles a la que se colocará el contenido que se ponga en las celdas.

El espaciado entre celdas es la distancia en píxeles que habrá entre los bordes de las celdas contiguas.

El ancho de la tabla se puede especificar en píxeles (ancho absoluto) o en porcentaje (ancho relativo referido al ancho de la página). Valor 100 en porcentaje significa que cualquiera que sea el ancho de la página, 800 píxeles, 1024 píxeles, etc. de resolución de la pantalla, la tabla  ocupará todo el ancho.

Operaciones  sobre tablas y celdas

Una vez creada la estructura base de la tabla, si se hace clic izquierdo sobre una celda cualquiera se activan una serie de opciones sobre la tabla y celda en el menú Tabla. Alternativamente, haciendo clic derecho sobre una celda se abre un menú emergente donde podemos seleccionar propiedades de tabla y de celda.

Ancho de columna

Para poner un ancho determinado a cada columna, hay que seleccionarla y acceder a las propiedades de celda.

En este caso, la primera columna representará el 30% sobre el ancho de tabla y la segunda columna el 70%.

Se selecciona la columna izquierda situando el cursor sobre una celda de la misma y eligiendo la opción seleccionar columna del menú Tabla. Seguidamente haciendo clic derecho sobre la selección se elige la opción Propiedades de celda... del menú emergente y se abre la ventana de diálogo y se fijan las propiedades que mostramos en la imagen:

Alineación horizontal y alineación vertical se refiere a la posición que adoptará el contenido que se ponga en la celda.

Se repite el procedimiento anterior para fijar el ancho de la columna de la derecha.

Combinación de celdas

Para combinar las dos primeras celdas de la primera columna hay que activar la primera celda haciendo clic izquierdo sobre ella y en el menú Tabla elegir la opción Seleccionar celda, seguidamente se mantiene presionada la tecla <Control> mientras se hace clic izquierdo sobre la otra celda. Una vez seleccionadas las dos celdas se elige la opción Combinar celdas en el menú Tabla.

Para combinar las dos celdas de la tercera fila se puede proceder como en el caso anterior, pero tratándose de una fila completa lo mejor es activar una celda cualquiera, de las dos a combinar, haciendo clic izquierdo sobre ella y elegir la opción Seleccionar fila y a continuación Combinar celdas en el menú Tabla.

El aspecto final de la tabla que servirá para soportar los contenidos del encabezado de la página tiene que ser el siguiente

Color de fondo en las celdas

Haciendo clic derecho sobre una celda se abre el menú emergente y se elige la opción Propiedades de celda...

Se despliega la lista Color de fondo, se selecciona la entrada Personalizar y sobre la paleta de color que se obtiene se selecciona el color personalizado que hemos previsto para la celda correspondiente, igual que se hizo para poner color al fondo de la página.

Poner borde a una tabla

Los bordes son propiedades de tabla.

Hay dos tablas en la página que llevan borde: la tabla bajo el encabezado y la tabla asociada a la Actividad 6.

La tabla bajo el encabezado

Ya se ha indicado cómo se abre el menú que permite seleccionar las propiedades de tabla: previa activación de una celda cualquiera, despliega el menú Tabla o el menú emergente (botón secundario del ratón).

La ventana de diálogo de propiedades de tabla es

La características de diseño y ancho mínimo que figura en esta ventana se establecen cuando se inserta la tabla. La inserción ya se explicó antes.

La característica Colores personalizados permite poner color al borde, color a la parte de borde claro y color a la parte del borde oscuro. En esta ocasión el borde se ha conseguido con los colores predeterminados del editor y con el tamaño de borde y espaciado de celdas que se muestran en la imagen.

Se recomienda para comprender este efecto de borde que se practique en una tabla de prueba distintas opciones de los parámetros y también sobre las opciones de borde en las propiedades de celda.

La tabla asociada a la Actividad 6

Las propiedades de tabla que permiten conseguir este borde se muestra en la siguiente imagen

Insertar una imagen en la celda

Este apartado se refiere a la imagen que hay que insertar en el par de celdas combinadas de la primera columna de la tabla del encabezado de la página.

El procedimiento de insertar una imagen en cualquier lugar de la página es similar.

En este caso se empieza por activar la celda combinada haciendo clic sobre ella. Después se despliega el menú Insertar y se selecciona la opción Imagen...

Seguir los pasos indicados en la figura adjunta sobre las dos ventanas de dialogo sucesivas que van apareciendo hasta indicar al editor dónde se localiza el fichero imagen que se quiere insertar. En este caso se trata del fichero de imagen, logotipo de Descartes2, denominado logo.gif que está en  la carpeta Ejercicios.

Una vez insertada la imagen se puede consultar y modificar las propiedades de la misma haciendo clic derecho para obtener en el menú emergente las Propiedades de la Imagen...

Es importante la ficha Apariencia para posicionar la imagen vertical y horizontalmente a una distancia, en píxeles,  de los bordes del marco gráfico y también como será la alineación vertical en relación a la línea de texto que pueda acompañar a la imagen.

No es necesario en esta ocasión hacer uso de estas propiedades. La posición de la imagen ya quedó establecida cuando se fijaron las propiedades de la celda antes de insertar la imagen. Pero conviene saber cómo se consultan y se cambian las propiedades para otra ocasión.

Basta activar la celda haciendo clic izquierdo sobre la misma y empezar a escribir con el teclado.

Recordemos que la posición del texto en la celda se controla con las propiedades de la celda que establece la alineación vertical (superior, medio, inferior) y la alineación horizontal (izquierda, centro, derecha).

El formato del texto se consigue utilizando las herramientas que se explican en el siguiente apartado.

Poner formato al texto

El formato lo constituye una serie de características asociadas a un texto. Son las siguientes: fuente o tipo, estilo (normal, cursiva, negrita y negrita y cursiva), tamaño y efectos (tachado, subrayado, maquina de escribir y color)

Hay dos ocasiones para poner formato al texto:

• El texto no existe y se va a escribir.

• El texto ya está escrito pero se desea cambiar su aspecto o formato.

En este segundo caso, el texto  debe de seleccionarse antes de cambiar el formato. Generalmente se selecciona cualquier cantidad de texto de una fila posicionando el cursor a la izquierda del comienzo y haciendo clic izquierdo y arrastrando a la vez hacia la derecha hasta cubrir con la selección todo el texto. Una palabra puede seleccionarse directamente haciendo doble clic izquierdo sobre ella. Todo el texto de una página puede seleccionarse a la vez mediante la opción Seleccionar todo del menú Edición.

Para aplicar formato a un texto se puede seguir dos caminos alternativos:

• Desplegar el menú Formato y seleccionar la opción Fuente...
• Hacer clic derecho para abrir un menú emergente y seleccionar Propiedades de la fuente...

En ambos casos se abre la siguiente ventana de dialogo donde se seleccionan todas las características de formato que correspondan

En la parte izquierda de la barra de herramientas de formato aparecen ventanas de selección de estilos y fuentes, los botones de aumento y disminución del tamaño de la fuente, los botones de conmutación de estilo y efectos (negrita, cursiva, subrayado y color).

Los elementos individualizados en esta barra vienen a ser como atajos para establecer una o varias característica del formato.

Es una técnica bastante usual que permite separar segmentos de información de una página como es el caso de este proyecto.

Se empieza por activar el lugar de la página donde se quiere insertar la línea (se posiciona el puntero del ratón y se hace clic izquierdo). El curso de escritura queda activo en el lugar.

En el menú Insertar se elige la opción Línea horizontal y se insertará en el lugar una línea por defecto.

Ahora hay que poner las propiedades de tamaño, anchura y color para conseguir el resultado deseado. Se selecciona la línea haciendo clic derecho y en el menú emergente se elige la opción Propiedades de la línea horizontal...

La ventana de dialogo permite establecer las propiedades que se ven en la imagen. No olvidar poner el color personalizado que tenemos en la paleta de colores R=0, V=102, A=153

Normalmente la línea hay que insertarla en varios lugares y si ya ha sido insertada no hace falta repetir el proceso anterior basta utilizar la técnica de copiar y pegar. Esto es lo que se debe hacer para insertar la segunda línea

y tercera línea de la página del proyecto.

Insertar escenas de Descartes

En esta práctica sólo interesa copiar la escena; en las prácticas 5, 6 y 7 se explica además cómo realizar alguna modificación elemental en el código de Descartes.

Escena A

El motor de las escenas es el archivo Descartes.jar que debe estar en tu carpeta descartes_basico. Dentro de ésta habrá otra carpeta llamada Ejercicios en la que está tu página proyecto_p4.htm. Comprueba que esto es así.

La primera escena que necesitamos es la correspondiente al apartado "3. EL TEOREMA DE PICK" del fichero C:\Descartes\3_eso\regularidades\regularidades_5.htm. Se trata de uno de los ficheros que componen la Unidad Didáctica para 3º ESO titulada "Regularidades Numérica y Geométricas" y que ha sido descargada de la Web Descartes e instalada en el disco duro C: en la carpeta Descartes como de explicó en la Práctica 2 de este curso.

Abrimos en el editor FrontPage Express las dos páginas: la que estamos elaborando (proyecto_p4.htm) y la que contiene la escena (regularidades_5.htm).

FrontPage Express permite abrir varios ficheros y tener simultáneamente sus correspondientes copias en la memoria RAM, pudiendo conmutar de una vista a otra en la ventana del mismo editor. Si se abre el fichero regularidades_5.htm después de abrir proyecto_p4.htm, aquel es el que está en primer plano y se visualiza  ocultando en segundo plano a proyecto_p4.htm. Esta circunstancia se puede comprobar al desplegar el menú Ventana del editor:

Para poner en primer plano el otro fichero basta hacer clic izquierdo sobre su nombre en la lista.

Pero la vista desde el editor FrontPage Express es bien diferente. En el lugar de la página donde está la escena, en el editor se ve un icono que representa una J que indica que ahí hay código Descartes, un applet escrito en lenguaje Java.

Haciendo clic izquierdo sobre el icono queda seleccionada una zona rectangular cuyas dimensiones son las que tiene la escena cuando se visualiza en el navegador

Se puede consultar las propiedades de este programa Java haciendo clic derecho sobre el icono J y seleccionando la opción Propiedades del subprograma Java... del menú emergente que resulta.

Pero sólo interesa de esta ventana, en este curso, observar el tamaño de la escena 480x356 y la Dirección URL base del subprograma "../../".

Copiar y pegar la escena

Teniendo seleccionado el icono J, se ejecuta la orden  Copiar por cualquiera de los tres procedimientos alternativos que ya se conoce:

• Pulsando de forma combinada las  teclas <Control> C.
• Seleccionando la opción Copiar del menú emergente o contextual que aparece al hacer clic derecho.
• Seleccionando la opción Copiar del menú Edición

El objeto Java que representa la escena Descartes ha sido guardado en el Portapapeles.

En el menú Ventana se pone en primer plano la página proyecto_p4.htm. Se coloca el cursor en la celda en la que tiene que ir la escena haciendo clic izquierdo para activarla. Sólo queda pegar el applet Java que está en el portapapeles siguiendo alguno de estos procedimientos:

• Pulsando de forma combinada las  teclas <Control> V.
• Seleccionando la opción Pegar del menú emergente o contextual que aparece al hacer clic derecho.
• Seleccionando la opción Pegar del menú Edición

La siguiente imagen muestra el aspecto de la tabla de actividades después de insertado el applet en la celda.

Recuerda que para ir desde Descartes.jar (en la carpeta descartes_basico) hasta tu página proyecto_p4.htm hay que abrir una carpeta (llamada Ejercicios).

Necesitamos localizar el código de la escena: empieza por "<applet" y acaba en "\applet>". Comprueba que en las primeras instrucciones del código está:

• codeBase=../
• archive=Descartes.jar

Si es necesario, cámbialas.

Escena B

Supuesto que se cumple lo dicho en el párrafo anterior, al desplegar el menú Ventana tenemos que ver la lista de estos dos ficheros abiertos con el fichero regularidades_1.htm marcado en primer plano.

También es posible que aparezca en la lista regularidades_5.htm.

Puede comprobarse que las propiedades del subprograma Java que interesa observar en del applet son las mismas que en la Escena A:

• Tamaño de la escena 480x356

• Dirección base del subprograma ../../

Se procede de idéntico modo que con la primera escena.

1. Localizar la imagen J, correspondiente a la Escena B, en la página regularidades_1.htm

2. Copiar esta imagen haciendo <Control>C, por ejemplo, en el teclado.

3. Poner en primer plano la página proyecto_p4.htm, abriendo el menú Ventana y marcando el fichero.

4. Activar el lugar donde deba insertarse la escena haciendo clic izquierdo sobre él (el cursor queda fijado allí).

5. Pegar la imagen J haciendo <Control>V, por ejemplo, en el teclado.