Logo Curso Básico  

Entrada al cursoEditor de páginas HTMLPráctica 3: Proyecto


En esta práctica se trabajará con FrontPage Express como ya se ha comentado en la presentación. A continuación se comentan algunos aspectos generales relacionados con el uso y funcionamiento de dicho editor.

Dado el carácter básico de este curso se pretende hacer una introducción muy elemental a la edición de páginas HTML y creemos que FrontPage Express es suficiente para atender este requisito. En esta Práctica no se actúa sobre las escenas, los cambios de las escenas se tratarán en la próxima práctica.

Naturalmente que se podrá utilizar cualquier otro editor HTML, las funciones básicas serán similares. La principal diferencia estará en cómo indica la situación de las escenas: en algunos editores no se ven, en otros se pueden ver y manipular, y en FrontPage aparece una jota mayúscula con la expresión Descartes.class por debajo.

Escena

Esta Introducción va destinada a aquellos que no han utilizado antes un editor HTML, los que ya sepan utilizarlo pueden pasar a realizar el proyecto de esta práctica.


Editor de
 páginas HTML 
Como un procesador de texto

Los editores de páginas HTML, como es FrontPage Express, presentan funciones muy similares a las de los procesadores de texto típicos:

  • Comandos de formato de fuente (color, tipo, estilo...).

  • Formatos de párrafo.

  • Sangrías, alineaciones, viñetas.

  • Inserción de gráficos, tablas, imágenes, etc.

 

Funciones específicas

Junto a estas funciones presentan funciones específicas, las más adecuadas para este curso son:

  • Establecimiento del nombre de la página.

  • Inserción de fondo.

  • Inserción y modificación de hipervínculos.

Abrir el editor

Para abrir el programa basta con localizar la referencia al fichero fpxpress en la carpeta donde se haya instalado o si se creó un acceso directo en el escritorio, por ejemploAcceso fp, haciendo doble clic izquierdo sobre él.

En la imagen siguiente se puede observar el aspecto de la ventana del programa FrontPage Express y la similitud con el aspecto de un procesador de texto. 

Ventana FPexpress

Los editores HTML, como FrontPage Express, traducen todas las operaciones que se realizan durante la creación de una página al lenguaje HTML. Dicho lenguaje es el que, posteriormente, interpretará el navegador que se utilice.

Cuando el editor HTML abre un fichero dentro del disco, no trabaja directamente con el archivo del disco sino que trabaja sobre una copia de dicho archivo que queda almacenada temporalmente en la memoria RAM del ordenador. Sólo se grabará en el disco cuando se dé la orden Guardar o Guardar como...


El entorno de trabajo

Las herramientas de edición que se utilizarán para la elaboración páginas Web son pocas pero suficientes para conseguir los resultados deseados, se indica aquí dónde se localizan en el editor FrontPage, pero si se desea usar otro editor pronto se verá que todos tienen herramientas muy similares.

A continuación se analiza, pormenorizadamente, la venta de FrontPage Express.

1 Barra de título
Como en cualquier ventana de Windows, muestra el icono del programa, el nombre del programa, el nombre del archivo abierto por el programa, los iconos para minimizar, maximizar/reducir y cerrar la ventana.
2 Barra de menús
Contiene los nombres de los menús, que contienen las listas de acciones disponibles en el programa.

El editor

Al señalar con el ratón cualquier icono y sin pulsar sobre él, aparecerá una etiqueta indicando su utilidad; por ejemplo "Insertar imagen".

 

