Existen numerosos editores que permiten no tener que conocer de memoria la copiosa relación de códigos HTML que según hemos visto existen. Uno de los más sencillos de aplicación (especialmente si previamente has empleado editores de texto como Word 97 o Word 2000, pues sus herramientas e iconos son prácticamente los mismos) es Frontpage2000 o su versión posterior.

Una primera aclaración: para los "puristas", se trata de un programa poco "exigente", especialmente para el usuario menos ambicioso. Esto es tanto como afirmar que sólo tiene mérito aquel trabajo que ha presentado un elevado costo de ejecución. Frente a sus detractores, podemos afirmar que prácticamente puedes incluir con un mínimo de esfuerzo cualquier efecto de los más usuales en las páginas web. En la relación entre calidad y esfuerzo, es sin duda uno de los programas punteros. Un alumno, sin ningún conocimiento en lenguaje html, podría crear una página web con este programa en apenas tres o cuatro de horas de aprendizaje. Obviamente, el conocimiento de los códigos web, aunque no sea exhaustivo, te permite incrementar considerablemente el rendimiento que proporciona esta interface. Por ejemplo, cuando existen problemas de aplicación del programa, una simple ojeada a su código web puede hacerte reflexionar sobre el error cometido.

Con este software se pueden elaborar páginas sin saber absolutamente nada del lenguaje HTML: el programa elabora el código HTML correspondiente, que es el que entienden los navegadores de Internet.

Es importante darse cuenta de que no sólo vamos a hacer una página web sino un conjunto de ellas, es decir, un SITE. El primer paso será crear la estructura del site.

Ejectuamos el programa Front Page y la opción [Nuevo Web]. Si creamos un sitio web nos va a generar una carpeta en la cual se va a generar automáticamente una página principal (llamada index.htm) y dos carpetas llamadas images y _private, donde guardaremos archivos. Podemos elegir el tipo de web que deseamos, pero para esta práctica elegimos [Web de una página] a partir del asistente y especificamos la ubicación en el disco duro. Queda guardado por defecto en [Mis Documentos-Mis Web-].

Cuando queramos actualizar las páginas, la próxima vez que entremos al Front Page ejecutaremos la opción [Abrir Web].

Es muy importante que tengamos muy claro los nombres que vamos a guardar nuestros archivos y tener cuidado al utilizar mayúsculas y minúsculas en los nombres ya que serán reconocidos como diferentes. En la gran mayoría de los casos la página principal de nuestro sitio web se denominará index.htm y será la que aparece por defecto cuando el internauta escriba el nombre de la carpeta. Es decir en cada carpeta que hagamos siempre debe haber un fichero llamado index.htm, al que otorgamos el valor de archivo inicial o portada.

En los nombres de fichero no ponga ñ ni tildes, ni espacios en blanco u otros caracteres raros.

FrontPage tiene una apariencia similar a los programas de la familia Office, con barra de título, de menús y herramientas muy similares.  

La particularidad es que en la parte izquierda de la pantalla aparece lo que se llama la barra de vistas, que analizamos a continuación. Para activar dicha barra de vistas si no lo está pulsaremos el botón siguiente de la barra de herramientas:

El botón de activar vistas es el que está a la izquierda de imprimir

Cada vista muestra diferentes tipos de información sobre el web y permite trabajar con el sitio web de diferentes formas.

La primera mirada a FrontPage nos deja ver una ventana dividida en dos zonas. La parte mas grande, en blanco, es la zona de trabajo mientras que a su izquierda hay una barra con una serie de elementos que nos permitirán acceder a las diferentes vistas.

Estos elementos son:

Vista exploración: Al pulsarlo podremos ver en la zona de la derecha la estructura del sitio y agregar elementos si queremos.

 

Vista Pagina: Cuando pulsamos este icono tenemos a la derecha el área de la página web y podemos escribir en ella, insertar elementos, en fin, editar la página

Del mismo modo las siguientes:

Explorador de Carpetas: Para ver el sitio en forma de carpetas y ficheros como en el explorador de Windows.

Informes: Aquí nos informamos de si el sitio tiene páginas lentas, archivos no vinculados, hipervínculos rotos, etc.

Hipervínculos: Para ver un esquema de navegación del sitio en el que aparecen en forma de flechas los vínculos entrantes y salientes de cada página.

Tareas: No se usa mucho, al menos en los inicios.

Cuando estamos editando nuestra página ( En vista de página) tendremos en la parte inferior tres lengüetas: Normal, HTML y Vista previa 

Normal: Es donde editamos nuestra página, es decir, donde podemos agregar el texto, gráficos, etc. 

