creación y diseño de páginas web con...

38
Creación y diseño de páginas Web con FrontPage2000. I. Introducción: ¿Qué es una página web? Se llama página web aunque en realidad está compuesta por varios documentos de diferentes tipos, de ahí el cambio a sitio web. Se denomina Página web cuando no es una única página sino una serie de documentos unidos por algún tipo de relación. Los documentos principales son de extensión HTML, (HyperText Markup Language == Lenguaje de marcas de hipertexto), o HTM (tres letras para indicar la extensión derivado de MS-DOS), en los que van incluidos todos los demás tipos de archivos: imágenes, sonidos, animaciones, videos, archivos de lenguaje Java, controles ActiveX,…Estos documentos se enlazan mediante hipervínculos, no son parte del documento, están asociados con algún tipo de relación a él. Si por ejemplo se pasa de un documento Word, Excel,.. (qué es también de Microsoft) a HTML, por ejemplo con Guardar como ó con Guardar y Pegar, el programa separa por una parte el texto (sin respetar algunas ordenes de formato) y por otro las imágenes, tablas,… Notas a los diferentes programas de creación de páginas web: a) Programas de creación de páginas web: Adobe PageMill, FrontPage, Netscape Composer, …. Todos bajo ventanas, fáciles de manejar. Pero por debajo tienen el código fuente o lenguaje XHTML. Para programar lo más utilizado es Java.,… b) Cuidado con las traducciones en los programas: hipervínculos, vínculos, enlaces y links o anclas y marcadores, son lo mismo con diferentes nombres, no se han estandarizado. Nosotros veremos los nombres de la traducción de Frontpage2000 de Microsoft. c) Todos el código HTML va entre etiquetas <Comando> y </comando> como comienzo y final de la estructura del comando. Salvo unos pocos estándares (www.w3.org ) todo va programado a base de comandos: formatos, tipos y tamaños de letras, colores, fondos… e imágenes, 1

Upload: others

Post on 14-Aug-2020

2 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: Creación y diseño de páginas Web con FrontPage2000metodosestadisticos.unizar.es/asignaturas/10234/lahoz/... · Web viewDentro de FrontPage existe una pestaña en la parte inferior

Creación y diseño de páginas Web con FrontPage2000.

I. Introducción: ¿Qué es una página web?

Se llama página web aunque en realidad está compuesta por varios documentos de diferentes tipos, de ahí el cambio a sitio web. Se denomina Página web cuando no es una única página sino una serie de documentos unidos por algún tipo de relación.

Los documentos principales son de extensión HTML, (HyperText Markup Language == Lenguaje de marcas de hipertexto), o HTM (tres letras para indicar la extensión derivado de MS-DOS), en los que van incluidos todos los demás tipos de archivos: imágenes, sonidos, animaciones, videos, archivos de lenguaje Java, controles ActiveX,…Estos documentos se enlazan mediante hipervínculos, no son parte del documento, están asociados con algún tipo de relación a él.

Si por ejemplo se pasa de un documento Word, Excel,.. (qué es también de Microsoft) a HTML, por ejemplo con Guardar como ó con Guardar y Pegar, el programa separa por una parte el texto (sin respetar algunas ordenes de formato) y por otro las imágenes, tablas,…

Notas a los diferentes programas de creación de páginas web: a) Programas de creación de páginas web: Adobe PageMill, FrontPage, Netscape

Composer, …. Todos bajo ventanas, fáciles de manejar. Pero por debajo tienen el código fuente o lenguaje XHTML. Para programar lo más utilizado es Java.,…

b) Cuidado con las traducciones en los programas: hipervínculos, vínculos, enlaces y links o anclas y marcadores, son lo mismo con diferentes nombres, no se han estandarizado. Nosotros veremos los nombres de la traducción de Frontpage2000 de Microsoft.

c) Todos el código HTML va entre etiquetas <Comando> y </comando> como comienzo y final de la estructura del comando. Salvo unos pocos estándares (www.w3.org) todo va programado a base de comandos: formatos, tipos y tamaños de letras, colores, fondos… e imágenes, sonidos y demás que van enlazados a la página. Se puede ver el código fuente de la mayoría de las páginas web que visitemos basta ir a la opción de Ver/ Código fuente (Explorer). Dentro de FrontPage existe una pestaña en la parte inferior que se identifica como HTML donde se puede ir comprobando el lenguaje que se va generando con las acciones que realizamos en visión Normal.

d) Hay que pensar que el lenguaje HTML está pensado para que pueda ser utilizada por cualquier equipo con cualquier sistema operativo, por lo que existen muy pocos estándares, y algunas de las opciones que vamos a ver solo se pueden "ver" en aquellos equipos que naveguen con Explorer, y este según la versión. Depende a quién vaya dirigida el sitio web hay que introducir unas herramientas u otras, si suponemos que la mayoría de nuestros visitantes van a navegar con Explorer, con Windows y con un servidor Microsoft o compatible, podemos incluir casi todas las opciones de FrontPage, sino solo las que sabemos funcionan en todos los navegadores, sistemas operativos y servidores. Se puede configurar FrontPage para que sea compatible con una versión de un navegador determinado. Con esto se consigue que algunas aplicaciones no estén implementadas, y otras se programen de manera que sea entendible para ese navegador. Los estándares de HTML se pueden encontrar en la dirección www.w3.org.

1

Page 2: Creación y diseño de páginas Web con FrontPage2000metodosestadisticos.unizar.es/asignaturas/10234/lahoz/... · Web viewDentro de FrontPage existe una pestaña en la parte inferior

e) Lo mismo que pasa con los sistemas y navegadores pasa con los monitores y sus configuraciones, hay que pensar en el que va a acceder a nuestra página web y no en como lo vemos nosotros con nuestra configuración. No existe maquetación posible en las páginas, se van adaptando a las dimensiones de la ventana visible y al programa utilizado, así como a la tarjeta gráfica y a la configuración del monitor. Los trucos que se suelen utilizar es usar tablas que si mantienen la estructura impuesta. Es conveniente para mantener la estructura de varias fotos, mapas,… Existen configuraciones de monitores más usuales pero no universales (800x600 o 1024x768). La primera es la normal para monitores de 15 pulgadas y la más extendida. Aparte del número de píxel por pantalla se puede modificar el número de colores disponibles, pero esto no es un problema ya que se supone que los ordenadores que trabajan con menos colores sustituyen los que no poseen por otros similares. Algunos sitios web tienen varios tipos de presentaciones y en la página de inicio el navegante puede elegir la que coincida con su pantalla.

II. Ventana principal de Frontpage2000:

Se abre FrontPage. Se observa que es un programa típico de Microsoft con muchas componentes de Word, Excel,... Las opciones de la barra de herramientas superior son las comunes de Archivo, Edición, Ver, Insertar, Formato, Herramientas, Tabla, Ventana y Ayuda. Todos estos tienen las mismas funciones que realizan en Word más algunas más especificas de FrontPage. La única opción nueva y exclusiva de este programa es Marcos, que analizaremos más tarde.

La opción Archivo sirve para abrir, crear, guardar o cerrar páginas o web (la primera es una sola página y la segunda una estructura de páginas) nuevas o ya existentes. También están las opciones para Imprimir, Vista Preliminar y Configurar Página con los mismos usos que en Word.

En la opción Edición se encuentran las opciones para Cortar, Copiar y Pegar partes de los documentos, así como Deshacer ultima acción, Buscar y Reemplazar. Se pueden pegar cualquier parte de un documento Word o Excel, siempre teniendo en cuenta que las imágenes y gráficos en estos van en el mismo documento mientras en FrontPage van enlazadas y hay que decir en que ruta se encuentran.

La opción Insertar sirve para introducir elementos que no sean textos, tablas o formatos en el documento, imágenes, sonidos, videos, aplicaciones de Java, formularios,…. Algunas de las posibilidades las iremos viendo más adelante.

Formato también es análogo a Word con alguna opción nueva, como Efectos de HTML dinámico. Aquí están todas las acciones para modificar el estilo y la forma del texto: alineaciones, fondos, estilos y separaciones de letras,…

En la opción Herramientas podemos modificar las configuraciones de FrontPage. En ella podemos variar las barras de herramientas del programa y las opciones generales. La opción que comparte con Word es Ortografía y Sinónimos (se pueden cambiar tanto el idioma de corrección como el diccionario de referencia en Herramientas/ Opciones de página/ General). También se puede cambiar el tipo de alfabeto utilizado en Herramientas/ Opciones de página/ Fuente predeterminada. La opción Personalizar se detallará más adelante.

Tabla contiene todas las opciones para crear, modificar, borrar y convertir tablas. Son similares a las de Word aunque aquí en principio faltan algunas acciones para trabajar con bases de datos (ordenaciones, formulas,…). Para realizar estas

2

Page 3: Creación y diseño de páginas Web con FrontPage2000metodosestadisticos.unizar.es/asignaturas/10234/lahoz/... · Web viewDentro de FrontPage existe una pestaña en la parte inferior

operaciones es mejor hacerlo con un programa externo (Excel, Access) y luego pasarlo a FrontPage.

La opción Ventana sirve para pasar de una ventana a otra en el caso de que tengamos más de una abierta o para crear alguna nueva para abrir otro archivo.

Por último Ayuda nos permite obtener información de FrontPage, tanto general como de alguna opción específica.

Después de las opciones de ventanas existe la posibilidad de tener acceso directo a alguna de las acciones más usadas. Para lo cual o se introduce la barra de herramientas de una tarea específica o el icono de la acción que nos interese. Barras de herramientas por defecto aparecen la Estándar y la de Formato (la primera encima de la segunda). Además de estas existen las barras de Efectos HTML, Estilos, Exploración, Imágenes, Informes, Tablas y Ubicación más la posibilidad de crearte tu propia barra (Personalizar). Para colocar una barra de herramientas en el menú hay que ir a la opción de Ver/ Barra de herramientas y seleccionar la que deseemos. Si por ejemplo estamos trabajando con imágenes y queremos tener rápido acceso a giros de imágenes es más cómodo tener la barra de Imágenes en el menú y pulsar sobre el icono en vez de buscar la acción por las diferentes opciones. La barra de herramientas Personalizar nos permite crear una barra de herramientas con diferentes acciones que nosotros utilicemos constantemente mezclando diferentes tipos, algunas de tratamiento de texto otra de tablas, de imágenes,… Además de esto se pueden introducir en todas las barras de herramientas comandos sueltos. Basta ir a la opción Herramientas/ Personalizar o a Ver/ Barra de herramientas/ Personalizar elegir el icono correspondiente a la opción que busquemos y arrastrarlo a la parte de la barra de herramientas donde deseemos colocarlo. Por ejemplo si queremos colocar en nuestra barra de herramientas el icono de fácil acceso a Girar a la izquierda una imagen, por cualquiera de las dos opciones anteriores se accede a la misma ventana. Esta contiene tres pestañas. En la primera Barras de herramientas podemos colocar la barra entera de una determinada tarea. En la segunda, Comandos, es donde tenemos todos las acciones disponibles, la tercera es para modificar la configuración de la vista de las barras de herramientas. Pulsamos sobre la segunda pestaña, buscamos los comandos de Imágenes y dentro de estos el de giro a la izquierda. Una vez lo hemos encontrado pulsamos sobre él y sin soltar el botón del ratón lo arrastramos hasta la parte del menú que deseemos (siempre dentro de una barra de herramientas).

