Manual de frontpage
- 2. INTRODUCCIÓN Vamos a imaginar que en nuestro colegio hemos hecho un proyecto muy interesante y queremos difundirlo. Lo tenemos hecho en formato Word, y contiene fotografías, dibujos y textos. En teoría, podríamos meter nuestro documento en un ordenador conectado a Internet para que estuviera al alcance de todo el mundo. Lo podríamos hacer en un ordenador cualquiera del colegio o de nuestra casa (no viene a cuento, pero hay formas de hacerlo). No obstante nos encontraríamos con los siguientes problemas: Nuestro documento no tiene un formato apropiado para ser visto en pantalla. El programa Word está pensado para hacer documentos imprimibles. El documento es muy largo, y la gente tiene que pasar páginas y páginas buscando lo que quieren. ¡¡Algún graciosillo nos ha hecho cambios en el documento!! Y no sabemos quién ha sido. El ordenador está que echa humo, porque nuestro proyecto se ha hecho muy famoso y siempre hay cientos de personas intentando verlo a la vez. Para evitar todos estos problemas se han inventado las páginas web. Hasta cierto punto se parecen a los documentos de Word. Incluso veremos que el FrontPage (programa usado para hacer páginas web) se parece bastante al Word. No obstante, las páginas web tienen estas características especiales: 1. Su formato está pensado específicamente para ser visto en pantalla. 2. Su formato está basado en lo que se llama el hipertexto. Esto significa que no es necesario seguir el documento de forma lineal, sino que hay unos enlaces (llamados hipervínculos) que nos llevan de unas partes a otras del documento, incluso de unas páginas a otras. 3. No pueden ser modificados por los usuarios, salvo las páginas preparadas para ello. 4. Las páginas web se publican en servidores, que son básicamente ordenadores con una capacidad y un ancho de banda suficiente para atender a muchos usuarios simultáneamente.
- 3. 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 servidorhasta 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.
- 4. 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). ¿Pero qué es todo esto de html, jpg y demás cosas raras? ¿Las páginas web no eran siempre punto com? Lo que termina en .com (también puede ser .es, .net, ...) es el dominio. Un dominio es como una “marca registrada” en Internet. Es decir, que si yo registro el dominio www.micolegio.com, solamente yo podré publicar páginas web dentro de ese dominio. Dentro de un dominio se alojan las páginas web. Por ejemplo vamos a fijarnos en las siguientes direcciones web: www.micolegio.com/presentación.htm www.micolegio.com/proyectos.htm La primera será la página web presentación.htm, que está alojada en el dominio www.micolegio.com. La segunda será la página web proyectos.htm, que también está alojada en el mismo dominio. Una dirección web (técnicamente llamada URL), es la ruta de acceso inequívoca que nos lleva a una página web de entre las millones que hay en Internet. En el caso de www.micolegio.com/proyectos.htm no habrá ninguna duda, ya que en Internet sólo hay un dominio llamado micolegio.com (para eso se registran), y dentro de este dominio solo habrá una página llamada proyectos.htm La dirección web (URL) es lo que escribirán los usuarios en la barra de direcciones de su navegador para llegar a ver nuestra página web. El navegador es el programa que se utiliza para ver las páginas web (navegar por la red, vamos). El más conocido es el Internet Explorer, pero hay otros como el Netscape o el Opera. La barra de direcciones es la barra blanca que aparece en la parte superior del navegador. En esta imagen vemos que hemos puesto la dirección de terra en la barra de direcciones:
- 5. Como podemos ver en la imagen, hemos introducido http://www.terra.es en la barra de direcciones. Esto es el nombre del dominio pero, si dentro de un dominio hay muchas páginas, ¿Cómo sabe el navegador cuál me ha de mostrar? En todo sitio web siempre hay una página principal, que es la que contiene la presentación y el menú que nos llevará a las demás páginas. Esta página principal se ha de llamar index.htm, default.htm o home.htm(dependiendo de casos). Esta es la página que se mostrará siempre que no se especifique ninguna dentro de un dominio. Por ejemplo, prueba a introducir la dirección www.stecyl.es en tu navegador (lo del http delante no es necesario). Después prueba con www.stecyl.es/index.html y verás que es lo mismo. Esto significa que en el primer caso, al no especificar la página a mostrar, se te ha mostrado la página por defecto, que es index.html (la misma que en el segundo caso)
- 6. Vistas para trabajar Vistas para trabajar Página: muestra las páginas individuales con la que se está trabajando, permitiendo hacer cambios o ajustes. A su vez cuando trabajamos en la página a diseñar tenemos tres opciones Vista Normal: Esta vista es la que usamos para trabajar y diseñar ña página es como la vista impresión de Word Vista HTML: Podemos observar el código de programación HTLM y realizarle modificaciones si conocemos el mismo Vista previa: Aquí podremos comprobar como se observara la página en el navegador Carpetas: contiene dos partes, con la lista detallada de páginas y ficheros de la carpeta seleccionada del sitio Web. Se utiliza para la administración de carpetas y archivos de ficheros Informes: Se utiliza como ayuda para la administración de las páginas dentro del sitio Exploración: O mapa del sitio. Nos muestra la estructura del sitio Web. Hipervínculos: Nos muestra todos los hipervínculos de la Web. Tareas: Es para realizar un listado de tareas que se deben realizar
- 7. Insertar imágenes Imágenes: Son las mismas propiedades que Word, lo que tenemos que tener en claro es que si vemos una imagen centrada es porque la misma esta ubicada en una tabla, sin bordes visibles, lo mejor para distribuir imágenes en una pagina Web y que estas no se deformen es diseñar tablas tablas sin bordes anidadas
- 8. Componentes Los comentarios: Proporciona información sobre asuntos referentes a la edición de la página Web. Los contadores: Los contadores de visitas sirven para saber cuánta gente visita nuestra Web. La fecha y la hora: Nos permite conocer la fecha y la hora de la visita cambiando cada vez que se actualiza Marquesina: Es un texto que se desplaza a lo ancho de la página. Botón activable: Es para crear un botón al que haciendo clic va a realizar una determinada acción. Con el menú contextual podemos modificarle los diferentes atributos
- 9. Los marcos Los marcos dividen la pantalla del navegador en ventanas individuales, cada una contineuna página en form individual. La página que aparece dentro del marco puede contener cualquier elemento que se quiera.. Cada marco de una página con marcos es un archivo HTML independiente, por lo que una forma de crear las páginas basadas en marcos es crear alguna de las páginas de contenido antes de crear el conjunto de marcos. Posteriormente, las colocaremos en el conjunto de marcos para comprobar que la apariencia es correcta. El uso más frecuente de los marcos será incluyendo un marco de navegación que permanece inalterado a lo largo de la visita del usuario. El usuario hace clic en los enlaces o botones para visitar otra parte de la Web. Estos enlaces tienen como destino abrirse en otro marco de la página, normalmente el marco más grande. Seleccionamos Archivo / Nuevo / Página, seleccionamos el diseño, podremos modificar luego el alto y el ancho de los marcos No debemos olvidar que los marcos poseen una estructura con jerarquía entre ellos por lo que están anidados Podemos reestructurar las plantillas y adecuarlas a nuestra comodidad. Podemos modificar los tamaños de los marcos seleccionado y arrastrando los bordes del mismo, dividir los marcos realizamos Marcos / Dividir Marco seleccionamos filas o columnas y eliminar lo realizamos seleccionando y luego Marcos / Eliminar marco. Asociar páginas a los marcos
- 10. Cuando se inicia el proceso de trabajo cada uno debe poseer su propia página Web, por lo que debemos hacer lo siguiente 1. Selecciono el marco 2. Señalo el botón Establecer página inicial, apareciendo el cuadro Crear Hipervínculo, escribiendo en el la dirección donde se encuentra esta pagina. Podemos asociar una página que ya tengamos terminada o una URL, o una en blanco que luego procesaremos Cómo guardar un conjunto de marcos, este está constituido por varias páginas: la página de marcos, que mantiene las instrucciones sobre cómo debe aparecer y actuar el conjunto de marcos, y las páginas iniciales para cada marco del conjunto de marcos. Cuando guardamos un conjunto de marcos debemos guardar todas estas páginas. Nos aparecerá un cuadro de diálogo con una vista en la cual se verá claramente qué marco es el que estamos guardando. Hay que tener mucho cuidado a la hora de guardar sino se puede llegar a alterar la estructura del diseño Cómo modificar las propiedades de los marcos, un conjunto de marcos tiene propiedad por sí mismo, que se guarda en la página principal, la que almacena información de la estructura y funciones de cada marco del conjunto. A través del cuadro de diálogo modificaremos todas las propiedades del marco que deseemos de forma sencilla. A través de esta opción podemos cambiar el espaciado del marco, que es la cantidad de espacio en blanco entre los marcos y los bordes del marco. Esto hay que definirlo en la opción Crear hipervínculo cuando nos pide el marco de destino del enlace, en la ventana siguiente: Así pues, los marcos es una forma muy sencilla de organizar páginas Web manteniendo a la vista varias páginas.
- 11. Mapa de imágenes Un mapa de imagen es una imagen que contiene enlaces. 1. Insertamos una imagen en la página Web 2. Definir las zonas activas de la imagen. 3. Señalando la imagen se aparece una barra de herramientas en la parte inferior de la página. La misma posee diferentes botones para alterar las propiedades de las imágenes. Creamos una zona con forma rectangular Creamos una zona con forma de círculo o elipse Creamos cualquier tipo de figura
- 12. Elementos multimedia En una Web podemos incluir texto e imágenes, y a su vez puede poseer vídeo, sonido y música. Los tipos de archivo más habituales para vídeo son AVI, QuickTime y Real Player. Para sonido son WAV , MIDI y MP3. Para Insertar un vídeo en una página Web, 1. Incrustar el vídeo de forma que aparezca en la página del mismo modo que una imagen. 2. Crear un enlace a un archivo de vídeo Para insertar un vídeo seleccionamos Insertar / Avanzadas / Complemento: en el cuadro de texto Origen de datos escribiremos la ubicación del vídeo que queremos emplear, incluyendo la extensión del archivo. Para ello, pulsando el botón Examinar buscamos el archivo. Además, se puede modificar el tamaño, espaciados, alineaciones y ocultar el control de la reproducción del sonido. Tres forma e insertar de música en la página · Controles tipo VCR: permiten reproducir el sonido a voluntad. · Colocar música de fondo: se reproduce automáticamente cuando la página se carga. seleccionamos la opción Propiedades de Página en el menú contextual, seleccionamos el archivo de sonido y determinamos cuantas veces lo queremos reproducir o reproducción continua · Enlazar un archivo de sonido: el usuario lo descarga y un programa personal lo reproduce. Para insertar música seguiremos los mismos pasos anteriores Si deseamos enlazar a una Web posee música le crearemos el hipervínculo a la misma.
- 13. Imágenes animadas 1. Seleccionamos la imagen que se quiere animar. 2. Las mismas opciones pero con diferentes opciones con respecto al texto · Podemos hacer que las imágenes se intercambien al pasar el Mouse, como ejemplo agregado Transiciones entre páginas Forma de pasar de una pagina a otra con diferentes efectos, para lo cual vamos al Menú Formato / Transición de Página / y en cuadro de diálogo seleccionamos la Opción y el Tiempo de transición