HTML: Permite ver y modificar el código interno de la página en lenguaje HTML.

Vista previa: Púlsela para ver la página tal y como se vería en el navegador.

 

Vista página: Muestra las páginas individuales con la que se está trabajando, permitiendo hacer cambios o ajustes Vista carpetas: Contiene dos partes, con la lista detallada de páginas y ficheros de la carpeta seleccionada del sitio web. Se utiliza esta vista para la gestión de ficheros (cambiar nombres, crear carpetas,....) Vista Informes: Se emplea como ayuda para la gestión de las páginas dentro de la web. FrontPage trabaja con un sitio web constituido por partes más pequeñas (archivos) Vista Exploración: También conocida como mapa del sitio. Nos muestra la estructura de navegación del sitio web. Vista Hipervínculos: Ofrece todos los hipervínculos de la web Vista Tareas: Para mantener una lista de tareas en curso a medida que construye el sitio web. Es especialmente útil si en el sitio trabaja más de un desarrollador. Si te resulta molesto tener esa ventana abierta continuamente (ya que te come espacio en la pantalla), puede desactivarla, seleccionando "Ver" y luego desactivando "Barra de vistas"

Si trabajamos en la edición de una página para añadir y modificar elementos (texto, imágenes, gráficos,...) utilizaremos la vista página, que a su vez tiene otras tres vistas:

1) Vista Normal: En esta opción vemos la página web en formato WYSIWYG ("What you see is what you get" , "Lo que ves es lo que obtienes"). Para diseñar la página web colocamos el texto, imágenes y demás elementos de la misma forma que lo veremos en Internet. Hay, lógicamente, algunas variaciones respecto a la apariencia final del texto: si se incluyen imágenes animadas, en esta vista se ven estáticas. Lo mismo sucede con vídeos o archivos de sonido. Los enlaces no son efectivos en esta vista. 2) Vista HTML: Podemos visualizar el código HTML si queremos retocarlo para hacer algo que no podamos con FrontPage o para insertar código HTML que hemos descargado de otra página de Internet, como puede ser un JavaScript (por ejemplo, el que te permite visualizar en el documento la fecha de la última modificación). En esta vista es necesario conocer los fundamentos y la estructura del lenguaje HTML para poder intervenir en él sin errores. 3) Vista previa: Aquí podremos comprobar como se visualizará nuestra página en el navegador. Es importante advertir que al utilizar FrontPage, al activar Vista previa se verá la web en el Internet Explorer de Microsoft y éste presenta algunas diferencias de presentación de páginas con los demás navegadores como el de Netscape.

Podemos ver las diferentes vistas en el siguiente ejemplo:

VISTA NORMAL	VISTA HTML	VISTA PREVIA

Después de crear un sitio web en FrontPage es casi seguro que desearemos añadir nuevas páginas al sitio. La mayoría de la construcción de las páginas se hará empleando la vista página, a través del menú Archivo - Nueva página, que funciona de forma idéntica a todos los programas.

Es importante crearnos una estructura de carpetas y subcarpetas para guardar todas las páginas que vayamos creando y todos los ficheros (GIF, JPG, ZIP, PDF,. ...) que incluyamos en nuestro sitio web.

Para hacer un sitio web nuevo con frontpage primeramente pulsa: Archivo > Nuevo > Web y elige la opción Web vacío.

Con lo cual quedarán creadas las carpetas images y _private.

private es para guardar elementos que deben estar en nuestro sitio

images es para guardar las imágenes

Luego pulsamos:

1. Exploración.

2. Nueva Página.

Y se crea una página nueva como se puede apreciar en la vista de exploración

3. Hacemos clic derecho sobre la nueva página que creamos y seleccionamos Nueva Página otra vez, creando así una página secundaria y así sucesivamente.

4. Ahora haciendo doble clic encima de cada una de estas páginas pasamos directamente a agregar contenido en ellas o a realizar modificaciones.

Barra de herramientas estándar: Contiene los botones para creación, apertura, guardado e impresión de páginas además de tareas específicas web como crear hipervínculos e insertar imágenes

Barra de herramientas formato: Contiene los botones y listas desplegables para dar formato al texto

Barra de herramientas DHTML (HTML dinámico): Permite añadir efectos especiales a la página, como intercambio entre dos imágenes

Barra de herramientas Imágenes: Controlar el formato de las imágenes y convertir las imágenes en mapas de imagen.

Barra de herramientas Tablas: Para simplificar el uso de las tablas en FrontPage