Nota: Si queremos saber a que acción corresponde alguno de los iconos de la barra de herramientas que tenemos basta colocar sobre él el puntero y esperar unos segundos, aparecerá una ventanilla con esta información. Si se desea algo más de información recordar la opción Ayuda/ ¿Qué es esto?.

Por último, la opción Ver. En está, aparte de la opción Barra de herramientas que ya hemos visto, se puede elegir entre las diferentes vistas de FrontPage. Las posibilidades son las mismas que tenemos en la parte izquierda de la pantalla: Página, Carpetas, Informes, Exploración, Hipervínculos y Tareas. Son diferentes vistas de la pantalla de trabajo. La primera, Página, es donde se trabaja cuando se está construyendo una página web. En vista Página hay tres pestañas en la parte inferior izquierda de la pantalla de trabajo, Normal la de trabajo, HTML para modificar la página mediante este lenguaje, y Vista previa para ir probando la página y comprobar como quedaría a la hora de publicarla. La segunda vista es Carpetas, en la cual tenemos las diferentes carpetas de trabajo con las que vamos a trabajar, así como su estructura. Recordar que en una página web todas las imágenes, videos, sonidos, archivos de Java,… van enlazados a él y no dentro, con lo que tendremos que guardarlos en alguna carpeta de fácil acceso. Por defecto cuando creamos una web FrontPage crea dos carpetas, _private y images pero

3

Page 4: Creación y diseño de páginas Web con FrontPage2000metodosestadisticos.unizar.es/asignaturas/10234/lahoz/... · Web viewDentro de FrontPage existe una pestaña en la parte inferior

se pueden modificar, mover , crear otras ,etc… Tercera opción Informes donde tenemos recopilada toda la información de la web, archivos, errores, hipervínculos, … para ver más sobre un tema basta pulsar dos veces sobre él. Para volver a ver el resumen completo elegir Ver/ Informes/ Resumen sitio. La opción de Exploración nos va a mostrar la estructura de la web, cual es la relación que une a las diferentes páginas que tengamos creadas. Desarrollaremos con más detalle esta opción en el punto siguiente. En Hipervínculos podemos ver todos los enlaces que tiene una página, tanto internos, a archivos nuestros como a direcciones de fuera. Por último Tareas sirve para saber que es lo que queda pendiente en la web en el caso que de varias personas estén trabajando en la confección del sitio.

Nota: Si queremos ganar sitio para la construcción de la página se pueden eliminar las barras de la izquierda, Vistas y Lista de carpetas, deseleccionándolas en la opción Ver. De esta manera recuperamos toda la pantalla para ver completa la página, al igual que se verá en el navegador (configurado como nuestro monitor):

Nota: En la parte inferior derecha aparece un símbolo de un reloj y unos datos, que explica el tiempo que tardaría un navegador en leer la página que estamos creando a la velocidad que marca. Pulsando sobre el se puede cambiar la velocidad de referencia para saber el tiempo de bajada para otras tipos de modems o accesos.

III. Creación de una estructura web: Formación de la estructura.

Se puede empezar creando una web o una página web. Si se crea sólo una página hay que saber luego colocarla en la ruta correcta con los enlaces a otros archivos o direcciones que lleven asociados. Para no tener este problema es mejor empezar creando la web entera, controlando los subdirectorios donde colocar las imágenes, los documentos de texto, además de la estructura de la propia web.

Seleccionando Archivo/ Nuevo/ Web se puede elegir entre varias posibilidades para empezar a crear la web. Algunas de las cuales, además de crear las carpetas y las páginas iniciales, van acompañadas de ayudas para facilitar la construcción. Si sólo se quiere que cree las carpetas seleccionamos Web vacío. Esta es la opción más sencilla de creación de web ya que solo crea las carpetas y una página para empezar a trabajar, a la que llama index y la considera página principal. En principio por defecto la sitúa dentro de la carpeta Mis documentos con el nombre de Mis Webs, y dentro de está va numerando en diferentes carpetas las webs que se van creando. Miweb# es el nombre de la carpeta donde se guardan los documentos HTML. En la carpeta images por defecto colocará las imágenes de la web en la carpeta _private, archivos que no sean de dominio público. Utilizando el ratón y el botón derecho se puede modificar la estructura inicial, cambiar los nombres de las páginas,… como en cualquier explorador de Windows.

Para crear una estructura del sitio web, lo más sencillo es tener seleccionado la opción Exploración de la barra de la izquierda (barra de Vistas).

Una vez fijada la estructura de las carpetas, se puede ir creando páginas nuevas en cualquiera de los subdirectorios de trabajo. Esto se puede hacer bien con el ratón y el botón derecho (Nueva Página) o en la barra de menú seleccionando Archivo /Nuevo /Página. Las opciones que se pueden elegir para la página nueva son similares a las que se podían elegir con la nueva web. Es importante tener claro la estructura de nuestra web antes de empezar a construir páginas, se ahorra trabajo y tiempo. Si se va modificando la estructura cada vez que se incorpora una nueva página o cada vez que se cambia la ruta de un documento enlazado, puede fallos de enlaces y mayor perdida de tiempo.

4

Page 5: Creación y diseño de páginas Web con FrontPage2000metodosestadisticos.unizar.es/asignaturas/10234/lahoz/... · Web viewDentro de FrontPage existe una pestaña en la parte inferior

Para ver la estructura que va teniendo la web conforme se van añadiendo nuevas páginas y vínculos con otros archivos, se selecciona en la barra de la izquierda Exploración o Hipervínculos. La primera para de ver la relación entre las páginas y la segunda para ver los enlaces a otros archivos.

Si lo que se quiere es una estructura con cinco páginas más la principal (index.htm si no se ha cambiado el nombre), lo primero es crearlas dentro de la opción Exploración. Las va enlazando como secundarias de la primera página o de la que este seleccionada en ese momento, si se quiere cambiar esta composición basta arrastrar las páginas al lugar deseado en la web. Si se desea ramificar desde otra página, basta hacer click con el botón derecho del ratón sobre la página y crear la nueva como anteriormente. También se pueden crear los enlaces a otras direcciones, pero es más claro hacer esto cuando estemos construyendo la página (desde vista Página).

El programa permite introducir páginas ya creadas que no estén relacionadas con index simplemente arrastrándolas de lista de carpetas al lugar que se desee.

Nota: Si se crea una página nueva desde vista Página no la toma como perteneciente a la web. Hay que añadirla en vista Exploración.

Para cambiar el nombre de las páginas es necesario tener seleccionada la página y pulsar el botón derecho del ratón o pulsar dos veces sobre la página. Para ir guardando la estructura hay que seleccionar la opción Ver/ Actualizar, pulsar F5 o en la barra del menú pulsar sobre el icono con dos flechas sobre una página. Una cosa es cambiar el nombre de la página para la web y otro es cambiarlo para nuestra estructura. Para el segundo caso hay que cambiarlo en la barra de exploración de la parte central (Lista de carpetas) y son los nombres de los ficheros HTML, los nombres con los que luego enlazará las páginas. Cuidado: con los nombres que se dan a las páginas, puede haber problemas después a la hora de enlazar manualmente. Tener un criterio claro desde el principio para todos los documentos que se van a utilizar, imágenes , textos,.. todos con minúsculas, sin acentos,…

Nota: 1.- Para cambiar el nombre de toda la web, por defecto miWeb#, hay que hacerlo fuera de FrontPage2000, dentro no lo permite.

2.- Al abrir la web normalmente crea una página nueva que no pertenece al sitio, para incluirla hay que guardarla.

IV. Inserción de barra de exploración en las páginas web:

Si ya se tiene la estructura más o menos fijada, lo siguiente es trabajar con las páginas propiamente dichas. Para eso se deja la opción de Exploración y se va a la barra de la izquierda, pulsando sobre Página. Por defecto va a la principal, index.htm, pero pulsando dos veces sobre cualquiera de las otras páginas pasará a estas. También se pueden ir abriendo con el icono de la barra de herramientas (una carpeta que se está abriendo) o en el menú Archivo/ Abrir.

Supongamos que se tiene seleccionada la página index y en ella se quiere insertar una barra de exploración, o lo que es lo mismo unos botones que permitirán moverse por toda la estructura de la web. Para esto se selecciona en el menú la opción Insertar/ Barra de exploración y aparecerá una pantalla con diferentes opciones. En la parte posterior están las opciones sobre la colocación de la barra y la forma del icono de enlace que después se podrá ver en la página (para esto antes se habrá elegido un tema de trabajo).

En la parte de arriba se encuentran los diferentes tipos de hipervínculos que se pueden realizar entre las páginas según los niveles. Además de las opciones, y según sea la estructura de la página, es interesante dar la opción de volver a la página principal.

5

Page 6: Creación y diseño de páginas Web con FrontPage2000metodosestadisticos.unizar.es/asignaturas/10234/lahoz/... · Web viewDentro de FrontPage existe una pestaña en la parte inferior

Los cambios y la inserción de nuevos textos o enlaces a otras páginas, no se van viendo en la página en la que se está trabajando, para poder comprobar los avances hay que guardarla e ir a la barra de menú a la opción de Vista previa en el explorador, o Archivo/ Vista previa en el explorador. Otra forma es pulsar sobre la pestaña de Vista previa parte inferior del programa.

Si se desea compartir la mismas barras de exploración en todas las páginas hay que seleccionar bordes compartidas para todas ellas. La opción es Formato/ Bordes compartidos que se pueden colocar donde se desee. De esta forma la estructura es común a todas las páginas pero permite pocas variaciones (texto de los botones,..).

Este tipo de hipervínculos o enlaces entre páginas se puede hacer de forma manual, como veremos más adelante. Haciéndolo de esta manera se pueden modificar todas las propiedades de enlace.

V. Trabajo con texto: Formato y color de los textos.

