Práctica 3: Actividades guiadas

En estas Actividades Guiadas se ofrece en detalle los pasos que se requiere para la consecución del Proyecto 3 .

Las indicaciones para realizar esta práctica están hechas para el programa FrontPage Express. No siempre se elige el camino más sencillo con este programa sino aquellos métodos generales disponibles en otros editores.

Las explicaciones que siguen destacan las herramientas necesarias para modificar una página ya creada.

Al visualizar una página con un navegador es frecuente que se muestren imágenes. Éstas no están insertadas en la página, lo que hay son rutas o direcciones para llegar a ellas.

Se recomienda abrir la página en el navegador (Internet Explorer o el que se use). Se puede usar el enlace anterior o bien seguir la ruta Descartes/Curso_basico/proyectos/ejercicio3.htm (la página es ejercicio3.htm que está en la carpeta proyectos del Curso_basico)

Ruta de ejercicio3.htm

Se guardará con otro nombre. Para ello, en el menú Archivo se elige Guardar como: el nombre será envio3.htm dentro de la carpeta proyectos.

Guardar página web

Así se consigue que todas las imágenes que se veían en la página ejercicio.htm (y que podían estar en distintas carpetas) ahora estén en una nueva carpeta que se ha creado y se llama envio3_archivos.

La carpeta donde se guardará la página es fundamental para que funcionen las escenas (es uno de los temas de la práctica 4). En la imagen anterior se observa que se guarda en la carpeta proyectos.

Se abre el programa FrontPage Express y después se abre la página:

Abrir archivo I

En la nueva ventana se pulsa en Examinar y se elige el archivo según la ruta anterior:

Abrir envio3.htm

Para ver los cambios que se hacen, se abre la página en el navegador (doble clic sobre el archivo envio3) de manera que por un lado estará abierta la página en el editor y por otro en el navegador. Para pasar del editor al navegador o viceversa, se hace clic en el botón correspondiente de la barra de tareas:

Barra de tareas

Cada vez que guardemos la página en el editor podremos ver los cambios en el navegador pulsando en el icono Actualizar del navegador .

Todo el texto de una página puede seleccionarse a la vez mediante la opción Seleccionar todo del menú Edición.

Una palabra puede seleccionarse directamente haciendo doble clic izquierdo sobre ella.

En FrontPage, una línea se selecciona haciendo clic izquierdo a la izquierda de la línea.

Para seleccionar cualquier cantidad de texto se puede seguir uno de estos dos caminos alternativos:

Con el ratón: colocar el cursor a la izquierda del comienzo, hacer clic izquierdo y arrastrar a la vez hacia la derecha hasta cubrir con la selección todo el texto.
Con el teclado: usar las teclas de desplazamiento izquierda, derecha, arriba y abajo con la tecla de mayúsculas pulsada (no confundir con la tecla de bloqueo de mayúsculas).

Una tabla, una fila, una columna o una celda de una tabla se seleccionan situando el cursor en una celda y eligiendo la opción deseada en el menú Tabla.

Otros elementos de la página (imágenes, líneas horizontales,...) se seleccionan haciendo clic sobre ellos.

Una vez seleccionado un elemento se puede copiar o cortar (esto es copiar haciéndolo desaparecer de donde está) de tres maneras diferentes:

En el menú Edición eligiendo la opción deseada.
Pulsando la tecla control (ctrl) de teclado y, sin soltarla, pulsar la tecla c para copiar o la tecla x para cortar.
Pulsando con el botón derecho sobre la selección y eligiendo la opción deseada.

No copiar y pegar imágenes que estén en páginas diferentes, se recomienda insertarlas.

El elemento copiado se puede colocar en otro lugar de esta página o de otra. Para ello, coloca el cursor en el lugar deseado, sigue alguno de los tres métodos anteriores y elige pegar o la combinación de teclas control v.

Los colores se determinan por la cantidad Rojo-Verde-Azul (código RGB) que lo forman. En la página envio3.htm aparecen los siguientes colores:

Color	R	V	A	Código hexadecimal
	0	102	153	#006699
	223	234	236	#DFEAEC
	255	248	225	#FEE6B8
	254	230	184	#FFF8E1
	233	234	204	#E9EACC

Colores personalizados

Otros editores no permiten personalizar la paleta de colores y necesitan el código hexadecimal del color pero recuerdan el último color seleccionado en una celda y en un texto. En versiones superiores de Frontpage aparecen disponibles todos colores del documento.

Se puede cambiar el color al texto, al fondo de la página o de una tabla o de una celda de una tabla, a una línea de separación, a los bordes de las tablas

Durante la confección de una página se necesitará cambiar de color con frecuencia. Resulta muy cómodo tener estos colores ya definidos pues solo tenemos que hacer clic sobre la ventana del color personalizado para que el color quede seleccionado.

Para personalizar colores, se accede a la paleta de colores con el icono Icono color de la barra de herramientas de formato. En la ventana Color se pulsa el botón Definir colores personalizados >>>. Para poner un color personalizado se siguen los pasos que muestra la imagen siguiente. En esta vista ya se han puesto los cuatro primeros colores que se van a utilizar en nuestra página y los 5 pasos a que se refiere definen en la paleta de colores personalizados el color R=233, V=234, A=204.

Se abre a la ventana de diálogo de propiedades de la página con cuatro fichas o pestañas: General, Fondo, Márgenes y Personalizar.

Insertar una tabla

Las tablas están formadas con celdas. Para ver las líneas de división de las celdas se deberá activar la opción Mostrar/ocultar en la barra de herramientas estándar. Mostrar es conveniente para poder distinguir 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.