Una vez vista la interfaz de FrontPage ya podemos crear una página nueva en la cual incluiremos los elementos que necesitemos (texto, imágenes, hipervínculos, tablas, archivos,....).

Para añadir texto a una página, simplemente hay que abrirla y comenzar a teclear en la vista página, o bien copiar y pegar un texto de archivo de texto. El funcionamiento es exactamente igual que el de un procesador de textos.

Si has trabajado con Word no hay nada nuevo que explicar.

Para los que no estén familiarizados con el Word o similares diremos que:

Para aplicar algo a un texto primero hay que seleccionarlo y luego...

Es posible elegir el tipo de letra pulsando en fuente,

Es posible elegir el color de letra desplegando el menú de colores A,

El tamaño...

y el tipo de alineación.

También podemos dar color de fondo a la página del siguiente modo: Formato >Fondo o bien  Formato >Propiedades  y hacemos clic en la ficha Fondo. Una vez allí podemos elegir el color de fondo, el color del texto, de los hipervínculos, podremos optar por colocar una imagen de fondo que se multiplicará en mosaico, o bien tomar la información del fondo de una página que bien podría ser la principal si estamos en otra y de esa forma solo habría que cambiarle el color a la principal si se lo queremos cambiar a todo el sitio.

Guarde su trabajo. Al guardar una página por primera vez, nos encontraremos con la ventana Guardar como donde podremos colocar el nombre del archivo y el Título de la página.

Nota: Si al escribir, nos parece exagerado el espacio entre párrafo y párrafo, podemos incluir un salto de línea presionando MAYÚS+INTRO.

 

Vamos a intentar hacer una hoja como esta Empecemos con algo sencillo, manejando diferentes estilos, colores, insertando algún dibujo, enlaces...

Alineación de párrafos:

Por defecto se alinean con el borde izquierdo de la ventana, pero se puede cambiar su alineación a través de los botones de la barra de herramientas.

Alineación derecha - centrada - izquierda

Alineación justificada Para aplicar la alineación justificada debemos seleccionar un párrafo, y luego seleccionar el menú Formato, Párrafo, en el siguiente cuadro. En esta ventana podemos configurar la alineación del párrafo, las sangrías del texto, el espaciado entre párrafos y el interlineado dentro de un párrafo.

Es frecuente la utilización de algunos símbolos, conocidos como caracteres especiales. A menudo emplearemos los símbolos ® (registered), © (copyright) y otros más que podemos encontrar en el menú Insertar, Símbolos.

Insertar un salto de línea En la vista página la inserción de un salto de párrafo se consigue pulsando Intro. En cambio, si lo que queremos es un salto de línea lo haremos a través del menú Insertar, Salto de línea o con la combinación de teclas Mayús + Intro.  Cuando  queremos hacer un salto de línea nos aparece la siguiente ventana para configurarlo.

Corrección ortográfica:

Al igual que con cualquier procesador de textos, una vez hayamos editado nuestra página es imprescindible que pasemos el corrector ortográfico para detectar posibles errores y evitar la mala imagen que causa una web con faltas gramaticales y de ortografía. Para ello, seleccionamos el menú Herramientas, Ortografía.

Formato de texto:

Modificar el formato de texto se hace de forma similar a un procesador de textos. A partir de la barra de herramientas Formato podemos modificar el tipo y tamaño de la fuente, ponerla en negrita, cursiva o subrayado, cambiar el color o el relleno de la fuente

Numeración y viñetas:

Para hacer esquemas numerados tenemos la misma herramienta que en los procesadores de textos. Podemos hacer esquemas con viñetas y con números y lo haremos a través de los iconos correspondientes en la barra Formato o a través del Menú Formato, Viñetas y numeración.

Es muy importante poner título a cada página que editemos ya que es el nombre que aparecerá en la barra de título del navegador y ayuda a identificar el contenido de la página. Es importante pues es en lo que se fijan los buscadores.

Para poner el título a una página pulsamos botón derecho del ratón en la página y Propiedades de página hasta que aparece una ventana en la cual podemos poner el título:

Podemos añadir imágenes prediseñadas de FrontPage, imágenes que tengamos guardadas en el disco duro o imágenes de Internet.

Por ejemplo, vamos a coger la imagen de la izquierda de Internet o de cualquier programa de edición de imágenes, copiarla del Navegador y pegarla en el FrontPage. Ten en cuenta, por si te preocupan los resultados finales, que el programa guardará "anidada" en el correspondiente directorio, dicha imagen, incluso aunque tú no le hayas especificado que deseas que la próxima vez que se abra el programa aparezca visualizada.