Las opciones de texto que tiene implementadas Frontpage2000 son prácticamente las mismas que Word2000, de hecho se pueden crear los documentos con este último y luego pasarlo a Frontpage2000. Se pueden copiar y pegar textos desde otros archivos. Y estos se pueden colocar en el documento cambiando el tipo de letra, la alineación, el tamaño,… El problema puede surgir si el navegante que abre nuestras paginas no posee la misma versión de Microsoft que nosotros, no tiene porque tener las mismas fuentes ni los mismos elementos configurados. Por esto es importante trabajar con tipos de letras, colores y efectos que sepamos que funcionan en la mayoría de los navegadores y en la mayoría de las versiones. Si sabemos que la gran parte de los visitantes van a utilizar algún navegador específico se pueden introducir algunos efectos de este. En muchos sitios web avisan sobre cual es la versión del navegador que hace falta para ver bien toda su estructura. Si colocamos algún tipo de letra que no sea estándar HTML se supone que el mismo navegador lee el texto y lo muestra con otro tipo de letra, pero a veces puede llegar a no saber manejarlo. Más difícil es transformar los efectos, los de Microsoft no son aceptados por todos los navegadores y pueden llegar a no leerlos. Lo mismo pasa si utilizamos efectos de Netscape Composer no entendibles por Explorer.

Otro problema de los navegadores es que adaptan el texto a la pantalla de visión, con lo que aunque en nuestra pantalla de construcción y de exploración se vea el texto perfectamente maquetado y colocado, esto no funcionará igual en todos los ordenadores. Hay que pensar que los monitores y tarjetas de los usuarios no son los mismos que los nuestros. Si se quiere que obligatoriamente los navegadores respeten la composición y la maquetación, de cualquier cosa no solo del texto, es necesarios trabajar con tablas o aconsejar al navegante sobre que configuración debe usar para ver sin problemas nuestro sitio web.

Dentro de la opción Formato se puede cambiar todas la características del texto: Tipo de letra, tamaño, color de la letra, color del fondo. Como en las últimas versiones de Word también vienen implementadas los efectos dinámicos que permiten interaccionar el texto con el ratón. Las diferentes opciones posibles son:

1.- Fuente: En la primera pestaña podemos cambiar el tipo de letra (fuente), el tamaño y el estilo, así como dar algún efecto especial a los caracteres. La segunda configura la separación entre letras y su ubicación dentro de la línea de escritura.

2.- Párrafo: Para configurar la sangría, el espaciado entre líneas y la alineación del texto.

6

Page 7: Creación y diseño de páginas Web con FrontPage2000metodosestadisticos.unizar.es/asignaturas/10234/lahoz/... · Web viewDentro de FrontPage existe una pestaña en la parte inferior

3.- Viñetas y numeraciones: Como su propio nombre indica, permite modificar y crear viñetas y numeraciones.

4.- Bordes y sombreados: Para marcar y delimitar los bordes de partes importantes de la página: imágenes, enlaces,… y para separar textos en formatos de más de una columna.

5.- Ubicación: Se utiliza para configurar el texto y la imagen a la vez. 6.- Efectos de HTML dinámicos: Permite la interacción del ratón y el texto. Crea

efectos visuales o sonoros al pasar el cursor, al pulsar o al cargar una parte de la página web. Los efectos varían según la opción, desde cambiar el formato hasta movimientos de textos. Nota: Estos efectos pueden no funcionar en navegadores que no sean de Microsoft, y en versiones inferiores a 4.0. El programa realiza la transformación de este estilo a alguna acción entendible por el navegador ("en teoría").

7.- Estilo: Se pueden definir estilos propios donde ya fijamos nuestros tamaños de letras, tipos, alineaciones ,… En Vínculos de hojas de estilo se puede introducir una dirección de Internet donde ya esté creado el estilo.

8.- Tema: Es como la opción anterior pero con estilos ya creados por Microsoft. Necesario si en queremos insertar una barra de exploración con etiquetas.

9.- Bordes compartidos: Permite que las páginas de un mismo sitio web tengan alguna parte común, como exploradores de la web, marca de la empresa… Esto se puede realizar manualmente con Marcos como se verá después.

10.- Transición de páginas: Nos permiten configurar el paso de una página a otra de un sitio web. Crea efectos para pasar de una página a otra, se puede configurar el tiempo de transición y el efecto que se crea.

11.- Fondo: Con esta opción podemos modificar el fondo de la página web. Podemos colocar una imagen nuestra, de la galería de Microsoft o que sabemos está en alguna dirección de Internet. En un apartado posterior de imágenes discutiremos más sobre esto. A esta opción también se puede acceder pulsando sobre el botón derecho en cualquier parte de la página y seleccionando Propiedades de página/ Fondo.

12.- Las otras opciones son más de lo mismo pero de acceso diferente. Quitar formato para volver a trabajar con el formato inicial y Propiedades para modificar el estilo de trabajo actual.

VI. Trabajo con tablas: Formato y color de las tablas.

Al igual que pasa con el texto, el uso de tablas en FrontPage2000 es el mismo que en Word La única diferencia es su uso, en páginas web las tablas se utilizan como herramienta de maquetación.

Para insertar una tabla basta ir a la barra de menú Tabla/ Insertar tabla o en la barra de herramientas el icono correspondiente de la tabla dibujada. Una vez elegida esta opción aparece una pantalla donde se permite definir la tabla en cuanto a dimensiones, márgenes, tamaños, alineación,… Como se ha dicho las tablas sí se mantienen aún cambiando las dimensiones con respecto a la ventana del navegador o al número de pixels. Se puede definir el tamaño de la tabla con respecto al porcentaje de la página o dándole un determinado número de pixels.

La tabla se puede modificar, eliminar o crear filas o columnas, agrupar o dividir las celdas existentes, cambiar los formatos de alineación color de fondo. Permite modificar la tabla entera, una sola fila o columna o una sola celda.

Las tablas también se pueden hacer invisibles. La mayoría de las páginas web de periódicos, portales… tienen como base tablas en cuyas celdas se van introduciendo imágenes o texto. Sin embargo la estructura de la tabla no se ve, permanece oculta en el

7

Page 8: Creación y diseño de páginas Web con FrontPage2000metodosestadisticos.unizar.es/asignaturas/10234/lahoz/... · Web viewDentro de FrontPage existe una pestaña en la parte inferior

navegador, no así en el creador de las páginas, en este caso FrontPage. Para conseguir esto basta seleccionar en las Propiedades de la tabla el Tamaño 0 para los Bordes, o que el color de los límites de la tabla sea el mismo que el color del fondo (esto no es conveniente si el fondo es una imagen). La misma acción se puede realizar pulsando el botón derecho sobre la tabla y seleccionando Propiedades da la tabla. Dentro de esta opción aparte del Borde se puede modificar la separación entre celdas, la alineación y el Fondo de la tabla o de una sola celda. También se puede modificar el estilo de toda la tabla o de una sola celda que puede ser diferente del resto del texto de la página.

Se pueden convertir textos a tablas y tablas a textos, para lo cual el formato del texto debe ser lo suficientemente claro para que no haya equivocaciones en la conversión. Al ser un producto de Microsoft permite copiar y trabaja con tablas creadas en Excel o Word. La copia será de los caracteres por lo que puede haber problemas con formulas o dibujos. FrontPage no permite trabajar las tablas numéricamente, ni trabaja con formulas, transformaciones de datos u ordenaciones.

Las tablas son de los pocos elementos de una página web que no es un vínculo sino que pertenece al documento HTML.

Si se quiere compaginar texto con imágenes hay que trabajar con tablas. De esta forma siempre que ponga una imagen a la izquierda de un texto sea cual sea el navegador y la configuración de la pantalla este se mantendrá allí. Recordar que la tablas se pueden modificar como se desee, combinando y dividiendo celdas hasta obtener el aspecto del texto deseado. Hay que pensar en la tabla más como uso para manejo de datos que como herramienta imprescindible para la maquetación de la página web, no sólo del texto sino de toda ella.

La división de una página web se puede hacer a través de Marcos o mediante tablas. Si en Word estamos acostumbrados a dividir el texto en columnas, para los sitios web es mejor hacerlo con tablas, donde se podrá colocar un fondo diferente a cada celda de la tabla,… Con los Marcos se podrá hacer algo similar como veremos más adelante.

VII. Trabajo con imágenes: Tipos de imágenes y vínculos a estas.

Las imágenes pueden ser de tres tipos: opacas, transparentes o animadas El formato más extendido es gif, sobretodo para las últimas, aunque para las primeras también se usa el formato jpg. Las imágenes en otros formatos se pueden insertar mediante FrontPage pero no suelen ser utilizados en la web por eso el programa los guarda en alguno de esos dos formatos (gif para imágenes animadas y pequeñas y jpg para grandes imágenes). Las imágenes no se pegan al documento, están enlazados a él. Esto significa que una vez insertada una imagen a un documento web no va a ir dentro de él, si se mueve el documento hay que mover también las imágenes que vayan asociadas. Si se abre el documento y no se tiene la imagen esta no se verá.

Es importante tener todas las imágenes que se van a utilizar en un mismo directorio de trabajo. Cuando se crea una página web con FrontPage esta crea, además, un subdirectorio en donde va a buscar por defecto todas las imágenes que tenga el documento. Al subdirectorio lo llama images y es conveniente colocar allí todas las imágenes que se vayan a utilizar. Recordar que hay que tener mucho cuidado con los nombres, para que el navegador pueda encontrar las imágenes sea cual sea este. No solo las imágenes insertadas también el fondo u otros tipos que se vayan a utilizar.

Las imágenes se pueden insertar directamente al documento, se pueden utilizar de fondo, pueden ser animadas, transparentes o ser mapas de enlaces, en los que se definen diferentes partes de la imagen que interaccionan de forma independiente.

8

Page 9: Creación y diseño de páginas Web con FrontPage2000metodosestadisticos.unizar.es/asignaturas/10234/lahoz/... · Web viewDentro de FrontPage existe una pestaña en la parte inferior

Insertar imágenes en el texto: Para colocar una imagen dentro de un texto, basta seleccionar Insertar/ Imagen/ Desde archivo (o /Imágenes si queremos alguna de las que vienen definidas por Microsoft) Aparece una pantalla desde la que se puede introducir la ruta donde se guarda el archivo imagen que se quiere insertar. Para colocarlo bastará seleccionarlo pulsando sobre él. Es conveniente haber colocado anteriormente el archivo dentro del directorio donde se guardan todas las imágenes que se utilicen. Una vez insertada la imagen se le pueden cambiar todos sus atributos. Si el archivo no está dentro de la carpeta de imágenes al salir o guardar FrontPage preguntará si se mueve el archivo y se copia a alguna carpeta de más rápido acceso.