3 Barra de herramientas de formato
Contiene entradas directas a las principales operaciones para cambiar el aspecto o formato del texto (fuente, tamaño, color, aspecto,...) y del párrafo: Alineación horizontal (centrado, izquierda, derecha), Numeración/Viñetas, Aumentar/Disminuir sangrado, ...
4 Barra de herramientas estándar
Contiene accesos directos a las operaciones más frecuentes en una sesión de edición: Abrir/Cerrar/Guardar archivo, Imprimir y vista preliminar, Cortar/Copiar/Pegar, Deshacer/Rehacer operaciones previas, Insertar tabla, Insertar imagen, Insertar/Modificar un hipervínculo, Atrás/Adelante de las páginas abiertas, Actualizar página, etc.
5 Barra de herramientas de formularios
No se usa en este curso.
6 Barra de estado
En ella el editor sitúa información explicando cada operación del menú o de la barra de herramientas cuando se pasa el puntero del ratón por cada elemento. Si el teclado numérico está habilitado después de pulsar la tecla <Bloc Num> aparecerá en la barra de estado la palabra NUM que indica esta circunstancia.
7 Espacio de visualización
Muestra la página que se está creando o modificando.
8 Botones de la ventana del  programa
Para minimizar, maximizar (o restaurar) y cerrar el programa FrontPage.
9 Botones de la ventana de la  página
Para minimizar, maximizar (o restaurar) y cerrar la página sobre la que se está trabajando.
10 Barras de desplazamiento
Permite mover la página cuando ocupa más que la ventana.
11 Indicadores
Informan sobre el tiempo estimado de descarga de la página, sobre el bloqueo de la mayúsculas o números,...

Los menús
A continuación se describen las opciones que son más relevantes para este curso.
menú
Esta barra presenta diez menús: Archivo, Edición, Ver, Ir, Insertar, Formato, Herramientas, Tabla, Ventana y Ayuda.

Al hacer clic con el botón principal del ratón sobre una entrada de la barra de menús se despliega una lista con distintas opciones (submenús). 

Cuando una determinada opción del submenú tiene a su derecha una punta de flecha, por ejemplo Otros componentes         , indica que, cuando se seleccione esa opción, se desplegará otro menú (submenú) con más opciones. 

Cuando aparecen junto al nombre de la opción tres puntos suspensivos, por ejemplo Salto de línea..., significa que no se ejecutará la orden directamente sino que se abrirá una nueva ventana (ventana de diálogo) para que configuremos la opción antes de aceptarla. En el resto de los casos al seleccionar una opción se ejecutará la orden asociada.

Algunas acciones también pueden ejecutarse directamente con el teclado, en ese caso en el menú desplegado aparece a la derecha de la opción la tecla o teclas que es necesario pulsar. Por ejemplo: Ctrl+D (se pulsa la tecla Ctrl y sin soltarla se pulsa la letra D) se pude utilizar para insertar un hipervínculo.

Menú Archivo

Menú archivo

 

Abrir...o icono abrir Abrir

Submenú abrir

Opción de archivo que permite abrir la página que se quiere editar, puede ser una página en nuestro PC o una dirección de Internet. El botón Examinar permite acceder a una ventana de exploración que facilita la localización del archivo. Es posible abrir varias páginas simultáneamente.

Guardar como...

Submenú Guardar

Permite guardar la página. En esta ventana se elige Como archivo, que abre una ventana de exploración que facilita la localización del lugar deseado.

El icono guardar Guardar permite guardar la página pero sin cambiar el nombre.

Propiedades de página.

Propiedades de página

Tiene varias pestañas en la parte superior e interesan dos: General y Fondo.

Propiedades de página

 

En la pestaña General se puede modificar el Título de la página que es el que aparecerá en la barra de títulos del navegador.

En la pestaña Fondo se pueden modificar algunos colores generales de la página (color de fondo, de los hipervínculos,...).

Menú Edición

Menú edición

Deshacer y Rehacer, o los iconos correspondientes DeshacerRehacer.

Permiten deshacer la última acción realizada o bien rehacer lo último que se ha deshecho. En FrontPage Express, estas acciones sólo se pueden realizar una vez.

Cortar, Copiar y Pegar, o los iconos correspondientes CortarCopiar y Pegar.