Desde el propio programa podemos incluso modificar en parte la imagen. Por ejemplo, voy a coger la imagen que nos ha servido de fondo en otras páginas, y mostrar algunas posibles modificaciones:

Abrimos, una vez seleccionada la imagen, haciendo clic con el botón derecho del ratón, la venta "propiedades de imagen"

Podemos, por ejemplo, cambiar el tamaño, su alineación, etc., e incluso deformarla:

Cuando la imagen está seleccionada, se abre en la parte baja del programa una barra de herramientas de modificación del mismo, con la que podemos darla más o menos brillo, color, etc.:

Podemos traer la imagen delante o detrás del texto, voltearla, hacer zonas transparentes, dar más o menos brillo, color, etc., enmarcarla...

 

 

 

 

 

Hemos enviado la imagen tras el texto

 

 

 

 

 

La hemos dado un efecto "biselado" y hemos hecho el cielo transparente.

La transformamos en miniatura, biselada, en blanco y negro...

Para insertar una imagen podemos hacerlo también a través del botón de la barra de herramientas Estándar

Haciendo clic en este botón insertaremos una imagen desde una carpeta de nuestro disco duro. Es buena costumbre guardar todas las imágenes en una carpeta independiente de donde guardamos los archivos html.

¿Imágenes en formato Gif o Jpeg? Es fundamental conocer que las imágenes deben estar en formato GIF o JPEG para poder ser visualizadas por la mayoría de los navegadores. Las características de ambos formatos son las siguientes: GIF Apropiado para logotipos. Está comprimida de forma que no pierde definición. El máximo número de colores que soporta es de 256. Admite la propiedad de transparencia, que permite que las imágenes compartan el mismo color de fondo de la página. Igualmente se pueden crear los GIF animados como sucesión de diferentes imágenes. JPEG Apropiado para imágenes complejas y para fotografía. JPEG comprime y destruye parte de la información de la imagen. Soporta hasta 24 bits de colores y no admite transparencias.

En el menú [Insertar - Imagen] podemos seleccionar una imagen prediseñada de FrontPage o una imagen que contenga nuestro disco duro. Nos aparecen las siguientes ventanas:

El funcionamiento de las imágenes prediseñadas es idéntico que con Word o Excel.

Una vez que la imagen está en la página podemos cambiar algo en ella, como la alineación, el tamaño, el borde e incluso añadir un texto que aparecerá cuando situemos el ratón encima de la imagen. Para ello haremos clic en el botón derecho de la imagen para que nos aparezca la siguiente pantalla.

Podemos modificar el origen de la imagen, eligiendo el archivo GIF o JPG que se corresponde con el que queremos insertar en la web. Podemos darle a la imagen GIF la propiedad de transparente, añadir un texto que se mostrará cuando situemos el ratón encima de la imagen (en forma de etiqueta amarilla) y especificar un hipervínculo.