Se puede modificar el tipo de formato y alguna otra propiedad interna de la imagen pero no es conveniente hacerlo con FrontPage. Para hacerlo hay que pulsar sobre la imagen con el botón derecho y seleccionar Propiedades de la imagen. Si la imagen no nos convence y se quiere cambiar internamente, es mejor utilizar algún otro programa de tratamiento de imágenes (Photoshop, Corel,…) y volver a importarlo a nuestra página. Por ejemplo para cambiarle el fondo, hacerlo transparente, …

Si algún editor de imágenes está configurado con Windows es posible editar la imagen en ese programa haciendo doble clic sobre ella. El editor tiene que ser compatible con FrontPage.

Si solo se quiere modificar el tamaño del dibujo dentro de la página, cambiarle la alineación, u alguna otra propiedad, dentro del texto hay que hacer clic sobre la imagen para seleccionarla. Aparecerá unos indicadores alrededor de está que arrastrándolos permiten modificar el tamaño. Con la barra de herramientas se puede cambiar otras propiedades: Brillo, Contraste, Decolorar, Giros, Recortes de algún lateral,…

Si la imagen es demasiado grande y no queremos disminuir su tamaño se puede incluir un vínculo con esa imagen en pequeño que pulsando sobre ella muestra la imagen al completo. La opción es dentro de la barra de herramientas pulsar sobre Vista en miniatura automática teniendo seleccionada la imagen.

También se pueden insertar dibujos o imágenes que estén en otros directorios más remotos, pero con la posibilidad de que están desaparezcan sin nuestro control, quedando el vínculo sin funcionar. En este caso aparece en el lugar del dibujo un mensaje de imposibilidad de encontrarlo o una rectángulo con una cruz indicando que la imagen no está accesible. Lo mismo sucede si modificamos la trayectoria o el nombre del archivo imagen y no lo hacemos en el enlace. Recordar que la imagen no forma parte de la página web, no va incluida en ella por lo que si la abrimos en otro lugar donde las direcciones hayan cambiado no encontrará el archivo. Esto es diferente de Word.

Se pueden insertar también imágenes animadas de la misma manera. Existen programas que crean gifs animados a partir de una serie de gifs sueltos. Existen multitud de páginas en Internet que proporcionan gifs y gifs animados de forma gratuita. Mejor esto que no piratear de otras páginas.

Nota: Microsoft permite crear galerías de imágenes nuevas y agregarlas a las ya existentes.

Colocar una imagen como fondo: Si lo que se pretende es cambiar el formato del fondo se pueden hacer dos cosas: cambiar solo el color del fondo o colocar una imagen desde una archivo como fondo. Para las dos cosas hay que seleccionar la opción de Propiedades de página. Desde Archivo/ Propiedades o con el botón derecho del ratón Propiedades de Página. Dentro de esta elegimos la pestaña de Fondo. Hay una opción para modificar el color del fondo y otra para colocar una imagen como fondo. La imagen se puede colocar con marca de agua o sin ella.

9

Page 10: Creación y diseño de páginas Web con FrontPage2000metodosestadisticos.unizar.es/asignaturas/10234/lahoz/... · Web viewDentro de FrontPage existe una pestaña en la parte inferior

Al colocar una imagen como fondo esta no se adapta al tamaño de la página. Si la página es mayor que las dimensiones del dibujo este se repetirá tantas veces como le sea necesario para rellenarla.

Recordar que es conveniente guardar la imagen con un nombre fácil de recordar y en la misma carpeta que las demás imágenes. Los nombres pueden dar problemas dependiendo del tipo de ordenador y del sistema que haga de servidor.

No es conveniente abusar de demasiados colores e imágenes ya que se hace difícil la lectura de las páginas y más lenta su apertura. Sobretodo que el fondo sea lo suficientemente suave para que no resalte más que el propio texto. También se puede incluir como fondo una imagen animada.

La única propiedad que se puede modificar en imagen de fondo es seleccionar o no la casilla de Marca de agua. Seleccionándola la imagen se mantendrá quieta en el fondo aunque nos traslademos en la página. Si no la seleccionamos la imagen se moverá a la par que el texto.

Imágenes de mapas sensibles: Son imágenes que responden de diferente manera según la parte del dibujo. Dentro de una imagen se pueden definir partes, llamadas partes activas, que actúan de manera diferente. Podemos seleccionar partes de la imagen y asociarles acciones distintas como si se tratase de varias imágenes unidas.

Seleccionamos la imagen de la página que queremos que sea mapa sensible. Nos aparecerá la barra de herramientas gráficas (sino ir a Ver/ Barra de herramientas/ Imágenes). Hay varias formas de definir partes activas de una imagen. Pueden ser rectangulares, circulares o poligonales. Para crear cualquiera de ellas hay que seleccionarlas en la barra de herramientas y arrastrar dentro de la imagen la parte con esa forma que queremos hacer activa. Si la selección es poligonal iremos definiendo varios puntos que se unirán mediante rectas hasta que se cierre el dibujo.

Cuando se ha seleccionado una parte activa el programa abre una ventana en la que pide la acción asociada a esa parte. Las únicas acciones disponibles son hipervínculos a otras páginas, nuestras o de fuera, a algún marcador, a algún otro archivo o a una dirección de correo electrónico. Esto lo veremos más a fondo cuando veamos marcadores e hipervínculos. Seleccionando una parte activa la podemos mover por la imagen y podemos modificar sus dimensiones.

Si queremos saber cuales son las partes activas que tenemos definidas hasta el momento seleccionamos Seleccionar partes activas en la barra de herramientas. Los diferentes enlaces de las partes activas se pueden probar en la pestaña de Vista previa.

Recordar que hay que tener cuidado con los enlaces a otras páginas y a archivos de fuera de nuestro sitio web, así como con los nombres de los archivos.

Hay otros programas más específicos que FrontPage para crear Mapas sensibles que permiten más opciones que las aquí vistas, aunque el uso normal de estas imágenes es que da el programa. Unos cuantos programas de tratamientos de mapas sensibles se dan en los anexos siguientes.

Nota: Una ventaja que tiene FrontPage2000 frente a otros programas del mismo estilo es que si tiene varias imágenes enlazadas en diferentes carpeta a la hora de cerrar la sesión permite guardarlas en la carpeta que se desee. Sino recordar que se puede hacer mientras se trabaja con la opción Directorios de la barra de la izquierda..

Anexos:1.- Tipos de formato de imágenes: JPEG o JPG, GIF, PNG, ART, BMP, WMF,

RLE, …

10

Page 11: Creación y diseño de páginas Web con FrontPage2000metodosestadisticos.unizar.es/asignaturas/10234/lahoz/... · Web viewDentro de FrontPage existe una pestaña en la parte inferior

2.- Direcciones donde encontrar imágenes: a) http://www.allclipartsite.com/ b) http://www.animationcity.net/ c) http://www.clipartdownload.com/ d) http://cgl.microsoft.com/clipgallerylive/ e) http://www.barrysclipart.com/ f) http://www.giftart.com/ g) http://www.pambytes.com/ h) http://www.ntech.com/ 3.- Programas y direcciones de programas de retoques de imágenes. Herramientas para proceso de imágenes.a) Animagic GIF: www.rtlsoft.com/animagic , creación de gifs animados.b) Animation shop: www.jascsoftware.com , creación de gifs animados.c) CompuPic: www.compupic.com , visionado, conversión y tratamiento de

imágenes.d) GIF Construction Set: www.mindworkshop.com , creación de gifs

animados.e) GIFmation: www.boxtopsoft.com , creación de gifs animados.f) HyperSnap: www.hyperionics.com , captura de imágenes.g) Microsoft GIF Animator: www.microsoft.om , creación de gifs animados..h) PaintShop Pro: www.jascsoftware.com , visionado, conversión y captura de

imágenes.i) Ulead GIF Animator: www.ulead.com , creación de gifs animados.j) Programas comerciales: Adobe Photoshop, Corel Photo-Paint,

CorelDRAW, Kodak Imaging, Macromedia Freehand, Micrografx Designer, Microsoft Photo Editor, Microsoft Photodraw, Microsoft Picturet!.

k) Programas de creación de mapas sensibles: k. 1.- MapThis: alpha.delta.edu/lwschuen/162/handouts/mapthis.html .k. 2.- MapMaker: www.lcs.mit.edu/cgi-bin/mapmaker .k. 3.- CuteMap: www.globalscape.comk. 4.- MapEdit: www.boutell.com/mapedit k. 5.- HotSpots: www.concentric.net/automata/hotspots.shtml .k. 6.- WebImage: www.group42.com/webimage.htm

4.- Se pueden tratar los textos como si fueran imágenes, hacer de ellos un solo gif animado. Basta ir cortando el texto en partes cada vez más grandes, convirtiéndolas en imágenes, normalmente gifs, que luego se irán reproduciendo como si fueran una película.5.- Se puede capturar imágenes de otras páginas web. Basta colocar el cursor sobre ellas y pulsar el botón derecho del ratón. En el menú que aparece elegir la opción de Guardar imagen como (Save as). Hay que darle nombre y ruta a la imagen.6.- Recordar que las imágenes y los dibujos no se ven en todas las pantallas y en todos los programas de la misma manera, dependerá de las dimensiones y del número de colores definidos para la pantalla, además del navegador utilizado. Así imágenes que en un ordenador se ven perfectamente, pueden perder definición y claridad en otros. 7.- Recordar que algunas imágenes (sobretodo fotográficas) ocupan demasiada memoria y pueden ser muy pesadas de manejar por el navegador, haciéndose demasiado tedioso la tarea de abrir una página.

11

Page 12: Creación y diseño de páginas Web con FrontPage2000metodosestadisticos.unizar.es/asignaturas/10234/lahoz/... · Web viewDentro de FrontPage existe una pestaña en la parte inferior

VIII. Marcadores en una página web: Como saltar dentro de una página web.

Insertar un marcador o un ancla (dependerá del programa y de la traducción) es colocar una señal dentro de un documento web. Esta servirá para poder hacer referencia a esa parte del documento desde cualquier lugar de esa página. Se podrá acceder a una parte de la página sin necesidad de pasar por las demás, directamente. Así hacemos más cómoda la visita a nuestra página al navegante, si busca información de una parte de esta no tiene que buscarla, pulsando sobre la referencia va directamente a la parte que buscaba. Es usual en muchas páginas que las referencias se agrupen en un índice.

Para colocar un marcador hay que situar el cursor sobre la zona donde se quiera y seleccionar Insertar/ Marcador. Saldrá una pantalla donde se pregunta por el nombre que se quiere dar a ese marcador y mostrará los demás marcadores de esa misma página, para no repetir los nombres (cuidado con las repeticiones, las mayúsculas, los caracteres poco usuales, …).