También se encuentran aquí las opciones más utilizadas y conocidas como Copiar, Cortar, Pegar o  las Propiedades de fuente.

Marcador e Hipervínculo

Sirven para crear enlaces a la misma página o a otras. Se explican con más detalles en las actividades guiadas.

El icono para crear o modificar hipervínculos es Hipervínculo

Menú Ver

Menú ver

Si no aparece alguna barra de herramientas en la ventana del editor hay que abrir el menú Ver y marcar la entrada correspondiente.

Se puede ocultar o permitir las barras de herramientas y de estado. Por ejemplo, conviene desactivar la Barra de herramientas Formularios.

Si activamos Marcas de formato se verán las líneas de separación de las tablas o los saltos de línea u otros elementos no visibles en el navegador. El icono Mostrar/Ocultar Mostrar/Ocultar realiza la misma tarea.

Menú Ir

Permite acceder al Correo, Noticias, Libreta de direcciones,....
Menú Insertar

Menú insertar

Destacan:

  • Línea horizontal, para separar contenidos.

  • Símbolo, para introducir símbolos especiales.

  • Imagen, para insertar imágenes que tenemos en algún archivo (estos archivos son de tipo gif, jpg,...).

Insertar imagen

Los archivos de imágenes, vídeos o sonidos que se insertan en una página forman parte de la página de una manera vinculada y si estos se eliminaran o cambiaran de carpeta no se verían o escucharían al abrir la página con un navegador. Por ello es necesario organizar estos ficheros necesarios y lo normal es copiarlos en una carpeta llamada "imagenes" (o "images" o  algo así) que esté junto a nuestra página.

Pulsando en "Examinar...", nos resultará más cómodo localizar el archivo.

El icono para insertar imágenes es Imagen

  • Hipervínculo, como el que aparece en el menú edición.

Menú Formato

Menú formato

  • De texto

Barra de formato de fuentes

contiene entradas directas a las principales operaciones para cambiar el aspecto o formato del texto.

En la sección Poner formato al texto de las Actividades guiadas se puede ampliar información.

  • De párrafo

Barra de formato de párrafo

Todo lo que se inserta en el documento hasta que se pulsa la tecla <Intro> o <Retorno> es considerado un párrafo para un editor de texto.

Para asignar una propiedad de párrafo basta situar el cursor sobre una parte cualquiera del párrafo y activarlo haciendo clic izquierdo.

Son operaciones de párrafo las siguientes:

  • Alineación horizontal (izquierda, centro, derecha).
  • Numeración/viñetas en los párrafos.
  • Viñetas en los párrafos.
  • Aumentar sangrado/Disminuir sangrado.

La opción Fondo es la misma que ya aparecía en el menú Archivo.

Menú Tabla

Menú tabla

Es importante que la información que aparece en la página esté estructurada: una imagen y el texto a su izquierda, una escena de Descartes con las instrucciones correspondientes a su derecha,... Una buena manera de estructurar la página es usando tablas. Las tablas están formadas por celdas y en cada una ellas incorporamos los elementos previstos.

OjO

Puede dar la sensación de que una tabla no está insertada. Hay que comprobar que esté activada la herramienta Mostrar/Ocultar en la barra de herramientas  Estándar Mostrar/Ocultar para que se muestren las líneas de división de las tablas.
Menú Ventana

Muy útil si hay varias páginas abiertas en el editor pues permite pasar de unas a otras rápidamente.

Menú ventana

Esta imagen indica que la página que está en pantalla en ese momento es index.htm. Si deseamos pasar a otra que ya está abierta sólo hay que seleccionarla.


Entrada al cursoEditor de páginas HTMLPráctica 3: Proyecto
Metodología

© Ministerio de Educación y Ciencia. Año 2005

Autores: Juan Madrigal Muga, Ángel Cabezudo Bueno, Enrique Martínez Arcos, Josep Mª Navarro Canut, Juan Simón Santamaría