¿Dónde encontrar imágenes? Es habitual incluir en una web imágenes que hagan más agradable la visita a la página además de que son imprescindibles en el entorno gráfico web. En Internet podemos encontrar todo tipo de imágenes: fotografías, dibujos, imágenes animadas, etc, que podemos encontrar a través de los buscadores como Google, (http://images.google.com/) que incorpora un buscador de imágenes. En nuestro epígrafe "Recursos" indicamos la posibilidad de encontrar gifs animadas. Algunas de ellas las puedes encontrar en nuestra carpeta Gif.

Es imprescindible tener en cuenta el tamaño de las imágenes que vayamos a incluir en una página web ya que cuanto mayor sea supondrá un tiempo de carga superior de la página y esto puede llevar al visitante a abandonar la web dependiendo de la conexión que tenga. Los formatos utilizados para las imágenes son GIF y JPEG por su adecuado grado de compresión y ser visibles por todos los navegadores.

UltimateFX es un programa de tratamiento de imágenes gratuito y muy sencillo de manejar. En Ciberconta podemos descargarlo y consultar un tutorial: (http/ciberconta.unizar.es/LECCION/web/imagenes.htm). Otro programa (en este caso de pago) recomendable es Adobe Photo Deluxe. Más adelante explicaremos algunos aspectos de su funcionamiento.

Los divisores son líneas horizontales que emplearemos para situarlos debajo e las cabeceras, entre las partes de un artículo o en cualquier lugar que deseemos. 

Existen dos tipos de divisores: reglas horizontales (<hr> en lenguaje HTML; Insertar, Línea horizontal en FrontPage) y gráficos que parecen líneas.

Para insertar un divisor pulsamos en el menú Insertar, Línea horizontal. 

Posteriormente podemos cambiar las propiedades de dicha línea (anchura, altura, color, sombreado,...) pulsando con el botón derecho del ratón al divisor de forma que nos aparezca esta pantalla.

El color de fondo en una web es fundamental desde el punto de vista del diseño, hay que elegir fondos con colores simples y armoniosos, que "no hagan daño a la vista". Seguramente pocos aguantaríamos visualizar una web con un fondo naranja chillón y texto verde brillante.

Para establecer el color de fondo de una página, nos situamos en la vista normal y allí seleccionamos [Formato, Fondo] o con el botón derecho del ratón en la página que estamos creando, activar Propiedades de página hasta llegar a la siguiente ventana:

En esta ventana podemos modificar diferentes aspectos de la página:

• Colores de fondo, texto y de los hipervínculos
• Si queremos colocar una imagen como fondo de la web y si queremos añadirle una marca de agua, para que aparezca en el fondo de forma estática.

Ejemplo:

Los hipervínculos o enlaces o links diferencian la web de otros medios. Un hipervínculo supone enlazar la página web que estamos visualizando con otra página web, otra sección de la misma página, con un archivo, un servidor FTP, un archivo o una aplicación para descargar, una secuencia de sonido, vídeo o multimedia, una dirección de correo o un grupo de noticias.

Los Hipervínculos 

Los hipervínculos son conexiones entre dos archivos. Podemos insertar un vínculo en una palabra, frase o imagen, de modo que al hacer clic sobre esta, el explorador abra una nueva página o un nuevo archivo.

Ejemplo: Si pulsas este_hipervínculo se abrira una página curiosa. Cierra la ventana pulsando [X] para continuar.

Para insertar un vínculo a una página o archivo de nuestro sitio Web, primero escribimos la palabra o frase correspondiente, la seleccionamos.

Luego hacemos clic en Insertar> Hipervínculo, o bien pulsamos en el icono de un globo terráqueo con una cadena en la barra de herramientas. En el cuadro de dialogo, aparecerá una lista de los archivos de nuestro sitio, elegimos uno (al que queremos que se dirija el hipervínculo) y presionamos Aceptar.

Luego veremos que la palabra aparecerá subrayada en un color diferente.

Nota: Para insertar un vínculo a una dirección (URL) de otro sitio o página Web de Internet, la escribimos en el recuadro Dirección URL. Igualmente, si escribimos esa dirección en la vista página, FrontPage la reconocerá como tal y creará un hipervínculo automáticamente, lo mismo sucederá con las direcciones de correo electrónico.

Para insertar un vínculo a un archivo que esté en nuestro ordenador, hacemos clic en el icono de una lupa con una carpeta (), el segundo  a la derecha, y  buscamos el archivo en nuestra máquina. Posteriormente, FrontPage creará una copia de ese archivo que se guardará en nuestro sitio.

Para insertar una dirección de correo electrónico, debemos hacer clic en el icono del sobre (el tercero a la derecha) o escribir en el recuadro de Dirección URL: mailto:nombre@servidor.com , es decir la palabra "mailto" seguida de dos puntos y la dirección a la que queremos vincular.

 Por ejemplo, en uno de los marcos nos encontramos con una imagen gif animada que está enlazada con un correo electrónico:

Para ello, primero hemos insertado la imagen. A continuación, la seleccionamos, y con el botón derecho abrimos un menú contextual:

En la ubicación del hipervínculo, hemos escrito "mailto" ("correo para") y nuestra dirección de correo.

Y por último, si deseamos crear un link a una página nueva (que aún no ha sido creada), hacemos clic en el cuarto icono, con un dibujo de una hoja de papel en blanco, y se abrirá una página lista para ser editada   (aunque no se guarda hasta que presionemos Guardar).

Los marcadores (Vínculos dentro de la misma página)

Otra clase de hipervínculos son los llamados marcadores, los cuales unen distintos puntos de una misma página. Son muy útiles para las páginas largas.

Para insertar un marcador primero seleccionemos cual va ser el punto de destino en la página, situemos el cursor ahí y vayamos a Insertar / Marcador. Aparecerá el cuadro de diálogo de los Marcadores y se nos pedirá un nombre cualquiera para el mismo. Una vez hecho esto, pulsamos Aceptar. 

Ahora iremos al lugar de la página en donde insertaremos el hipervínculo, y como hicimos antes, seleccionamos la palabra, frase o imagen y seleccionamos Insertar> hipervínculo. En el cuadro de diálogo hacemos clic en el menú desplegable Marcador y elegimos el nombre del marcador que hemos creado (puede haber muchos en una misma página).

 

Con FrontPage es muy sencillo crear un hipervínculo, con el botón Hipervínculo de la barra de herramientas estándar o con el menú [Insertar, Hipervínculo]. O con el botón derecho.

---

a) Enlazar a otra página de nuestra web:

Se denomina enlace interno y consiste en enlazar un punto a otro documento dentro del mismo web. Podemos crear una página llamada experiencia.htm. Para crear un link desde index.htm hacia esta página simplemente seleccionamos la palabra experiencia, ejecutamos [Insertar, Hipervínculo] y en la ventana que aparece seleccionamos el fichero experiencia.htm y pulsamos aceptar.

Esto también sirve para descargar un documento en word, pdf, excel. Simplemente se elige el documento que queremos que descargue el usuario.

Por ejemplo, vamos a proponer un enlace con un documento pdf sobre la historia de Internet:

 

** Enlaza con el documento aquí **

Truco para hacer documentos pdf El programa para leer documentos pdf, es el Adobe Acrobat Reader, disponible en la página de Adobe (http://www.adobe.com/). pero para escribir documentos pdf hay que comprar el Adobe Acrobat. No obstante en esta página nos dejan convertir 5 documentos Word a Pdf gratis (https://createpdf.adobe.com/). Funciona online, no hay que instalar nada.

---

b) Enlazar a una página en la World Wide Web

Se especifica el camino completo hacia el archivo, poniendo la dirección URL. Por ejemplo, si queremos colocar un enlace con la página principal de la supuesta Universidad Popular Pablo Iglesias, seleccionamos profesor de la "Universidad Popular Pablo Iglesias" y haremos lo siguiente:

 

---

c) Enlazar con una página nueva

En ocasiones puede ocurrir que hemos enlazado a una página que todavía no hemos creado. Podemos hacer las dos cosas a la vez, el enlace y crear la página. Para ello, en la ventana de Insertar, Hipervínculo elegiremos el botón para enlazar con nueva página. Posteriormente elegiremos el tipo de página que queramos crear y ya podremos entrar a editarla.

---

d) Enlazar con otra parte dentro del mismo documento

Los enlaces dentro del mismo documento permiten a los visitantes de su página hacer clic y saltar rápidamente a otra parte de ese documento. Por ejemplo, esto es habitual cuando se crea un índice al principio del documento para que los usuarios puedan ir saltando por los apartados del índice. Igualmente es conveniente crear otro enlace para volver a la parte superior. A las partes del documento con la que queremos enlazar se le denomina marcador. El procedimiento para crearlo es el siguiente:

1)	En la barra de menús, seleccionar Insertar, Marcador en aquel lugar en el que queramos situarnos después de enlazar. Nos aparecerá la siguiente ventana:
		En esta ventana elegiremos el nombre del marcador y pulsamos Aceptar. A medida que vayamos añadiendo marcadores en el documento se irán añadiendo en la lista "Otros marcadores" para que luego al crear el hipervínculo elijamos el que nos interese.
2)	Una vez creado el marcador, es el momento de crear el enlace. Para ello, en la barra de menús seleccionamos Insertar, Hipervínculo hasta que nos salga la ventana inicial y elegimos de la lista desplegable el marcador con el que queramos enlazar de la siguiente forma:

Podemos crear los hipervínculos a partir de texto e imágenes, de forma que pulsando en ellos nos lleve a otra parte de la misma página, a otro archivo o página de nuestro sitio web o a una dirección URL. Para ello seleccionamos el texto o la imagen y pulsamos [Insertar, Hipervínculo].

Abrir en ventana nueva Podemos configurar como queremos que se abra la nueva página después de hacer clic en el hipervínculo. Se puede abrir en la misma ventana o crear una nueva ventana para no perder la página anterior. Esta última opción es muy útil, ya que es habitual navegar en Internet a través de los enlaces y es posible perder u olvidar la página de referencia inicial. Para ello, en la ventana del menú Insertar, Hipervínculo podemos seleccionar como queremos que nos aparezca la página con la que hemos enlazado. Pulsando en el lápiz ....... Entre los destinos comunes de un hipervínculo podemos elegir Nueva ventana (la nueva página se abrirá aparte).

Las tablas constituyen una forma de organizar y presentar información a través de filas y columnas que agrupan elementos relacionados. En el diseño web son fundamentales y constituyen actualmente la piedra angular en el diseño de páginas web, ya que la mayoría de las páginas no serían posibles sin el uso de tablas. En HTML las tablas se emplean para crear columnas de texto, para integrar textos e imágenes, para crear márgenes amplios o cuadros laterales y para cualquier otro uso que le sepamos dar. 