Si ya se tiene creado el marcador y se quiere hacer referencia a él en otra parte de la página, lo que hay que hacer es colocarse en esa parte y seleccionar Insertar/ Hipervínculo, o en la barra de herramientas pulsar sobre el icono con un mundo enlazado. Esto sirve no solo para los marcadores sino también para otras páginas o imágenes de fuera (como se verá más adelante). Se elige dentro de la lista de marcadores existentes en la página el que se desee y se pulsa Aceptar. Así siempre que se haga clic con el ratón sobre la parte seleccionada el navegador envía al lugar donde se ha colocado el marcador.

Para borrar un marcador hay que seleccionarlo (colocando el cursor sobre la bandera que indica su presencia) y eliminarlo (borrarlo). O elegir Propiedades del marcador (clic con el botón derecho) y seleccionar la opción de Borrar.

Se puede enlazar con un marcado desde cualquier parte de la página web, ya sea una parte de un texto, un dibujo, una parte activa de un mapa sensible,…

IX. Hipervínculos a otras páginas u otras direcciones:

Igual que se pueden hacer saltos dentro de un mismo documento, se pueden hacer saltos a otras páginas u otras direcciones fuera de nuestra web eligiendo Insertar / Hipervínculos, dentro de la barra de menú, o pinchando sobre el mundo con la cadena en la barra de herramientas.

En la pantalla que aparece además de la posibilidad de elegir un vínculo a la propia página, un marcador, están la de pasar a otro documento de tu propio ordenador, a otra dirección de Internet, a una dirección de correo electrónico o a otro documento nuevo que se desee crear.

Si se elige enlazar con otra página web de fuera basta introducir la dirección de la página deseada. Forma http://…. o https://… si es un servidor seguro o ftp:// archivo de protocolo ftp.

Si lo que se quiere es un vínculo con otro documento de nuestro ordenador, hay que introducir el nombre del archivo y su ruta en caso de que no este en la carpeta por defecto. El documento puede ser del estilo y la extensión que se quiera, esto no va a dar problemas. Los problemas pueden venir a la hora de abrirlos en el navegador. Puede que este no encuentre ninguna herramienta que lo haga. Otras veces lo que hace si no lo puede abrir es dar la posibilidad de guardar el documento en el disco duro del navegante. El enlace es del tipo file://trayectoria/archivo. Recordar que a la hor ade enlazar con archivos de nuestro ordenador hay que tener cuidado con los nombres de

12

Page 13: Creación y diseño de páginas Web con FrontPage2000metodosestadisticos.unizar.es/asignaturas/10234/lahoz/... · Web viewDentro de FrontPage existe una pestaña en la parte inferior

estos y con la ruta donde los tenemos. Al igual que pasaba con las imágenes es conveniente guardar todos los archivos enlazados con la página en un subdirectorio común de fácil acceso.

En el caso que se desee enlazar con una dirección de correo electrónico basta con introducir esta, del estilo [email protected]. Con formato mailto: dirección electrónica.

Nota: El hipervínculo a estos documentos o direcciones no es necesario hacerlo escribiendo todo su nombre completo en la página, se puede hacer a través de un dibujo, un texto, una animación,…

Existe la posibilidad de cambiar las propiedades de los enlaces. El lugar donde se puede hacer es el mismo que el de fondo de documento. Seleccionar Propiedades de la página haciendo clic con el botón derecho del ratón en cualquier lugar del documento, seleccionar la pestaña de Fondo. Lo único que se puede cambiar son los colores con los que se presentan en pantalla las páginas o vínculos ya visitados,…Todos los caracteres del vínculo tienen el mismo color.

Se pueden crear enlaces a partes de otras páginas, ya sean imágenes, marcadores,.. para los que es necesario conocer su ruta y el nombre que se les da en el documento original.

FrontPage permite enlazar con marcadores de otras página, esto es con partes concretas de otras páginas web. Para esto tienen que estar definidos los marcadores en las páginas de referencia. La forma es http://direcciónURL#nombre del marcador.

X. Otros tipos de archivos de trabajo: Archivos multimedia (video y sonido), Java y ActiveX.

Los archivos de sonido van enlazados con la página web de forma similar a las imágenes. Los formatos más usuales de archivos de sonido son: *.WAV (Windows), *.AU o *,SND (propios de UNIX), *.MID (música digital), *.MP3 (grabación altamente comprimida), *.RA o *.RAM (grabaciones que se ejecutan a la vez que se descargan de Internet), *.ASX o *.ASF (similares a las anteriores), *.AIF o *.AIFF o *.AIFC (similar a wav pero para Apple).

Los archivos de sonido se pueden utilizar también como sonido de fondo de las páginas. En Propiedades de página en las pestaña de General existe la opción de sonido de fondo, permanente o cada cierto tiempo. Recordar que esto aumenta el tiempo de apertura de la página. No existen estándares de sonido para todas las plataformas, por lo que aunque nosotros lo introduzcamos en nuestro sitio web puede no oírse en el del navegador. Además cada formato puede necesitar su reproductor y su actualización diferente.

Otra manera de introducirlo es mediante hipervínculo, lo que provocará que se ejecuten y reproduzcan, o se guarden, al pulsar sobre un texto, imagen,… La forma de hacerlo es como cualquier vínculo de otro tipo y se necesitará que el navegador esté configurado para poder reproducir el formato que usemos.

Por último los archivos de sonido se pueden insertar como objetos dentro de la página. Para esto es necesario tener algún programa reproductor de sonido que se encargará de ejecutarlo. Seleccionar Insertar/ Avanzadas/ Complemento aparece una pantalla de Propiedades donde en el lugar de Origen de datos hay que especificar la ruta donde se encuentra el archivo que se quiere introducir. Se puede especificar tamaño y alineación. El navegador luego colocará la herramienta necesaria para ejecutar ese archivo, siempre que este configurado para ello. Por eso hay que tener cuidado con los

13

Page 14: Creación y diseño de páginas Web con FrontPage2000metodosestadisticos.unizar.es/asignaturas/10234/lahoz/... · Web viewDentro de FrontPage existe una pestaña en la parte inferior

archivos de sonido que se incluyen, que se puedan reproducir en la mayoría de los ordenadores y sistemas.

Existen muchas fuentes en Internet, que al igual que para las imágenes, proporcionan sonidos de eventos de forma gratuita, además de poder crear nuestras propias músicas y sonidos mediante las herramientas adecuadas o captar sonidos de cualquier CD de música que poseamos:

1.- Archivos Wav: a) Animal Sounds: members.tripod.com/Thryomanesb) Atlanta Wav Warehouse: www.wavwarehouse.comc) BUDWaves: www.budwaves.comd) Funny Sounds: www.funny-sounds.come) Moviesounds: www.moviesounds.comf) My Fave Wavs: www.favewavs.comg) Sound Effect: www.sound-effect.comh) The Wav Emporium: wav-emporium.forsite.neti) The Wav Place: www.wavplace.comj) WavCity: www.wavcity.comk) WavServ: www.wavserv.co.uk2.- Archivos MIDI:a) InfoTrecks.com: infotreks.com/midi.htmlb) MIDI Filies Org: www.midifiles.orgc) MIDI Station: homes.acmecity.com/music/musicvideo/246d) Planet MIDI: www.planetz.net/midie) The Filecity MIDI File Archive: filecity.com/midif) The MIDI Farm Internet: www.midifarm.comg) Ultimate MIDI Page: www.ultimatemidi.comh) Valkhorn: www.valhorn.com/midi3.- Archivos de música en Mp3:a) Absolutely Free MP3: www.free-mp3s.netb) Alternative MP3: alternative.wxs.orgc) Full MP3 Albums: www.freakin.net/universed) MP3.com (referencia oficial): www.mp3.come) MP3 Archive: www.mp3archive.comf) MP3 Club: www.mp3-club.netg) MP3 Heaven: www.mpx-heaven.comh) MP3 Miracle: www.mpx-heaven.comi) MP3 Sector: www.mp3sector.com/MP3_Sites.htmj) Music.com/Music News: www.music.comk) Orgy of MP3: orgyofmp3.cjb.netl) Songs.com: www.songs.comm) The MP3 Planet: welcome.to/themp3arciven) Yawho MP3´s: www.yawho.com

Nota: No todas las direcciones de música MP3 son ilegales, ni todos los archivos de MP3 se saltan la legalidad.

Los archivos de video tienen formato *.AVI, *.ASF, *.MPEG, *.MOV, *.RM o *.RAM,… Se pueden colocar en las páginas de forma similar a los de sonido con la salvedad de que estos no se pueden utilizar como fondo. Normalmente van enlazados a

14

Page 15: Creación y diseño de páginas Web con FrontPage2000metodosestadisticos.unizar.es/asignaturas/10234/lahoz/... · Web viewDentro de FrontPage existe una pestaña en la parte inferior

las páginas como archivos sueltos, pero también se pueden enlazar sin necesidad de tenerlos en nuestro servidor, basta hacer referencia a la página donde se encuentran, enlazar con ella. Existen programas de reproducción que permiten la visión del video (también del sonido) sin necesidad de tener el archivo en nuestro disco duro. El único problema en este caso es que en caso de que el propietario de la secuencia la borre, nosotros no podemos hacer nada. Como ocurría con los formatos de sonido es necesario que el navegante tenga instalado el programa que permite la reproducción de ese archivo, en caso contrario no será posible la ejecución.

La forma más usual de colocar las imágenes es mediante Insertar/ Imagen/ Vídeo. Una vez colocado se le pueden especificar la forma de reproducción, tanto en tiempo como en evento asociado. Para ello basta seleccionar la secuencia pulsar el botón derecho del ratón y seleccionar Propiedades de la imagen. En estas se puede modificar la posibilidad de Mostrar los controles del explorador (Play, Stop,…), el número de veces que se repite, en Bucle (seleccionar Siempre en el caso de que queramos una reproducción continua), cuanto tarda entre reproducción y reproducción, en Retardo de bucle, y si queremos que la reproducción comience con la carga de la página o solo cuando el ratón pase sobre el enlace al archivo, en Iniciar. Todas estas en la pestaña de Vídeo. En la pestaña de Apariencia se modifican la configuración de la reproducción dentro de la página.

El principal problema de las secuencias o videos es que necesitan que el navegador sepa hacerlos ejecutar, tiene que estar configurado para poder reproducir ese formato de archivo. Además el ordenador debe tener instalado el programa de reproducción.

Hay que tener cuidado con las secuencias de video demasiado largas, que ocupan demasiada memoria y lentifican mucho la carga de las imágenes y el movimiento por ellas.

