Este documento proporciona información sobre cómo crear y diseñar sitios web usando FrontPage. Explica que FrontPage genera código extraño y archivos basura, y que lo mejor es crear una barra de herramientas personalizada. También describe los fundamentos básicos de sitios web, páginas web y cómo organizar archivos. Proporciona pasos para crear un nuevo sitio web, ajustar propiedades de página, agregar imágenes, sonido y transiciones.
2. Introducción
• FrontPage genera lo que podríamos llamar
código extraño, una especie de tiras de texto
cifrado, cabalístico, que sólo utiliza el
programa y seguramente nadie más en el
mundo. A eso lo define como código fuente. El
problema es que, además, FrontPage crea
archivos y etiquetas basura, que aumentan el
peso de nuestros websites y el tiempo de
transferencia y publicación.
3. BARRA DE HERRAMIENTAS
• Lo mejor es crear nuestra propia barra personalizada. la mejor idea es
probar todas ellas, con todas sus funciones, hasta descubrir cuáles son las
que realmente resultan útiles de forma frecuente, y aquellas de uso más
inusual. Al final es normal que creemos nuestra propia barra, para
eliminar del escritorio elementos innecesarios. Las barras de herramientas
más comunes para el usuario principiante son: estándar, con los botones
típicos de guardar, abrir, página nueva, deshacer, rehacer, etc.; formato,
para aplicar tipografías y párrafos al texto (FrontPage admite la
justificación de párrafos, pero solo desde Formato> párrafo> alineación,
sin disponer de un botón específico en la barra de formato); tablas, para
construir tablas y modificar sus propiedades; imágenes, para insertar
gráficos, cambiarles el tamaño y la resolución, crear mapas de imágenes,
modificar luz, contraste, etc.; efectos DHTML, para aplicar animaciones
automáticas o de reacción a las páginas; exploración, para controlar la
estructura de un sitio web; e informes, que nos detalla las páginas lentas,
anticuadas, etc.
4. FUNDAMENTOS BÁSICOS
• Vamos a empezar aclarando conceptos para evitar confusiones.
• Llamaremos sitio web a una publicación en Internet por una empresa o un
particular. Por ejemplo, www.jcyl.es es el sitio web de la Junta de Castilla y León,
www.google.com es un sitio web que nos ayuda a buscar en Internet lo que
queremos, etc.
• Un sitio web se compone normalmente de muchas páginas web. Por
ejemplo, el sitio web de un colegio puede tener una página inicial de presentación,
una dedicada a proyectos, una de servicios extraescolares, una de fotografías, etc.
• Cada página web es un archivo, que se transmite a través de las líneas
telefónicas desde el servidor hasta los usuarios, cuyo ordenador mostrará en
pantalla el contenido del mismo. Las páginas web suelen ser archivos con la
extensión .htm o .html. También existen otras, como son .asp o .php, pero esto
son otros tipos de código que no trabajaremos con el FrontPage.
• En un sitio web se terminan juntando cientos de archivos: archivos .html
(las páginas web propiamente dichas), archivos .jpg y .gif (imágenes), archivos .pdf
(documentos para imprimir), archivos .wav y .mid (sonidos) e incluso archivos
.wmv, .avi o .mpeg (videos).
•
5. CREAR UN SITIO WEB
• Vamos a crear un sitio web. Lo primero que tenemos
que entender es que vamos a generar un gran conjunto
de archivos que tenemos que tener muy bien
organizados en carpetas para poder establecer los
enlaces entre ellos sin volvernos locos.
• Tenemos que tener en cuenta que nuestro sitio web,
mientras esté en construcción, se almacenará en
nuestro disco duro. Cuando ya esté terminado lo
publicaremos en internet siguiendo el proceso que ya
veremos en su momento.
6. PASOS
• 1. En el menú Archivo, hacer click en Nuevo:
• 2. A la derecha nos sale un panel de tareas donde seleccionaremos Sitio Web de Una Página:
• 3. A continuación nos sale una ventana como esta: Aquí podemos elegir una plantilla para hacer
nuestro sitio web, en el caso de que alguno de los modelos se adapte a nuestras intenciones.
Normalmente no será así, por lo que elegiremos Sitio Web de una página. A continuación tenemos
que especificar la ubicación del nuevo sitio web (en que parte de nuestro ordenador lo vamos a
guardar), para lo cual pincharemos en examinar.
• 4. A continuación nos sale esta ventana, donde tenemos que seleccionar la carpeta donde
guardaremos el nuevo sitio web. Entonces pincharemos en , y dentro de Mis documentos, haremos
una carpeta nueva pinchando en el icono . Entonces nos saldrá la ventanita donde solo tendromos
que introducir el nombre de la carpeta y darle a aceptar y luego a abrir y ya está.
• Una vez creado el sitio web, esto es lo que vamos a ver. En el panel blanco de la izquierda se
muestra la lista de carpetas. Como podemos ver, hay una carpeta _private, donde se almacenan
archivos que no van a estar accesibles al público, y una carpeta images, donde guardaremos las
imágenes para que no estén mezcladas con el resto de archivos.
También podemos ver que se nos ha creado nuestra primera página: index.htm. Esta va a ser
nuestra página principal. Por supuesto, ahora está en blanco. Nuestra siguiente labor será crear
nuestras propias carpetas y páginas, y después llenarlas de contenido.
7. PROPIEDADES DE PÁGINA
• Cada vez que creamos una página nueva, lo primero que conviene hacer es ajustar sus propiedades.
Para ello:
• 1. Abrimos la página haciendo doble click sobre ella en la lista de carpetas que aparece a la
izquierda. La página se nos muestra a la derecha, lo que pasa es que de momento está en blanco.
• 2. Una vez que la página está abierta (lista para trabajar en ella), vamos al menú Archivo y
pinchamos en propiedades:
•
• 3. Nos sale una ventana en la que tenemos que introducir:Título: Es el que se va a mostrar en la
parte superior del navegador de quienes visiten esta página. También aparecerá como título de
nuestra página en los buscadores (google, yahoo, msn, etc.)
• Descripción de la página: también aparecerá en algunos buscadores, debajo del título.
• Palabras clave: las utilizan algunos buscadores para identificar los temas principales de nuestra
página. No hay que abusar de las palabras clave, o nos podrán penalizar (si ponemos demasiadas).
• Ya solo nos queda pinchar en Aceptar.
• Es importante hacer esto con cada una de las páginas de nuestro sitio web.
8. COLOR DE FONDO
• Cada vez que creamos una página nueva, lo primero que conviene hacer es ajustar sus propiedades.
Para ello:
• 1. Abrimos la página haciendo doble click sobre ella en la lista de carpetas que aparece a la
izquierda. La página se nos muestra a la derecha, lo que pasa es que de momento está en blanco.
• 2. Una vez que la página está abierta (lista para trabajar en ella), vamos al menú Archivo y
pinchamos en propiedades:
•
• 3. Nos sale una ventana en la que tenemos que introducir:Título: Es el que se va a mostrar en la
parte superior del navegador de quienes visiten esta página. También aparecerá como título de
nuestra página en los buscadores (google, yahoo, msn, etc.)
• Descripción de la página: también aparecerá en algunos buscadores, debajo del título.
• Palabras clave: las utilizan algunos buscadores para identificar los temas principales de nuestra
página. No hay que abusar de las palabras clave, o nos podrán penalizar (si ponemos demasiadas).
• Ya solo nos queda pinchar en Aceptar.
• Es importante hacer esto con cada una de las páginas de nuestro sitio web.
9. IMAGEN DE FONDO
• En la misma ventana de antes podemos elegir una imagen
de fondo, en vez de un color de fondo. Normalmente se
utilizan imágenes pequeñas, en formato gif o jpg. Tenemos
que tener en cuenta que la imagen que elegimos, aunque
sea pequeña, no se va a aumentar hasta llenar la pantalla,
sino que se va a repetir indefinidamente en forma de
mosaico, como si fueran azulejos.
Vamos a ver algunas muestras:
•
• Pincha en las imágenes para ver cómo queda una página
web con esa imagen de fondo.
En internet podemos encontrar cantidad de fondos para
páginas web.
10. SONIDO DE FONDO
• En una página web podemos poner un sonido de fondo. El formato
más utilizado es el sonido MIDI (archivos .mid) porque ocupa muy
poco espacio. De lo contrario la página podría tardar muchísimo en
cargar, sobre todo para quien no tenga banda ancha.
Podemos encontrar una gran cantidad de midis con el siguiente
buscador:
http://www.vanbasco.com/ Aquí sólo tenemos que buscar por
título, autor, tema o estilo y nos llevará a páginas con midis. Cuando
encontramos uno que nos gusta, hay que pinchar con el botón
derecho sobre el enlace y seleccionar Guardar destino
como... entonces lo guardamos en alguna parte dentro de nuestro
sitio web. No estaría mal crear una carpeta "sonidos", igual que
tenemos la carpeta images.
• Una vez que tenemos el sonido guardado
11. IMAGENES
• 1. Insertar imágenes desde archivo
• Cuando tenemos una imagen guardada (siempre que sea dentro del sitio web, preferiblemente en
la carpeta images) podemos insertarla en una página web de la siguiente manera:
• Vamos al menú Insertar y seleccionamos Imagen > desde archivo
A continuación usamos la ventana de exploración hasta encontrar la imagen correspondiente. La
seleccionamos y pinchamos en Aceptar.
•
• 2. Insertar una imagen desde el catálogo de imágenes
• Esta es una de las opciones más interesantes de FrontPage 2003. Si vamos a Insertar > Imagen >
Imágenes Prediseñadas, nos encontraremos con una ventana como esta:
• Con esta opción podemos buscar imágenes entre unos catálogos online amplísimos. En el ejemplo
de esta imagen, he insertado la palabra "colegio" y he pinchado en buscar. Entonces nos salen las
miniaturas y sólo nos queda elegir una y hacer doble clic para que nos la inserte en la página web.
Para utilizar las imágenes prediseñadas de FrontPage se requiere conexión a internet.Cuando en
una página web hayamos insertado imágenes de internet nos va a ocurrir lo siguiente: al ir a
guardar la página web (Archivo > Guardar) nos aparecerá la siguiente pantalla:
Esta ventana sirve para decirle al Frontpage en qué parte de nuestro propio sitio web queremos
guardar la imagen que hemos incrustado en la página. Es conveniente pinchar en Cambiar
carpeta... y seleccionar la carpeta images.
12. TRANSICIONES DE PÁGINA
• En una página web podemos establecer efectos especiales
al entrar o al salir de la página. Esta página tenía uno de
esos efectos, no se si lo habrás notado al entrar. También
puedes verlo cuando pases al siguiente capítulo.
• Para establecer las transiciones de página vamos al menú
Formato > Transición de página y nos sale esta ventana:
• En evento seleccionamos entrar en página y establecemos
el efecto que queremos al entrar (mezclar, recuadro
entrante, salida en círculo, etc.) y el tiempo que queremos
que dure (unos 3 segundos). Luego seleccionamos el
evento Salir de página y repetimos la operación.
Pinchamos en Aceptar y ya está.
13. GALERÍA DE FOTOGRAFÍA
• Para hacer una galería de imágenes seguiremos el siguiente
proceso.
• Lo primero será tener guardadas en el ordenador las
fotografías digitales que vamos a utilizar. Pueden estar en
cualquier parte del disco duro. Este es el único caso en el
que no tenemos que guardar las imágenes dentro de las
carpetas de nuestro sitio web antes de empezar. Las
tendremos en otro lugar (mis documentos, mis imágenes,
etc.)
• También existe la opción de agregar imágenes
directamente desde el escáner o la cámara digital.
• Vamos a Insertar > Componente Web y seleccionamos
Galería de Fotografías.