Crearemos una tabla de tres columnas y tres filas, en la que podemos insertar fotografías y el texto que corresponda.

Empresa	Puesto	Fecha
Ebroman	Contable	Junio 2001-diciembre 2001
Talsa	Jefe Contabilidad	Diciembre 2001 - marzo 2002

Insertar una tabla con FrontPage es muy fácil y basta con usar el botón Insertar tabla de la barra de herramientas estándar de FrontPage. Pulsando este botón nos aparece un pequeño menú con el que seleccionaremos el número de filas y columnas. Igualmente podemos insertar la tabla a través del menú [Tabla, Insertar tabla]. 

Podemos seleccionar el número de filas y columnas y todo lo relativo en cuanto al diseño de la tabla (alineación, tamaño del borde, margen y espaciado entre las celdas y ancho de la tabla).

Una vez creada la tabla es interesante que abramos la barra de herramientas Tablas, ya que incluye todas las herramientas para manipular una tabla. Para mostrar esta barra, en la barra de menús Ver, Barras de Herramientas, Tablas.

El significado de cada uno de los botones es el siguiente:

	Dibujar una tabla o un límite de celda
	Borrar los bordes entre celdas
	Añadir una fila por encima de la fila seleccionada
	Añadir una columna a la izquierda de la columna seleccionada
	Eliminar las celdas seleccionadas
	Fusionar las celdas seleccionadas en una sola
	Dividir por la mitad la celda que está seleccionada
	Alinear el texto con el borde superior de la celda seleccionada
	Centrar el texto verticalmente en la celda seleccionada
	Alinear el texto verticalmente en la celda seleccionada
	Igualar el espacio disponible entre filas
	Igualar el espacio disponible entre columnas
	Configurar el color de fondo para la tabla
	Ajusta automáticamente las columnas y las filas, una vez que ha terminado de dibujar la tabla.

Es habitual que las tablas se visualicen en Internet sin los bordes, ya que la utilidad mayor es la organización de los contenidos (textos e imágenes) en cuadrículas y es más estético que los bordes no aparezcan en la web. Para ello con el botón derecho podemos acceder a [Propiedades de Tabla].

En una tabla podemos colocar casi cualquier elemento HTML y ello incluye también otras tablas, lo que se conoce como anidamiento. Es una de las herramientas fundamentales en el diseño web, la posibilidad de generar tablas dentro de otras tablas para poder cambiar fondos, tipos de letra, bordes, etc. de una forma más eficiente.

En este gráfico mostramos como podría ser el boceto de una web cuyo diseño se haya hecho con tablas:

En todas las celdas de una tabla podemos alinear texto, cambiar la anchura y altura, personalizar el fondo y los colores. La forma de realizar estas tareas es seleccionando las celdas y a través del menú tabla, propiedades de celda y cambiar las opciones deseadas. Nos aparece esta ventana:

Aunque el Front Page es muy sencillo de usar siempre es interesante ver el código fuente para conocer como el lenguaje HTML que hay por debajo. Para ello pulsamos en la pestaña [HTML].

Truco para copiar efectos vistos en otras páginas Esta opción de ver el código fuente sirve para cuando uno ve efectos interesantes en otras páginas copiar el código y pegarlo en nuestras páginas. Para ello en la página web seleccionamos la opción [Ver - Código fuente]. Copiamos el texto del efecto con [Control c]. Y en el Front Page seleccionamos la opción [Insertar - Avanzadas - HTML] y pegamos dicho texto con [Control V]

Front Page permite poner más efectos especiales, elementos de diseño avanzado como

· Marcos
· Mapas de imágenes
· Multimedia
· Hojas de estilos
· Formularios
· HTML dinámico

Algunos de ellos no se verán bien en navegadores que no sean de la familia de Microsoft o no funcionan si no está alojados en servidores de la familia de Microsoft. Recomendamos moderarse y leer la auyuda del FrontPage.

Vamos a ver cómo se crea una página con marcos. 

- FrontPage contiene plantillas con marcos prediseñados. Es difícil no encontrar una que se ajuste a tus necesidades.

- Por tanto, basta abrir una plantilla y ajustarse a ella:

1º- Archivo-Nuevo-Página.

2º- Seleccionamos la pestaña "Páginas con marcos"

Abajo a la derecha nos muestra esquemáticamente el formato de la página. Puedes elegir una página con un marco estrecho a la izquierda, como en la que estamos seleccionando en la imagen anterior, con otro marco más de encabezamiento, etc. Si seleccionamos el que vemos:

 