Los reproductores más usuales son Quick Time, Reproductor de Windows Media y Real Networks. No todos pueden reproducir todos los tipos de archivos de video, cada uno esta construido para reproducir un solo tipo aunque suele admitir más. Las ultimas versiones de todos ellos suelen reproducir la mayoría de los formatos.

Las direcciones donde se pueden encontrar versiones betas o demos de vida corta de algunos reproductores son:

a) Macromedia Flash: www.macromedia.com/shockwave/download/b) Apple QuickTime: www.apple.com/quicktime/download/index.htmlc) Real Networks/ Real Player: www.real.com/products/player/index.htmlAlgunos de los formatos permiten su reproducción a la vez que se van bajando y

normalmente no se tiene el archivo en nuestro servidor, sino que es una referencia a otro servidor.

Los archivos en lenguaje JAVA (Sun MicroSystem) tienen la ventaja que se pueden reproducir en cualquier ordenador y en cualquier sistema. La forma de trabajar con las applets es muy sencilla, basta insertarlas y ya son operativas. Se utilizan para crear operaciones más complicadas. No es necesario saber programar en Java para utilizarlo, si tenemos una aplicación en este lenguaje basta insertarla para que sea operativa. Para enlazarlas basta elegir Insertar/ Avanzadas/ Subprograma Java. Se puede visualizar el código HTML de un programa Java.

Los controles del tipo ActiveX, antes OLE, sirven principalmente para mantener una correspondencia entre el navegador y el servidor en las dos direcciones. Para ello es necesario que la página descargue programas en el ordenador del navegante

15

Page 16: Creación y diseño de páginas Web con FrontPage2000metodosestadisticos.unizar.es/asignaturas/10234/lahoz/... · Web viewDentro de FrontPage existe una pestaña en la parte inferior

pidiendo permiso primero por razones de seguridad. Se insertan de forma análoga a los programas de Java.

XI. Sectores, frames o marcos: Unir varias páginas en una.

Definir marcos dentro de una página es dividir esta en partes que trabajen de forma independiente. Dentro de cada una de las divisiones se coloca una página ya creada. Lo que se consigue es tener una página definida a partir de varias de ellas. Este proceso es interesante si se quiere mantener siempre visible un emblema o un navegador, etc.

Para crear un marco hay que seleccionar Nuevo/ Página y en la pantalla elegir la segunda pestaña de Página de marco. Existen diferentes formas de colocar las páginas que componen el marco. Dentro de cada parte se puede, a su vez, hacer las subdivisiones de marcos que se precisen seleccionando Marcos/ Dividir Marcos, colocando antes el cursor en la ventana que se quiere partir. La división se puede hacer vertical u horizontal. Así mismo las divisiones no son fijas y se pueden modificar de tamaño moviendo las barras de separación entre páginas. Para eliminar una ventana ir a la barra de menús en Marcos/ Eliminar Marcos. También se pueden modificar las dimensiones y otras características en Propiedades de Marcos.

Si alguna de las páginas tiene enlaces a otras direcciones se puede configurar el marco para que las llamadas a esos enlaces se abran en una determinada página del marco. Con el botón derecho seleccionamos Propiedades de Hipervínculo. En la pantalla que aparece pulsar sobre Marco de destino y escoger la ventana donde se quiere mostrar esa ventana.

Es conveniente distinguir entre el marco y las páginas que lo componen, sobretodo a la hora de guardar y modificar las propiedades. No es lo mismo guardar el marco que guardar la página. La primera guarda la estructura de unión entre las partes y la segunda las modificaciones de cada parte. Así si modificamos las dimensiones de los marcos debemos guardar el marco, mientras que si modificamos una parte del texto de un página guardamos esa página solamente.

Para eliminar los bordes de separación entre marcos hay que seleccionar Propiedades de página (de todo el marco) y en la pestaña de Marcos no seleccionar Mostrar bordes o disminuir el tamaño de estos a 0. Se puede llegar a la misma pantalla seleccionando Propiedades de Marco/ Páginas de marco.

Nota: Una vez se ha creado una página sin marcos está ya no se puede dividir. Puede pertenecer a una página con marcos, pero ella misma no puede ser un marco..

XII. Formularios:

Sirven para interactuar con el navegante. Permiten recoger información del exterior. La forma más sencilla de trabajar con los formularios en FrontPage 200 es a través de su barra de herramientas. Para mostrar la barra de herramientas de formulario hay que seleccionar Insertar/ Formulario y arrastrar el menú despegable hasta la zona de trabajo.

Cada uno de los comandos de los formularios tienen sus propias propiedades. Para cambiarlas se selecciona el comando y con el botón derecho del ratón se elige Propiedades de campo de formulario.

16

Page 17: Creación y diseño de páginas Web con FrontPage2000metodosestadisticos.unizar.es/asignaturas/10234/lahoz/... · Web viewDentro de FrontPage existe una pestaña en la parte inferior

Todos los comandos pueden ser modificados en cuanto al estilo de texto, alineación, etc con el que se presentan. Dentro de las Propiedades de campo de formulario seleccionar el botón Estilo.

Los datos recogidos por un formulario pueden ser guardados en un archivo o enviados por correo electrónico a una dirección. Dentro de las Propiedades de formulario existe la opción de introducir el archivo en el que se quieren guardar los datos o escribir la dirección electrónica a la que van a ser enviados los datos. También se puede crear una página web de confirmación de datos. Esta se mostrará al navegante una vez enviado el formulario relleno. Si seleccionamos Propiedades de formulario/ Opciones podemos modificar el formato en que se guardan los campos del formulario así como cuales de estos queremos guardar o enviar. Existen más posibilidades dentro de los formularios pero requieren un estudio más detallado y amplio..

Cuando insertamos un formulario nos aparecen dos botones por defecto y una parte de la página seleccionada. Dentro de esa parte seleccionada es donde debemos introducir todos los campos de nuestro formulario. Los dos botones por defecto son Enviar y Restablecer. El primero sirve para enviar el formulario a la base de datos y el segundo para borrar todos los campos que hemos introducido y dejarlos con sus valores iniciales. Más adelante veremos como modificar estos botones de comandos.

Los posibles campos de un formulario son:a) Cuadros de texto en una línea. Se utiliza cuando lo que se quiere solicitar al

usuario es un simple dato. Para modificar este campo, al igual que para los demás, lo seleccionamos y pulsando el botón derecho elegimos Propiedades de campo de formulario. Se le puede modificar el nombre del campo, el valor inicial y la configuración de estilo, tabulación, formato… Todos los campos, además, se pueden validar para asegurarnos que el usuario está introduciendo valores validos. Así si se le solicita la edad, pulsando sobre Validar en Propiedades de campo de formulario podemos especificar que el dato a incluir tiene que ser numérico con sólo dos dígitos, sin decimales y mayor que 18, en el caso que queramos que sea mayor de edad. Por último si tenemos la casilla de Campo de contraseña seleccionada en Propiedades de campo de formulario querrá decir que este campo es de obligatorio relleno.

b) Cuadros de texto con desplazamiento. Se utiliza para solicitar al usuario algún comentario u observación o para un campo con más de una línea de relleno. Es igual que el anterior pero cuando es necesario más espacio para rellenarlo. Las propiedades y configuraciones son las mismas que en el anterior.

c) Casilla de verificación. Es un campo que solo puede tener dos valores, seleccionado (activado) o no seleccionado(desactivado). Su uso es para opciones donde solo hay dos posibilidades. Las modificaciones que se pueden hacer en este campo son el Estilo, el nombre, la tabulación, el valor y si deseamos que por defecto está activada o no.

d) Botón de opción. Se utiliza cuando se le quiere dar la opción al usuario de elegir entre varias posibilidades. Se pueden insertar varios botones de comando y por defecto los colocará en el mismo grupo, como un solo campo. Si se quiere que haya varias selecciones de varios grupos hay que cambiar el nombre del grupo para cada uno. Para cambiar los nombres de los grupos hay que seleccionar Propiedades del campo de formulario. Cada opción también tendrá un nombre, Valor, que se puede modificar y será el que en el formulario nos indicará la opción elegida. En cada grupo por defecto se puede elegir cual es la opción seleccionada. Se puede modificar el Estilo y la Tabulación de los botones. Por último si el campo del grupo

17

Page 18: Creación y diseño de páginas Web con FrontPage2000metodosestadisticos.unizar.es/asignaturas/10234/lahoz/... · Web viewDentro de FrontPage existe una pestaña en la parte inferior

es de obligado relleno seleccionamos Validar, escribimos un Nombre para mostrar y seleccionamos Dato requerido.

e) Menú despegable. Cuando se va a dar la opción al usuario de elegir entre muchas posibilidades, tantas que no es conveniente hacerlo con botones de opción, se utiliza estos campos. En ellos se le da al usuario la posibilidad de elegir entre una o varias opciones fijadas. Si seleccionamos Propiedades del campo de formulario vemos que lo primero que se puede cambiar es el nombre del campo. Para sumar opciones al menú hay que pulsar en Agregar y escribir la nueva posibilidad. Estas opciones se pueden modificar e incluso intercambiar el orden de presentación al usuario. A la hora de ver el menú en la pantalla, si las opciones no caben en la presentación el navegador colocará barras de desplazamiento para poder verlas todas. En Alto se puede modificar el número de opciones que el usuario ve en la presentación. En Permitir selecciones múltiples le damos la posibilidad al usuario de que elija más de una opción del menú. Se puede modificar el Estilo de presentación del menú así como su tamaño. Al igual que en los botones de opción en Validar se puede configurar para que el campo sea de obligatoria elección, para lo que hay que darle un Nombre para mostrar. Si el primer elemento de la lista es una aclaración o ejemplo y no es una opción posible en Propiedades de campo de formulario/ Validar seleccionamos No permitir el primer elemento.

f) Botón de comando. Es un botón que desencadena alguna acción. Para modificar la configuración seleccionamos Propiedades de campo de formulario, podemos cambiar el nombre, el estilo, el valor (o etiqueta que se muestra sobre el botón) y la tabulación del campo. La opción por defecto es Normal, que provoca alguna acción determinada (para lo que habremos creado anteriormente un script). Las otras opciones son Enviar y Restablecer que ya hemos visto.

g) Etiquetas de texto e imágenes para insertar dentro del formulario texto e imágenes. Entre los campos se puede escribir texto o insertar elementos.

Para poder trabajar con formularios y ver su funcionamiento no basta con ir a Vista previa, se necesita que el sitio web está publicado y puede hacer de servidor, necesita estar configurado para poder hacer de servidor y permitir el trabajo con bases de datos de formularios. Por defecto FrontPage no esta preparado para ello.

Si se quiere que haya interacción entre los diferentes campos es necesario utilizar script CGI. Para trabajar con los datos ocultos hay que ir a Propiedades del formulario/ Avanzadas.