Tamaño para indicar el 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 pixeles) 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 pixeles a la que se colocará el contenido que se ponga en las celdas.
- El espaciado entre celdas es la distancia en pixeles que habrá entre los bordes de las celdas contiguas.
El ancho de la tabla se puede especificar en pixeles (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 pixeles, 1024 pixeles, etc. de resolución de la pantalla, la tabla ocupará todo el ancho.

Lo que se ve en el monitor de un ordenador son puntos de colores que forman las imágenes y los textos. Cada uno de estos puntos se llama píxel.

En el ejemplo, se han cambiado el nº de columnas a 3 y se especifica el ancho de la tabla al 100% del ancho de la página. Si en el Menú Ver está activada las marcas de formato podremos ver lo siguiente:

Si el cursor está sobre la tabla estarán activas casi todas las opciones del Menú Tabla. Por ejemplo, en Propiedades de tabla se pueden cambiar los colores de fondo y de los bordes abriendo la lista de opciones:

Si el cursor está en una celda y en el Menú Tabla elegimos Propiedades de celda, podremos cambiar el color de la celda como antes:

1) en la tabla anterior se selecciona la última columna

2) en el Menú tabla se elige Dividir celdas

3) en la nueva ventana se elige la opción Dividir en filas cambiando el Número de filas a 3

Para borrar una tabla, primero se coloca el cursor sobre una de las celdas y en el Menú tabla se elige Seleccionar tabla, y después se pulsa la tecla suprimir (supr).

No todos los ordenadores tiene instalados los mismos tipos o fuentes, pero hay una serie de fuentes que siempre podemos ver como Arial, Courier New, Times New Roman y Verdana.

Insertar imágenes

Las imágenes de una página son archivos que deben ser trasladados con la página cuando ésta sea llevada a otro ordenador.

Las imágenes de las páginas web no están en la página, en ésta sólo figuran las rutas para llegar a ellas. Por tanto, son elementos añadidos a una página y deben acompañarla cuando se lleve a otro ordenador.

Normalmente, las imágenes se sitúan junto a la página o, sin son muchas, en una carpeta próxima a la página.

Para insertar la imagen logo.gif que está en la carpeta Descartes primero se copiará en la carpeta en la que están todas las imágenes (envio3_archivos): es el proceso de copiar y pegar pero sobre un archivo.

Para situarla en la página se coloca el cursor en la posición deseada. A continuación podemos seguir uno de los siguientes caminos alternativos:

Pulsar en el icono .
Elegir la opción Imagen... en el menú Insertar.

Aparecerá la siguiente ventana:

Ventana imagen

Pulsa en Examinar... y busca la ruta para llegar a la imagen.

Abrir imagen

No es conveniente usar la técnica de copiar y pegar para imágenes que estén en páginas distintas.

Insertar una línea horizontal

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.

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...

Menú emergente

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

Menú línea

Si la línea ya ha sido insertada y se necesita en varios lugares, no es necesario repetir el proceso anterior basta utilizar la técnica de copiar y pegar.

Hipervínculos	Los enlaces o hipervínculos suelen ser palabras, trozos de texto o imágenes que permiten enlazar con otra parte de la misma página o con otra página que pueden estar en el ordenador propio (equipo local) o en cualquier ordenador de la red a la que se esté conectado en ese momento (equipo remoto), que en caso de ser Internet, puede estar situado en cualquier parte del mundo. A este sistema de organización de la información se le llama hipertexto.
	Interesan dos tipos de enlaces: A una dirección de Internet. A una página creada. En este caso hay otras dos posibilidades: Al comienzo de la página. A una determinada parte de la página en la que está un enlace interno o marcador.
Enlace a una dirección de Internet	Para crear un enlace a una dirección de Internet, se selecciona un texto y en el menú Insertar (o en el menú Edición) se elige Hipervínculo. En la pestaña WWW se escribe la dirección.
Enlace a otra página abierta	Para crear un enlace a otra página, ésta debe estar abierta también en FrontPage Express. Cuando hay varias páginas abiertas en FrontPage, se pasa de unas a otras a través del menú Ventana. En la siguiente imagen se observan dos páginas abiertas y está activa la número 1 por la marca que lleva delante:
Enlace a otra página abierta	Para crear un enlace de la página Práctica 3 (envio3.htm) a la página Original (ejercicio3.htm), se selecciona un texto o una imagen en envio3.htm y en el menú Insertar (o en el menú Edición) se elige Hipervínculo. En la pestaña Páginas abiertas se selecciona la página destino tal y como muestra la siguiente imagen.
Marcadores	Para que el enlace sea a un lugar de otra página, primero habrá que crear en dicho lugar un enlace interno o marcador. Para ello se coloca el cursor en dicha posición y en el menú Edición se elige Marcador. El nombre del marcador no debería tener caracteres especiales ni espacios. En la posición del marcador aparecerá una banderita
Enlace a una posición de una página abierta	Volvemos a la primera página desde el menú Ventana. Para crear un enlace de la página Práctica 3 a la página Original, como antes, se selecciona un texto o una imagen en Práctica 3 y en el menú Insertar se elige Hipervínculo. En la pestaña Páginas abiertas se selecciona la página destino. En la siguiente imagen se crea un vínculo de la página Práctica 3 a la página Original.
Enlace en una imagen	Si se quiere crear o modificar un enlace en una imagen, se hace doble clic sobre ella o se elige Propiedades de imagen en el menú que surge al pulsar con botón derecho sobre ella. Aparecerá la siguiente ventana: Pulsando en Examinar como muestra la imagen se accede a las ventanas anteriores de hipervínculos.

Sobre las escenas de Descartes
	Las escenas de Descartes no se ven en FrontPage pero aparece una indicación del lugar en el que está: En algunos editores pueden verse las escenas y en otros no aparece nada. En este último caso será necesario recordar las posiciones de las escenas.