Ya tenemos una página con marcos. Ahora debemos indicar qué página queremos que aparezca en el marco de la derecha, y qué página deseamos para el marco principal, el del centro. Podemos fabricar una nueva página, o anidar en el marco una página ya creada, en cuyo caso seleccionamos "Establecer página inicial". Hemos seleccionado uno de nuestros marcos laterales ya empleados:

Ahora haríamos lo mismo con el otro marco:

Ten muy presente que si el navegador de quien acceda a nuestra página no dispone de sistema de marcos, no la verá, sino que en su lugar aparece lo que figure en nuestra pestaña "Sin marcos", que si no hacemos nada será:

Podemos incluir en esta página una nueva página web para quienes no tengan posibilidad de ver marcos, en la que se dé una información muy parecida, pero sin esa división de la pantalla. Por ejemplo, podríamos incluir en esa misma pestaña ("Sin marcos") el cuerpo central de nuestra página:

 

 

 

 

<Applet>: algunos efectos especiales para las páginas Otros efectos son las etiquetas <APPLET> </APPLET> que permiten la ejecución de un programa externo escrito en el lenguaje de programación Java. Hay applets muy variados. Podemos ver un ejemplo de uno de estos applet pinchando aquí.

 

Usando un cliente FTP

Cuando les lleguen las instrucciones les llegará también la dirección del servidor ftp, su directorio raíz, su nombre de usuario y su contraseña.

Cuando abran el cliente CuteFTP, verán esto:

Pero esta ventana debe cerrarse en la esquina superior derecha. Una vez cerrada esta ventana nos quedaremos con la ventana principal que es la siguiente:

Ahora debes configurar la conexión vía FTP con el servidor, esto se hace de la siguiente forma:

Hacemos clic sobre Quick Conect segundo botón en la esquina superior izquierda.

Escribimos la dirección FTP del sitio en FTP Site; por ejemplo: ftp.geocities.com

En user ID colocamos el identificador de usuarios que además es la parte final de la dirección de nuestra página.

En password colocamos el que dimos cuando obtuvimos el espacio en el servidor.

Finalmente presionamos Connect y comenzará el proceso de conexión.

Si es la primera vez que publican, les conviene hacer lo siguiente:

1. Sitúense en el directorio raíz del sitio a publicar (en su disco rígido).
2. Seleccionen el primer archivo o carpeta de la lista, diríjanse al final y, presionando la tecla Shift al mismo tiempo, seleccionen el último archivo o carpeta.
3. Arrastren toda la selección al sitio remoto (ventana de la derecha).

 

Y para hacer más bonita nuestra página web podemos poner multitud de efectos, como

·Un contador estadísticas para controlar los accesos a nuestra web  ·Un foro que permite la comunicación entre profesores y alumnos sin necesidad de estar en el mismo sitio y a la misma hora  ·Añadir un buscador interno si nuestro sitio web contiene un gran número de páginas  ·Encuestas que permiten saber la opinión de los alumnos  ·Poner correo para fidelizar a los alumnos  ·Charlar con los usuarios útil para quedar a determinadas horas o como tutoría telemática.  ·Chequear enlaces que han dejado de funcionar  ·Ganar dinero con publicidad si tenemos muchas visitas  ·Poner titulares de noticias en tiempo real motiva a visitar la web con mayor frecuencia  ·Traducir a otros idiomas como inglés o francés automáticamente  ·Efectos en Java podemos añadir todo tipo de efectos en páginas que nos ofrecen el código listo para copiar y pegar  ·Más trucos para sobresaliente

 

Nota: Este tutorial se ha efectuado tomando como base el programa Edición de páginas web con Frontpage (http://ciberconta.unizar.es/leccion/frontpage) de Fernando Mur .

 

UN EJEMPLO GRÁFICO DE CREACIÓN DE UNA SENCILLA PÁGINA WEB CON FRONTPAGE

A continuación haríamos un enlace a una página distinta con cada uno de los aspectos señalados. Para el caso de Currículum vitae, crearíamos un hiperenlace

Fíjate que el texto ha cambiado ya de color, porque ahora es un hiperenlace

Creamos una página nueva con el mismo fondo e imagen lateral, a la que guardamos con el nombre de "curriculum.htm", y que ya hemos visto está enlazada con la anterior:

Repetiríamos el mismo proceso con cada uno de los ítems señalados en la página INDEX, teniendo en cuenta que para facilitar la navegación es preciso enlazar todas las páginas entre sí, o al menos cada página con la portada o INDEX.

ENLACE CON EL TUTORIAL DE TRATAMIENTO DE IMÁGENES

 Para volver a la página principal