XIII. Otros componentes: Componentes Java que programa directamente FrontPage.

Botón activable: Para crear efectos a través del ratón. Para colocarlos en una página web hay que seleccionar Insertar/ Componente/ Botón activable. Para modificar su configuración hay que seleccionarlo y pulsar el botón derecho del ratón eligiendo Propiedades del botón activable. Se puede modificar el Texto que aparece sobre el botón (y con él el estilo del texto), el Color de fondo y del botón. Las opciones de Efecto y Color de efecto son las modificaciones que se producirán en el botón cuando se pase el cursor sobre él, sin necesidad de pulsar. Se puede configurar el botón para cambiar el color de fondo por una imagen y el efecto de colores y brillos por otra imagen, lo que provocará es que al pasar el ratón por el botón cambiará la imagen. Para lo cual en la pantalla de modificación de las Propiedades del botón activa seleccionamos Personalizado. En la parte de Imagen personalizada/ Botón ponemos la imagen de fondo y en la parte de Al activar la imagen la que se va a ver al pasar el cursor sobre el botón.

Si se desea que al pulsar sobre el ratón vaya a otro enlace hay que poner este en Propiedades del botón activable/ Vincular a. Este puede ser otra dirección web, una dirección de correo electrónica, otro archivo o un marcador. Si el efecto esperado es la reproducción de un sonido en Personalizado/ Reproducir sonido/ Al hacer clic se coloca el archivo de sonido que se

18

Page 19: Creación y diseño de páginas Web con FrontPage2000metodosestadisticos.unizar.es/asignaturas/10234/lahoz/... · Web viewDentro de FrontPage existe una pestaña en la parte inferior

quiera. Si la reproducción es al pasar el cursor sobre el botón hay que colocar el archivo en Al activar. En la reproducción solo permite formato au o snd.

Para modificar las dimensiones del botón se selecciona y se arrastra hasta conseguir el aspecto deseado o en Propiedades del botón activable se le da un Alto y un Ancho fijados.

Para ver las modificaciones que vamos haciendo hay que ir a Vista previa, pero antes es necesario guardar los cambios que vamos haciendo. Si tenemos algún archivo de sonido o imagen vinculado nos preguntará si lo guardamos en las carpetas de la web destinadas para ellos.

Titulares o banners: Se utilizan para hacer más vistosa una página web, normalmente como reclamo de publicidad. Permite realizar algunas acciones con imágenes. Para colocarlos en la página hay que seleccionar Insertar/ Componente/ Administrador de titulares. Nos aparece una ventana para configurar la banner. Primero debemos de fijar las dimensiones de la ventana de visión, Alto y Ancho. Después se fija el efecto deseado para el cambio de una imagen a otra. Entre los posibles: Ninguno (pasa de una imagen a otra sin transición), Descubrir horizontal o vertical (va abriendo barras sobre la imagen vieja y muestra la nueva), Disolver ("disuelve" la imagen vieja y va colocando la nueva), Recuadro entrante y saliente (va abriendo cuadros con la imagen nueva y desaparece la vieja). En Mostrar cada imagen durante se fija el tiempo que permanece una imagen hasta que es sustituida por la siguiente. En Imágenes que se mostraran se colocan todas las imágenes que van a hacer el bucle. Para añadir alguna más se pulsa sobre Agregar, y para borrar alguna sobre Quitar. El orden en el que se muestran las imágenes es el que se da en la ventana si se desea modificar se utilizan los botones de Subir y Bajar.

El titular puede hacer de enlace con otros archivos o direcciones. En este caso se coloca la dirección del hipervínculo en Vincular a.

Para modificar un titular hay que seleccionarlo y pulsar el botón derecho del ratón seleccionando Propiedades del Administrador de titulares. Para borrarlo una vez seleccionado se elimina.

Contadores de visitas: Se utilizan para controlar el número de usuarios que han accedido a una página web. Seleccionando Insertar/ Componente/ Contador de visitas a la página nos aparecerá una pantalla donde podemos seleccionar el tipo de contador que deseamos. Se puede personalizar el contador guardándolo en custom.gif. Las únicas modificaciones posibles son el número donde queramos que empiece a contar, Restablecer el contador, y si queremos que vuelva a cero una vez superado un umbral de dígitos, Número fijo de dígitos. Para poder ver y comprobar el funcionamiento hay que guardar primero la página y publicarla. Para modificar el contador hay que seleccionarlo y elegir Propiedades del componente de FrontPage obteniendo la misma ventana que cuando lo creamos. Para eliminar un contador se selecciona y se borra.

Marquesinas: Con esta componente se puede dar movimiento a un texto. Para agregar a la página seleccionamos Insertar/ Componente/ Marquesina. Nos aparece una ventana donde introducimos el Texto al que vamos a dar movimiento. Las posibilidades de configuración son: Dirección donde queramos que aparezca el texto, izquierda o derecha, Velocidad de Retardo que espera antes de mover el texto, Velocidad/ Cantidad para controlar la distancia que avanza el texto, Comportamiento que tiene el texto en su movimiento, Alineación con el texto del movimiento, Color del fondo de la marquesina, Repetición indefinida y fijada, Tamaño de la marquesina y Estilo del texto.

Para modificar la configuración de una marquesina ya creada se selecciona y se elige Propiedades de marquesina. Para eliminarla se selecciona y se borra.

Búsqueda: Permite la búsqueda de texto dentro de la web. Para insertarla en una página hay que seleccionar Insertar/ Componente/ Formulario de búsqueda. Como su nombre indica funciona como un formulario, por lo que para ver su funcionamiento necesita que este publicada y que nuestro servidor permita trabajar con extensiones de formularios de Microsoft.

Al igual que un formulario su inserción lleva por defecto dos botones, uno para restablecer y otro para enviar la búsqueda al servidor. El texto de los botones se puede

19

Page 20: Creación y diseño de páginas Web con FrontPage2000metodosestadisticos.unizar.es/asignaturas/10234/lahoz/... · Web viewDentro de FrontPage existe una pestaña en la parte inferior

modificar. Las otras propiedades que pueden variar son el número de caracteres máximos a buscar y el texto de la búsqueda. Dentro del formulario no se pueden introducir más elementos.

Otras componentes: Tablas de contenido, imágenes programadas, campos de confirmación,…

Nota: Como estas opciones son programas de Java para manejar alguno de ellos FrontPage primero debe colocar sus clases en nuestro sitio web. Se puede ver dichas clases en Lista de carpetas. Se pueden ver las variables para estas clases seleccionando la componente y pasando a Vista HTML.

Nota: Algunas de estas componentes pueden no funcionar según los navegadores y las versiones de estos.

XIV. Bases de datos.

Si se quiere trabajar con bases de datos lo primero que hay que ver es si el formato es compatible con FrontPage. Las extensiones con las que trabaja el programa son: MDB (Microsoft Access), DBF (dBase, Microsoft Foxpro), XLS (Microsoft Excel), TXT (Datos de texto separados por tabuladores), y CSV (Datos de texto separados con comas). Si la base de datos que se va a usar no es ninguno de los tipos anteriores hay que utilizar un programa intermedio que exporte y guarde los datos.

Antes de empezar a trabajar hay que colocar la base de datos en las carpetas de trabajo del sitio web. Se puede guardar en la carpeta raíz de trabajo (…/Mis Web/ miWeb#). FrontPage por defecto crea una carpeta de nombre fpdb dentro de la web para almacenar las bases de datos que utiliza.

Si la conexión con la base de datos es nueva hay que notificar a FrontPage que se va a trabajar con ella. Seleccionar Herramientas/ Configuración Web y pulsar sobre la pestaña de Base de datos. En esta pantalla pulsamos sobre Agregar y nos aparece otra pantalla para la configuración. Se modifica el Nombre y el Tipo de conexión: Archivo o carpeta del Web actual para el caso que la base de datos este en las carpetas del sitio web, Origen de los datos del sistema en el servidor Web cuando la base este en el servidor web, Conexión de red al servidor de base de datos para que la base sea controlada por un servidor que trabaje con SQL, Definición personalizada cuando la base de datos tiene alguna configuración que no se puede controlar directamente con FrontPage. En Avanzadas se puede configurar la base de datos como restringida para usuarios con contraseña. Antes de cerrar la pantalla es conveniente probar la conexión. Basta seleccionar el nombre y pulsar sobre Comprobar, si desaparece el interrogante y aparece una v la conexión se ha realizado con éxito

Como segundo paso hay que decirle al programa que vamos a trabajar con una base de datos. Con la orden Insertar/ Base de datos/ Resultados se pasa al Asistente para resultados de base de datos que ayuda a la conexión de la base de datos. Lo primero que se decide es el tipo de conexión. En la siguiente pantalla se elige entre mostrar listas de datos ya creadas o crear alguna. Estas últimas se crean bajo lenguaje SQL de manejo de bases de datos en Internet. La siguiente pantalla sirve para eliminar aquellos campos de la base de datos que no queramos mostrar o para cambiar el orden de presentación. La posibilidad de Más opciones sirve para crear filtros y ordenaciones. En Criterios se agregan los filtros que se deseen y en Orden se colocan las variables de orden, pudiéndose elegir entre orden creciente o decreciente. En la cuarta pantalla seleccionamos la forma de visión de los datos: tabla, lista o lista despegable. Dependiendo de la opción elegida podremos configurar la presentación de una manera o de otra. En la quinta pantalla están las opciones para ver toda la base o ver solamente grupos de un número fijado de elementos.

Una vez finalizado el proceso FrontPage guarda la página con terminación asp, formato para conectar la web con la base de datos. Antes de poder comprobar la página en Vista previa hay que guardarla y publicarla.

XV. Títulos, Nombres y Meta-etiquetas

20

Page 21: Creación y diseño de páginas Web con FrontPage2000metodosestadisticos.unizar.es/asignaturas/10234/lahoz/... · Web viewDentro de FrontPage existe una pestaña en la parte inferior

Cuando se crea una página nueva en FrontPage se le da como nombre página_nueva_# .htm o index.htm. Estos son los nombre de los archivos, por los que son reconocidos en las estructuras del sitio web a la hora de los enlaces. Estos nombres de los archivos son diferentes de los títulos de las mismas páginas. Estos son las denominaciones con que son conocidas a la hora de navegar, el nombre que mostrará el navegador cuando las abra. Así las páginas pueden tener un nombre (que como nombre de archivo tiene sus restricciones) y un título (con más posibilidades y sin extensión) diferentes. Para cambiar el nombre de una página existen varias posibilidades, en Lista de carpetas seleccionar el archivo y con el botón derecho del ratón elegir Cambiar nombre, o en visión Carpetas el mismo proceso. FrontPage permite modificar el nombre de cualquier archivo de la web con el sitio no sólo con los archivos de página. Hay que tener cuidado al cambiar el nombre de los archivos porque podemos dejar muertos algunos enlaces. Por eso el programa cada vez que se modifica el nombre de algún archivo comprueba los enlaces que existen con él y los modifica si es necesario. Esto lo realiza si el fichero pertenece a nuestro sitio web.

Si lo que se quiere es modificar el título de la página se selecciona Propiedades de página y pestaña General en visión Página. Otra forma es modificarlo en visión Exploración, pulsando dos veces sobre el nombre de la página.

El título es importante a la hora de trabajar con marcos ya que el título del sitio será el del marco no el de ninguna de las páginas que lo compongan. Si se desea que el título sea el mismo para todo el sitio web, en sus diferentes páginas, basta crear un marco. A este se le da el nombre que se desea manteniendo siempre fijo una parte y cambiando otras partes que la compongan.

Las Meta-etiquetas sirven para ayudar a los buscadores. Cuando un usuario está utilizando un buscador este analiza las meta-etiquetas de las páginas y muestra las coincidentes con la búsqueda. Es una forma de dar una serie de palabras claves que definan la información de nuestro sitio web. Para añadir meta-etiquetas a una página ha y que seleccionar Propiedades de página y pestaña de Personalizada. En esta pantalla pulsamos sobre Agregar en el apartado de Variables de usuario. En la nueva ventana se escribe la clave en la parte de Nombre y se rellena Valor con las etiquetas que queramos. Las meta-etiquetas se pueden borrar y modificar en la misma pantalla.

Nota: una forma más sencilla de modificar las etiquetas es ir al código HTML, buscar el campo "Clave" y modificar "content". Primero se ha debido introducir alguna etiqueta.

Nota: Cuidado con los nombres de los ficheros, Microsoft y FrontPage permite muchos caracteres que no permiten otras plataformas, como espacios en blanco, distinguir entre mayúsculas y minúsculas,… Lo mejor es dar nombres que sean sencillos y con pocos signos de puntuación.

Existe la posibilidad de que la página este fuera del alcance de los buscadores. En la misma pantalla que en el caso anterior introducimos robots en el campo Nombre y noindex, nofollow en Valor.

XVI. Tareas.

A veces en la creación de un sitio web no sólo está trabajando una persona. Existen diferentes grupos de trabajo, con tareas diferentes, unos trabajan con la estructura, otros con la maquetación, otros con las imágenes,… En estos casos es importante que haya una conexión entre estos grupos informando sobre cuales son las tareas que han realizado y cuales están en proceso de creación o sin comenzar. Para esto FrontPage tiene una herramienta llamada Tareas, que sirve tanto para grupos de trabajo como para una sola persona que se marca trabajos a realizar.

La opción Tareas tienen dos posibilidades, marcar un trabajo pendiente relacionado con una archivo o para tareas sin archivo. Para el primer caso hay que relacionar el archivo con la tarea a realizar. Lo más sencillo en este caso es tener visible la Lista de carpetas y pulsar con el botón derecho del ratón sobre el archivo. De las opciones que aparecen pulsamos sobre Agregar tarea. En la pantalla de Nueva tarea nos vendrá marcado ya el nombre del archivo, en Asociado con. También nos da información general de la tarea en las opciones no modificables de

21

Page 22: Creación y diseño de páginas Web con FrontPage2000metodosestadisticos.unizar.es/asignaturas/10234/lahoz/... · Web viewDentro de FrontPage existe una pestaña en la parte inferior

Completada, Modificada por y Creada por. Los campos a rellenar son el Nombre de tarea, en el que daremos un nombre que nos de idea de la tarea a realizar, y Asignada a, en el que podemos decir a que grupo de trabajo se le asocia la tarea, en el caso que tengamos alguno definido. En Prioridad se pueden dar diferentes niveles de importancia a las tareas, marcando cuales deben de ser resueltas antes y cuales después. Por último en Descripción se detalla cual es la tarea a realizar.

Si lo que se desea es crear una tarea que no depende de ningún archivo, hay que estar en vista Tareas y con el botón derecho del ratón seleccionar Nueva tarea, o en el menú seleccionar Edición/ Tareas /Agregar tarea. La pantalla de Nueva tarea es igual que en el caso anterior salvo en el campo Asociado con.

Para ver las diferentes tareas lo más sencillo es a través de la vista Tareas. Aquí también se pueden modificar y eliminar, basta pulsar con el botón derecho sobre ellas.

Antes se ha dicho que las tareas se pueden asociar a un grupo de trabajo. Por defecto el único grupo que tiene creado FrontPage es el que denomina invitado pero se pueden añadir más. Para ello seleccionamos Propiedades de página, botón derecho sobre la ventana principal, y se elige la pestaña Grupos de trabajo. Dentro de esta ventana se pueden añadir más grupos de trabajo pulsando sobre Nombres en la parte de Asignados a, donde podemos ver lo ya creados. Una vez creados los grupos se pueden utilizar a la hora de asociar una tarea.

XVII. Comprobando el sitio web.

FrontPage da la posibilidad de poder comprobar si el sitio web que estamos creando tiene algún problema, como vínculos rotos, formularios mal creados,… Si se selecciona la vista Informes se puede ver un resumen del sitio web incluidos los problemas existentes. Para desarrollar con más detalles cualquiera de las secciones del Informe basta pulsar sobre ella. Así si pulsamos sobre Hipervínculos rotos podremos ver cuales son estos e incluso arreglar el problema. Lo mismo podemos hacer con cualquier sección. Para volver a la vista general de Informes hay que seleccionar Ver/ Informes/ Resumen del sitio.

En muchas ocasiones en los sitios web hay páginas o archivos creados para control pero no para ser visitados por el usuario. No deben de ser publicados. Si se desea que alguna parte del sitio no sea publicada hay que estar en vista Estado de publicación. Para seleccionarla se va a Ver/ Informes/ Estado de publicación. En ella se puede ver una lista de todos los archivos que maneja el sitio web. Si se quiere que alguno de estos no sea publicado se selecciona y pulsando el botón derecho del ratón elegimos Propiedades. En la pestaña de Grupo de trabajo se selecciona Excluir este archivo al publicar el resto del Web. Notar que en esta vista también se puede añadir y modificar las tareas.

Si el archivo debe de ser utilizado en la publicación pero no en la visión hay que moverlo a la carpeta _private. Se pueden crear más carpetas ocultas al usuario simplemente poniendo el guión bajo, _, antes que el nombre.

XVIII. Publicando el sitio web.

Antes de publicar el documento es interesante comprobar su resultado en varios exploradores, varias versiones, varios sistemas y varias plataformas (PC, Mac). Recordar que algunas de las herramientas que hemos visto son "exclusivas" de Microsoft, no son estándares de HTML. La mayoría de las acciones insertadas pueden dar problemas en algunos equipos. Incluso los efectos dinámicos, o algunos estilos de letra pueden causar problemas. En algunos caso los problemas no son importantes ya el propio navegador hace el cambio para que las cosas funcionen, como en el caso de los tipos de letras, pero en otros puede que alguna acción importante e incluso algún enlace queden rotos.

FrontPage ofrece la posibilidad de crear el código HTML de las páginas web dependiendo de los navegadores que vayan a acceder a ella, ya que el lenguaje no es interpretado de la misma manera por cada uno de ellos. Para indicar que tipo de navegadores y que versiones son los que van a navegar por la página en Herramientas/ Opciones de página se selecciona la pestaña de Compatibilidad. En Exploradores se puede elegir los navegadores y en

22

Page 23: Creación y diseño de páginas Web con FrontPage2000metodosestadisticos.unizar.es/asignaturas/10234/lahoz/... · Web viewDentro de FrontPage existe una pestaña en la parte inferior

Versiones de exploradores las versiones mínimas de estos. También se puede elegir el tipo de Servidor y si este está Habilitado con las Extensiones de servidor de Microsoft FrontPage. Conforme se varíe los parámetros anteriores las opciones marcadas en Tecnología cambiarán.

Es importante comprobar también el tiempo de carga del sitio web, ya que se puede crear una página muy vistosa y creativa pero que sea imposible el acceso a ella. Recordar que todos los efectos de sonido, video,.. ralentizan la carga.

Cuando ya se ha comprobado que todo funciona y se ha depurado el sitio se publica la web. Seleccionando Archivo/ Publicar web pasamos a la pantalla de las opciones Publicar Web. A la hora de publicar una web lo normal es que ya se haya contactado con una ubicación de Internet que nos de permiso a publicar en su servidor. El servidor ha tenido que dar las pautas y las configuraciones que se deben utilizar. En el caso en que no se tenga servidor podemos pulsar sobre la opción ISP que enviará a la página web de Microsoft destinada a la contratación del servidor.

En el caso que se tenga servidor debemos de poner su dirección en Especifique la ubicación en la que se publicará el Web. Si no es la primera conexión con el servidor se puede usar la opción de Examinar.

Para ver las opciones que el programa ofrece a la hora de publicar la web hay que pulsar sobre el botón de Opciones. La primera posibilidad es modificar solamente los archivos que se hayan cambiado desde la última actualización de la publicación o escribir todo el sitio web de nuevo. Esta opción solo tiene efecto si no es la primera vez que publicamos en ese servidor. Se pueden incluir las carpetas en el servidor seleccionando Incluir subwebs. Si el servidor posee posibilidad de protección de archivos se puede seleccionar Conexión segura requerida (SSL).

En el caso de que el servidor elegido no trabaja con las extensiones de FrontPage los archivos a publicar no se mandan a una dirección http sino a una ftp. Se cambia http://dirección por ftp://dirección en Especifique la ubicación en la que se publicará el servidor. En caso de que la publicación se haga mediante ftp puede ser más conveniente utilizar alguno otro programa de intercambio de archivos vía ftp.

Manejando el sitio web con FrontPage no hay problemas en cuanto a los nombres de los archivos, los atributos de estos,… Sin embargo según sea el servidor que vayamos a utilizar esto puede ser importante. Un servidor basado en MS-DOS o en Linux no entiende los nombres de los archivos de la misma manera y puede darse el caso que no encuentre una página o un enlace a algún archivo porque el nombre sea diferente en MS-DOS que en Windows (o FrontPage). Para no tener problemas de este estilo se puede avisar a FrontPage que tenga cuidado con los atributos de las páginas. En Herramientas/ Opciones de página se elige la pestaña de Código fuente HTML y se seleccionan las propiedades que deseemos. También se puede modificar los colores que HTML utiliza en el lenguaje seleccionando la pestaña de Codificación en colores.

23