frontpage 2000 · 2009. 12. 20. · capitulo vii: los hipervinculos.....12 capitulo viii: los...

Tutorial Frontpage2000

© 2005 Unidad de Informática - UNMSM

FRONTPAGE 2000

Biblioteca Central “Pedro Zulen” - 2005



TABLA DE CONTENIDO CAPÍTULO I. INTRODUCCIÓN.................................................................................... 3 CAPÍTULO II. INTERFAZ DEL PROGRAMA............................................................. 4

¿CÓMO FUNCIONA UNA PÁGINA WEB? ............................................................. 5 CAPÍTULO III. CREANDO UNA PÁGINA WEB. ........................................................ 6

LA PRIMERA PAGINA .............................................................................................. 7 CAPITULO IV: PROPIEDADES DE LA PAGINA .............................................................. 8 CAPITULO V: LAS TABLAS Y LAS CELDAS ........................................................ 10 CAPITULO VI: INSERTAR UNA IMAGEN ............................................................... 11 CAPITULO VII: LOS HIPERVINCULOS................................................................... 12 CAPITULO VIII: LOS MARCADORES ...................................................................... 13 CAPÍTULO IX. IMÁGENES DE FONDO.................................................................... 16 CAPÍTULO X. MARQUESINAS DESPLAZABLE..................................................... 17 CAPÍTULO XI. CONTADOR DE VISITAS A LA PÁGINA...................................... 18 CAPÍTULO XII. TEXTO ............................................................................................ 19 CAPÍTULO XIII. CREAR LA ESTRUCTURA DE LA WEB.................................. 21 CAPÍTULO XIV. NAVEGACIÓN AUTOMÁTICA................................................. 22 CAPÍTULO XV. LOS TEMAS................................................................................... 24 CAPITULO XVI: PAGINA DE MARCOS................................................................... 25 CAPITULO XVII: Enlace a otra pàgina web ................................................................. 27 CAPITULO XVIII: Mail- to............................................................................................ 29

Se escribe la dirección de correos a la que se quiere que llegue el correo y se aceptan las dos pantallas. ......... 30 CAPITULO XIX: Formularios ....................................................................................... 31

Propiedades del formulario...................................................................................... 32 CAPITULO XX: Las hojas de estilo ................................................................................... 34 CAPÍTULO XXI. HTML DINÁMICO....................................................................... 36 CAPÍTULO XXII. PUBLICACIÓN DE LA WEB..................................................... 37 PUBLICAR EN LA RED............................................................................................... 38 CAPÍTULO XXIII. CÓMO BAJARSE UNA WEB DE LA RED UTILIZANDO EL FTP DE FRONTPAGE 2000.......................................................................................... 40 CAPÍTULO XXIV. INSERTAR SONIDO EN LA PÁGINA.................................... 43



FRONTPAGE 2000

CAPÍTULO I. INTRODUCCIÓN

Las páginas web están basados en los que se llama el hipertexto. Word, por ejemplo, es un procesador de textos y el producto final está previsto para imprimirlo. Se trata de un texto lineal, es decir, que se comienza por la primera línea del primer párrafo y se acaba en la última línea del último párrafo. En el hipertexto no hace falta seguir el documento de forma lineal, sino que se establecen saltos (hipervínculos) de forma que cada vez que encontramos alguno de ellos podemos ir a otro sitio de la página. Por esta razón son documentos que se crean para ser vistos en pantalla.

Las páginas web sirven para preparar materiales en este formato y ser utilizados con los navegadores de Internet y también para ser publicados en Internet.

Hasta hace algunos años las páginas web había que hacerlas escribiendo el código html y comprobando el resultado en un navegador. Pero con el tiempo fueron apareciendo programas wysiwyg (what you see is what you get – lo que ve es lo que consigue), es decir, que se puede trabajar directamente sobre los resultados finales. Algunos de estos programas son FrontPage, Macromedia Dreamweaver.

FrontPage 2000 es una de las herramientas más sencillas para crear y administrar sitios Web ya que dispone de una interfaz muy sencilla para acceder a las herramientas.

También disponemos de un rápido acceso al editor de HTML lo que permite visualizar en el acto una vista previa de lo que estamos realizando sin tener que, como otros programas, salir al navegador. Podemos añadir con gran rapidez tablas, hipervínculos (links), gráficos, frames, ventanas de búsqueda, contadores, etc...

Además, disponemos de gran cantidad de temas prediseñados los cuales podemos personalizar a nuestro gusto. Otra de las grandes ventajas es el poder añadir efectos del HTML dinámico (DHTML) para cualquier navegador de manera muy sencilla. Todo esto y mucho más lo iremos viendo a través de este tutorial. FrontPage 2000 está también incluido dentro del paquete Microsoft Office 2000.



CAPÍTULO II. INTERFAZ DEL PROGRAMA

Como se puede ver la interfaz es muy sencilla y accesible a todas sus funciones. En la parte superior se encuentra la barra de menús, por debajo las herramientas y en el centro el área de trabajo. Más abajo observamos tres pestañas: -Pestaña Normal, es la página donde incorporamos todo lo que deseemos que aparezca en nuestra Web site, tablas, gráficos, texto, etc... -Pestaña HTML, donde accedemos rápidamente al editor de HTML. -Pestaña Vista previa, que es la visualización de nuestro Website tal y como lo veríamos en el navegador. Mira a continuación la barra de herramientas ampliada para apreciar mejor los iconos que más nos interesan.

?? Lista de carpetas. Dedica una parte de la ventana de la vista a la estructura de carpetas. Es más interesante a medida que el sitio Web se complica. Funciona de manera semejante al Explorador del Windows: puedes abrir una página haciendo doble clic, desplegar y replegar carpetas, haciendo clic en los símbolos ? y ?, hacer clic con el botón derecho para obtener un menú contextual, mover y renombrar ficheros, etc. (Es distinto de la Vista – Carpetas que luego comentaremos).

?? Vista previa (icono ya mencionado). Muestra la página Web tal como se verá desde el navegador. Al utilizar por primera vez este icono, preguntará cuál es nuestro navegador. Para ver la página es preciso grabarla previamente.



En la esquina inferior derecha podemos observar un pequeño reloj de arena al lado del cual aparece indicado el tiempo que tardaría en descargarse la página que estamos realizando según la velocidad de conexión a Internet que nosotros especifiquemos. Más adelante veremos que es indispensable esta herramienta para lograr un Website lo más accesible posible. La interfaz además nos permite poder ubicar a nuestro gusto las herramientas, si bien las podemos poner en la parte superior, inferior , izquierda, derecha o como ventanas flotantes. Solamente hay que pasar el puntero del ratón sobre la barra de herramientas que deseamos mover y cuando aparezca el puntero con la forma de dos flechas negras cruzadas pulsar el botón izq. del ratón, mantenerlo apretado y arrastrar hasta la posición deseada. ¿CÓMO FUNCIONA UNA PÁGINA WEB? Una página web es un documento escrito en HTML ( Lenguaje de Marcado de Hipertexto ) el cual contiene la información que necesita el Navegador. El Navegador traduce el documento de manera que podemos ver textos, imágenes, etc... Cuando hemos elaborado una página web y la hemos dado un nombre, supongamos que la hemos llamado pagina1.htm, lo que hacemos con ella es ubicarla en Internet dentro de un Dominio, por ejemplo http://sisbib.unmsm.edu.pe, quedando ubicada en una ruta que nosotros hemos creado, como podría ser http://sisbib.unmsm.edu.pe/pagina1.html. Si introducimos esta ruta en un Navegador este último lo que hace es buscar por toda la red el Dominio y la ubicación de la página web. Una vez encontrada procede a traducir el código HTML y nos muestra la página. Para poder elaborar una página web necesitamos una herramienta que nos permita introducir el código HTML por nosotros mismos, tarea muy complicada ya que hay que tener un extenso conocimiento de Lenguaje HTML, o que nos permita ubicar los elementos que queremos publicar (textos, imágenes, etc.. ) de una manera sencilla y cómoda. Para todo esto disponemos de la herramienta llamada Microsoft FrontPage 2000.



CAPÍTULO III. CREANDO UNA PÁGINA WEB.

Para crear una web hay ir a Archivo / nuevo /web. Se nos abre la siguiente ventana:

En esta ventana aparecen diferentes asistentes para crear o importar webs. Nosotros vamos a seleccionar la última de las opciones que se nos ofrece que es un "Web vacío". En la ventanita de la derecha donde pone "Especifique la ubicación del nuevo Web" hay que elegir el lugar donde queremos tener la página. Para ello habrá que crear las carpetas que queramos para contener la página. Lo que aparece después de la última barra (\) es el nombre que le ponemos a nuestra página. Cuando hayamos escrito la ubicación deseada, aceptamos y en unos momentos Frontpage crea la estructura mínima necesaria para la web. Esto lo podemos ver haciendo click sobre el

icono , que se encuentra debajo de insertar. Este icono abre y cierra una partición de la pantalla en la que podemos ver la lista de carpetas y archivos que forman la web. La estructura básica es la siguiente:

Al principio aparece la ubicación que hemos dado a la página y después dos carpetas vacías. La llamada "images" es para guardar todas las imágenes. Y la llamada _private es para guardar cosas que no se publicarán en Internet.



Por supuesto podemos cambiar el nombre de las carpetas, igual que crear todas las que queramos utilizando cualquiera de las técnicas que sirven para hacerlo en el Explorador de Windows. LA PRIMERA PAGINA Cuando creamos la web, directamente se nos queda en pantalla una página nueva para empezar a trabajar. Al igual que en Word, Frontpage va dando a las páginas nuevas que creamos el nombre de página_nueva 1, 2, 3, etc., h asta el momento que la guardamos que es cuando hay darle el nombre que queramos.Ç Al guardar la página, que lo podemos hacer al principio, Frontpage nos va a pedir un nombre de archivo y un nombre de título de página. Al dar a guardar se nos abre la siguiente ventana:

En esta pantalla hay que dar un nombre de archivo y en "Cambiar..." un título de página. El nombre de archivo tiene que respetar ciertas reglas:

?? No se admiten espacios en blanco, sí guiones bajos. ?? Sólo se admiten letras del alfabeto inglés, es decir no se admiten ni eñes ni acentos. ?? Es mejor no utilizar mayúsculas porque algunos servidores Unix dan problemas.

En el título se puede utilizar cualquier cosa: espacios, eñes, acentos, mayúsculas, etc. La primera página de la web, es decir, desde donde se parte para navegar por toda ella, siempre se guarda con el nombre de index o home. Frontpage utiliza el nombre de index.



CAPITULO IV: PROPIEDADES DE LA PAGINA

Tenemos que tener en cuenta que el diseño de páginas web, está pensado para mostrarse en pantalla, por lo que es importante trabajar los colores y los fondos de página. En Frontpage para acceder a las propiedades de cualquier elemento hay que pulsar con el botón derecho sobre el elemento y nos aparece una ventana con la opción deseada. Así, si pulsamos sobre cualquier parte de la página con el botón derecho podremos seleccionar propiedades de página, que nos abrirá la siguiente ventana:

Si seleccionamos la segunda pestaña (fondo), vemos que podemos seleccionar para el fondo de la página en primer lugar alguna imagen. Si la imagen es pequeña, ésta se repite indefinidamente como fondo de la página. Pero esto lo veremos más detenidamente cuando hablemos de imágenes. Las otras opciones que vemos son seleccionar el color de fondo, de texto y de hipervínculos. Para seleccionar un color pulsamos sobre el botón que aparece a la derecha de cada opción y nos muestra la siguiente ventana:

En esta ventana se nos muestra una paleta de 16 colores y aquellos que hemos ido guardando para utilizarlos en otras ocasiones.

Si pulsamos sobre más colores se nos abre otra ventana con 256 colores como el que se muestra en el siguiente en el dibujo siguiente.



En esta ventana podemos seleccionar uno de los colores que aparecen, pero si aún queremos más colores podemos pulsar sobre el botón que pone "personalizado" y se nos abre otra ventana con 16.000.000 de colores como aparece en el siguiente dibujo:

Aquí seleccionamos un color y en la barra vertical de la derecha se puede seleccionar el matiz de ese color. También se pueden memorizar los colores si pensamos que vamos a utilizarlos posteriormente. Una vez seleccionado un color, aceptamos todas las ventanas y el color lo tenemos disponible en la página. Hay que tener en cuenta que para fondo se utilizan colores suaves donde destaque el texto, o colores oscuros con textos en color claro. Son más difíciles de manejar los fondos oscuros. Las otras opciones de propiedades de página, no vamos a trabajarlas excepto la pestaña siguiente que son los márgenes. Quien quiera establecer unos márgenes diferentes puede establecerlos desde ahí.



CAPITULO V: LAS TABLAS Y LAS CELDAS

Para poder colocar los diferentes elementos que componen la página, el recurso más utilizado son las tablas, que normalmente son invisibles. Las tablas funcionan igual que en Word. Podemos insertar una tabla utilizando la opción tabla

/ insertar, el icono o las herramientas de la barra de tablas. Cuando insertamos una tabla, hay que tener en cuenta que como las páginas web están diseñadas para pantalla hay que tener cuidado con el ancho de la tabla para que no sea mayor que la pantalla. Las pantallas actuales más utilizadas tienen una medida de 800 píxeles de ancho, por lo que la medida tendrá que ser algo menor. Los píxeles son una medida que se utiliza en los ordenadores y son unos cuadraditos muy pequeños que se ven cuando se aumenta mucho una imagen. Vamos a insertar, por ejemplo, una tabla de dos filas y dos columnas:

Con el botón derecho pulsamos dentro de la tabla, seleccionamos propiedades de tablas y nos aparece una ventana como la siguiente:

Vemos que en la parte derecha aparece la opción de especificar ancho en píxeles y porcentaje. Si, por ejemplo, aplicamos un 100% de porcentaje, la tabla ocupará toda la pantalla del que lo vea, tenga la resolución que tenga su ordenador. Pero ocurrirá que los textos que pongamos y los gráficos se deformarán, que no mantendrán el aspecto que queremos. En cambio si elegimos un ancho fijo en píxeles el tamaño de la tabla será siempre el mismo y se mantendrá el aspecto que le demos. Esta última opción es la más utilizada por esta razón. En alineación conviene elegir el centro porque siempre se situará la tabla en esta posición. Si alineamos a la izquierda, por ejemplo puede ocurrir que si uno tiene una resolución de pantalla más grande, que quede un espacio vacío muy grande en la parte derecha. Si ponemos los bordes a 0 la tabla no se verá en la vista previa. Las otras opciones de margen de celdas y espaciado entre celdas lo podemos probar poniendo por ejemplo 25 y viendo lo que pasa.



También podemos elegir un color de fondo para la tabla diferente al de la página o una imagen. Todo esto funciona igual que para las páginas. Si pulsamos con el botón derecho sobre una celda en concreto y seleccionamos propiedades de celda aparecerá una ventana como esta:

Aquí vemos una serie de opciones para esta celda. Vemos por ejemplo que cada celda puede llevar una imagen o un color de fondo diferente al resto. Podemos probar las diferentes opciones para ver cómo funcionan. Para trabajar con tablas es conveniente tener visible la barra de herramientas de tablas. Para ello, al igual que en Word, pulsamos con el botón derecho sobre cualquiera de las barras de herramientas que tengamos en la parte de arriba de la pantalla y seleccionamos "tablas", que se nos muestra de la siguiente manera:

CAPITULO VI: INSERTAR UNA IMAGEN



Ahora vamos a insertar una imagen dentro de la tabla. Para ello nos situamos en el menú superior y seleccionamos Insertar, Imagen e Imágenes. Al seleccionar esta opción la galería de imágenes que nos ofrece son predeterminadas de FrontPage 2000 en formato Clipart. También podemos elegir la opción de seleccionar Imagen desde archivo, lo cual nos permite insertar una imagen que tengamos por ejemplo en nuestros disco duro. Pero volvamos a la galería de imágenes Clipart. Vemos que se nos a abierto una ventana en la cual hay gran cantidad de iconos de grupos de imágenes los cuales están organizados por temas.

Vamos a seleccionar el icono del tema Académico y vemos que disponemos de 5 imágenes. Vamos a seleccionar la de la izquierda del todo, los libros.

Para ello situamos el puntero del ratón sobre la imagen y pulsamos una vez el botón izquierdo del ratón. Vemos que aparece un pequeño menú en el cual vamos a seleccionar la primera opción que es Insertar Clip. Ahora ya tenemos la imagen dentro de la tabla y lo que vamos a hacer es centrarla. Para ello seleccionamos la opción Centrar de la barra de herramientas de la parte superior.

Y por fin ya tenemos insertada la imagen.

CAPITULO VII: LOS HIPERVINCULOS



Los hipervínculos es lo que nos permite establecer los saltos de una página a otra. El proceso es muy sencillo, se selecciona con el ratón el trozo de texto que queremos que salte

y pulsamos el icono de hipervínculo y se nos abre una ventana como la siguiente:

Pulsamos sobre la página a la que queramos ir y aceptamos. Ya está el vínculo creado. Se pueden vincular también las imágenes de la misma manera, se hace click sobre la imagen y se sigue el mismo proceso. Es importante para que en la vista previa tome efecto todo lo que hacemos, que vayamos guardando los cambios. Los hipervínculos los podemos ir viendo en la vista previa. Si queremos verlos en la vista normal, tenemos que mantener pulsada la tecla control y pulsar sobre el hipervínculo. Hay veces que la vista previa no funciona correctamente, entonces conviene recurrir

directamente al Explorer pulsando sobre el icono .

CAPITULO VIII: LOS MARCADORES



Los marcadores son hipervínculos que se establecen dentro de una misma página. Sirven para navegar dentro de una página o para saltar a otra página, pero no al principio, sino a un punto determinado de la página. Por ejemplo vamos a saltar a la página de presentación, pero al final donde se explica las tres vistas que tiene Frontpage. Para ello pulsa en el siguiente icono: Otro ejemplo donde podemos ver el funcionamiento de los marcadores es el siguiente: Para crear un marcador se coloca el cursor donde queramos insertarlo y va a insertar/marcador y se nos abre la siguiente pantalla:

Se le pone el nombre que se quiera y se acepta. Si hemos seleccionado una palabra, ésta aparecerá subrayada y si teníamos el cursor en un espacio en blanco aparecerá un icono

como este: Para saltar al marcador se selecciona el icono o el texto que queremos que enlace y

pulsamos sobre la tecla de hipervínculos: y se nos abre la pantalla que ya conocemos:



Entonces, en la ventana que aparece junto a "marcador" seleccionamos el marcador cuando el salto se produce en la misma página. Si es otra página a la que queremos saltar, se selecciona primero la página con un click del botón izquierdo y después el marcador que queremos de la página y que previamente lo hemos creado. Ahora convendría crear una página en la que utilizáramos marcadores para practicar con ellos.



CAPÍTULO IX. IMÁGENES DE FONDO

Las imágenes también se pueden utilizar para crear un fondo a la página. Si seleccionamos Propiedades de página con el botón derecho sobre la página / fondo / imagen de fondo / examinar, vemos que se nos abre la siguiente ventana:

Como hemos visto antes, la primera ventana que se nos abre es en la que aparece nuestra web. Aquí podemos seleccionar una imagen, pero si pulsamos sobre "imágenes" accederemos a las imágenes prediseñadas que tiene Frontpage. Si la imagen la tenemos

guardada en otra carpeta tendremos que pulsar sobre Esto nos crea una imagen de fondo repetida indefinidamente. Por eso las imágenes de fondo siempre hay que seleccionarlas bien para que no maten el texto o el resto del documento que queremos transmitir. Lo mismo que decimos de imagen de fondo de una página, sirve para imagen de fondo de una tabla utilizando para ellos las propiedades de tabla.



CAPÍTULO X. MARQUESINAS DESPLAZABLE

Lo primero que vamos a hacer es darle la bienvenida a los usuarios que visiten nuestra página de una manera dinámica. Para ello vamos a incorporar en la parte superior una marquesina desplazable con un texto de bienvenida. Entonces nos vamos a ir al menú de la parte superior y pulsamos Insertar, Componente y Marquesina.

Vemos una ventana flotante llamada Propiedades de marquesina en la que vamos a escribir en la casilla de Texto la bienvenida. También tenemos las siguientes casillas: -Dirección: Podemos hacer que el texto se desplace de izquierda a derecha o al contrario. -Velocidad: Nos sirve para poder cambiar la velocidad en la que se va a mover el texto. -Comportamiento: El texto puede desplazarse, deslizarse o alternar los movimientos. -Alinear con el texto: Nos sirve para centrar el texto de la marquesina en la parte superior, centro o inferior. -Tamaño: Podemos también cambiar el ancho y el alto de la marquesina. -Repetir: Tenemos la opción de que se repita continuamente el desplazamiento de la marquesina o darle un numero determinados de veces. -Color de fondo: Para cambiar el color del fondo de la marquesina solo tenemos que pulsar el menú desplegable y elegir el color de la tabla de colores. Vamos a elegir el negro.

Solamente nos queda accionar el botón de Aceptar y podemos ver la marquesina con el mensaje de bienvenida desplazándose por la parte superior de nuestra página.



CAPÍTULO XI. CONTADOR DE VISITAS A LA PÁGINA

Nos permite visualizar cuantas veces han visitado nuestra página. Entonces nos vamos a ir al menú de la parte superior y pulsamos Insertar, Componente y Contador de visitas de página. Al pulsar el botón aceptar nos aparece la siguiente pantalla:

Y tenemos las siguientes casillas: Estilo de Contador: podemos seleccionar el estilo de nuestro contador e incluso personalizarla. Restablecer el contador a: Numero fijo de digitos:



CAPÍTULO XII. TEXTO

El manejo de los textos en Microsoft FrontPage 2000 es muy fácil. Tenemos dos opciones muy sencillas. Predeterminar el tipo, tamaño, color, etc... de la fuente antes de insertar el texto. Para ello nos vamos al menú de opciones de la parte superior y pulsamos sobre Formato y luego Fuente. Aparece una ventana flotante llamada Fuente. En ella observamos la pestaña de Fuente que incluye: -Fuente: Dónde podemos elegir la fuente deseada. Vamos a seleccionar la fuente Verdana. -Estilo de fuente: Se pueden usar los estilos Normal, Cursiva, Negrita y Negrita Cursiva. Elijamos Negrita. -Tamaño: Aquí elegimos el tamaño de la fuente. Nosotros usaremos el tamaño 1 ( 8 pto ). -Color: Sirve para cambiar el color de la fuente. Nosotros vamos a elegir el blanco. -Efectos: También disponemos de una gran variedad de efectos para nuestra fuente. -Vista previa: Es una ventana en la que podemos ver como está quedando nuestra fuente según vamos cambiando las opciones de ella. En este momento no deberíamos poder ver ningún tipo de vista previa ya que hemos elegido como color de letra el blanco y el fondo de esta vista previa es también blanco, pero a la hora de escribir el texto en la página veremos la fuente tal y como la llevamos determinada.

Ahora accionamos el botón de Aplicar y seguidamente el de Aceptar y ya estamos listos para escribir todo el texto que deseamos en nuestra página.



Al comienzo dije que había dos opciones sencillas para manejar el texto. Pues bien, esta otra opción es escribir el texto que deseamos en la página y una vez que hayamos terminado seleccionamos todo el texto escrito pulsando sobre este con el botón izquierdo del ratón. Una vez seleccionado ( podemos observar como ha cambiado el color del fondo del texto y el color de la fuente ) nos situamos con el puntero del ratón encima del texto y pulsamos el botón derecho del ratón. Nos aparece una ventana de opciones, pulsamos en la opción Fuente y nos aparece la ventana llamada Fuente tal y como hemos visto en el apartado anterior. Solamente tenemos que seguir los pasos que realizamos anteriormente y tendremos el texto tal y como queremos.

Un consejo a la hora de escribir el texto es el no usar la tecla Return o Intro del teclado para pasar de párrafo y en vez de eso mantener pulsado la tecla de Mayúsculas y pulsar el Return o Intro ya que nos queda mas ajustado el texto. Esta opción es la llamada Salto de línea en el menú de Opciones, Insertar y Salto de línea.



CAPÍTULO XIII. CREAR LA ESTRUCTURA DE LA WEB

Lo primero que hay que hacer para tener clara la estructura de la web es coger papel y lápiz y hacernos un dibujo o gráfico donde veamos claro las páginas que necesitamos. Una vez que tengamos claras las páginas necesarias, se pueden crear páginas nuevas y guardarlas con el nombre de archivo y título que queramos. Esto es lo que hemos visto hasta aquí. Ahora vamos a ver otra forma de crear la estructura de la web y que nos permitirá la utilización de navegación automática. Nos vamos a ver / barra de vistas / exploración:

Este icono nos abre una pantalla azul en la que se ve que existe sólo una página, que es la index y que tiene como título "Página principal". Si la web es nueva, podemos ir creando las páginas nuevas que queramos pulsando con el botón Derecho sobre la página y seleccionando página nueva. Esto nos crea una página en un nivel inferior a la que hemos seleccionado para crear una página nueva.

Lo único que al principio nos aparecerá como página_nueva 1, 2 y 3. Para ponerlas un nombre que queramos utilizar, pulsamos con el botón derecho sobre la página y seleccionamos cambiar nombre. Una vez creadas las páginas de esta manera se guardan automáticamente con el nombre que les hayamos puesto. Si la web está creada, sólo tenemos que arrastrar las páginas desde la lista de carpetas pulsando sobre el nombre de archivo con el botón izquierdo y sin dejar de pulsar, arrastrarlo a la pantalla azul y ponerlo en el nivel que queramos. Así tenemos la estructura de la web creada.



CAPÍTULO XIV. NAVEGACIÓN AUTOMÁTICA

Una vez que hemos creado las páginas con el icono "exploración" de la barra vistas, o que hayamos colocado las páginas creadas con anterioridad formando un árbol donde unas páginas dependen de otras, podemos crear una navegación automática. Esto es interesante cuando queremos evitarnos problemas en webs que sean complejas de forma que el visitante nunca se quede colgado en la web. Hay muchas webs que utilizan esta navegación automática, pero hay que decir que si no se utiliza con cuidado el aspecto que puede dar es poco profesional aunque en principio parezca lo contrario. Una vez creado el árbol de la web abrimos cualquier página haciendo doble click sobre la misma. Pulsamos con el botón derecho sobre la página y seleccionamos bordes compartidos. Se nos abre la siguiente pantalla:

Seleccionamos las opciones que vemos seleccionadas en este ejemplo y aceptamos. Vemos que en la página aparecen el título de página y los nombres de las diferentes páginas. En el ejemplo que estamos trabajando de la zapatería aparecería de la siguiente manera.

La página donde estamos aparece en negro y las otras en azul. Vemos también que a parte de las páginas del mismo nivel aparece [Principal], que es la vuelta al index o página de inicio.



Los niveles de navegación se pueden variar pulsando sobre la barra de navegación con el botón derecho y seleccionando propiedades de la barra de navegación. Entonces se nos muestra la siguiente ventana:

Aquí se puede elegir los diferentes niveles de navegación, la página principal, si los botones están en horizontal o en vertical, etc.



CAPÍTULO XV. LOS TEMAS

Los temas son un conjunto de opciones que nos ofrece Frontpage para dar un formato a nuestras páginas. Este formato supone una serie de colores de los botones de navegación automática, fondo, texto, etc. Para aplicar un tema se pulsa con el botón derecho sobre la página y se selecciona tema. Nos aparece una ventana como la siguiente:

Al principio aparece la pantalla en blanco y dice que "esta página no utiliza tema", pero en cuanto seleccionamos algún tema como en el ejemplo de arriba aparece en qué consiste. Si aplicamos, por ejemplo, este tema en el ejercicio que estamos trabajando, quedaría de la siguiente forma:

Se puede aplicar un tema diferente a cada página, pero hay que tener cuidado con esto porque el efecto puede ser un poco chabacano por lo que es mejor utilizar un tema para toda la web o diferentes temas, pero con mucho cuidado.



CAPITULO XVI: PAGINA DE MARCOS

Son unos elementos que facilitan la navegación. En la página Web del CPR puedes ver un marco. Te ofrece vínculos a las distintas páginas. Lo característico es que en cualquier página en que estés, tienes el marco a la vista, por lo que navegas con rapidez a donde quieres. Sólo los usaremos en e ste sentido, aunque también se emplean para mejorar la estética, de forma semejante a las tablas pero con más potencia. Para crear un marco es necesario hacerlo con una plantilla. Archivo – Nuevo –Página – Páginas de marcos. Eliges uno cualquiera viendo en Vista previa su resultado. Al abrir la plantilla aparecen dos botones:

?? Establecer página inicial consiste en señalar qué página Web irá en ese marco cuando arranque, poniendo su dirección URL.

?? Nueva página significa que abres una página en blanco para d iseñarla ahora, y será la que luego aparecerá en el marco.

El reborde azul corresponde al área activa del marco. En el menú de marco puedes eliminar esa área, o dividirla en dos (filas o columnas). Es elemental modificar las dimensiones de cualquiera de las áreas con el ratón. Para un caso como el del sitio Web del CPR, la página del marco debe ser la inicial, o sea, index. Luego vinculas a las distintas partes del marco las páginas iniciales correspondientes, como hemos dicho. Les podrías llamar índice1, índice2, etc. Hay que guardar la página de marcos en Archivo – Guardar como. Ya hemos dicho que le llames index. También hay que guardar las páginas que hayas ubicado en cada área, porque han sufrido una modificación. Para ello, las activas y pides Marcos – Guardar página como. Si no lo haces, al cerrar la página completa del marco te pregunta si deseas guardar las páginas de cada área, y contestas que sí.



El último paso es cómo crear hipervínculos a marcos de destino. En la página Web del CPR, cuando pides Actividades, o Centros, queremos que esos contenidos no salgan a pantalla completa, sino en uno de los marcos (el área más grande) permaneciendo visible la relación de vínculos en otro marco.

Abre el cuadro de diálogo Marco de Destino y puedes elegir el marco que desees. El significado de El mismo es el mismo marco en que estaba el vínculo. Toda la página se explica por sí mismo. Página nueva es abrir una página nueva, de manera que tendrías dos Internet Explorer abiertos con dos páginas: la del marco y la nueva con el destino del vínculo. Haciendo clic con el botón derecho en un marco y pidiendo propiedades de marco, puedes poner un título al marco, que es el que luego debes poner en el cuadro de texto Destino, en caso de que el marco de destino no sea ninguno de los tres del párrafo anterior. Muchas veces todos los vínculos de un marco tienen como destino otro marco fijo. En este caso se puede predeterminar. Haciendo clic con el botón derecho en el marco donde están los vínculos, pide Propiedades de página. En la pestaña General, cuadro de texto: Marco de destino predeterminado, señalas adonde irán los vínculos. Los marcos se eliminan en Marco – Eliminar marco.



CAPITULO XVII: Enlace a otra pàgina web

Algo muy importante a la hora de hacer páginas web es que estas no tengan un tamaño, tanto de dimensiones como de archivo ( el tamaño de las páginas webs se miden en bytes como cualquier otro archivo informático ) muy elevado. Para ello lo que hacemos es, en vez de una sola página con todo el contenido, dividimos este contenido en varias como por ejemplo este tutorial. Si hacemos todo el tutorial en una sola página sería tremendamente larga y tardaría muchísimo tiempo en descargarse al Navegador ya que tendría un tamaño de archivo en bytes enorme. Para evitar todo esto lo que hemos hecho es dividirlo en varias páginas. Esto requiere una planificación de la web. Si vamos a exponer un capítulo del tutorial por página web lo planificaríamos de manera que en todas las páginas tiene que haber un enlace entre ellas y para ello podemos usar botones o simplemente texto. Nosotros vamos a usar botones pero antes vamos a planificar la web. Podíamos hacerlo de la siguiente manera: Si disponemos de tres capítulos vamos a elaborar una primera página a la que la vamos a llamar "índice" y en la q ue vamos a explicar el contenido que tendrán las siguientes páginas, las cuales podremos llamar "capítulo1", "capítulo2" y "capítulo3".

Todas ellas tienen que estar enlazadas entre si y para ello vamos a hacer unos botones. En el menú de opciones de la parte superior vamos a pulsar sobre Insertar, Componente y Botón Activable. Nos aparece una ventana flotante en la que haremos lo siguiente en cada opción:

-Texto de botón: Aquí ponemos el nombre que queremos que aparezca como referencia para el usuario. Vamos a llamarlo Capítulo 1. -Fuente: Ahora vamos a establecer el tipo, color y tamaño de la fuente. Pulsamos sobre el botón y elegimos como fuente MS Sans Serif, como estilo Negrita, como tamaño 14 y como color el blanco. -Vincular: Este campo es el mas importante de rellenar ya que aquí le indicamos al botón a que página se ha de enlazar esta. En este caso ponemos capítulo1.htm, ya que así quedará nombrada la página web del Capítulo 1 cuando la guardemos.



-Color del botón: Vamos a cambiar el color del botón y elegimos el color rojo. -Color de fondo: Esta opción nos permite cambiar el color de fondo del botón. -Efecto: En este menú desplegable aparecen unos cuantos efectos que podemos darle al botón cuando se presiona. -Color de efecto: Aquí cambiaríamos el color del efecto que realiza el botón al ser presionado. -Ancho: Sirve para modificar el ancho del botón. -Alto: Este campo modifica el alto del botón. Ahora solamente tenemos que pulsar el botón de Aceptar y ya hemos creado el primer botón.



CAPITULO XVIII: Mail-to

Se llama así porque crea un código html que pone mailto. El mail-to se trata de un texto o icono que al pulsar sobre él se abre el programa de correo que tiene el ordenador con un correo nuevo dispuesto para escribir y la dirección puesta. Un ejemplo de esto es lo que aparece en la página principal de esta web, al final, donde dice que para cualquier consulta puede pulsar sobre el icono. Otros ejemplos serían los siguientes, que al pulsar sobre cualquiera de ellos se abre el programa de correo. CORREO

El mail-to se puede hacer con un texto o con un icono. Para ello se selecciona el elemento

que nos va a abrir el correo y se pulsa el icono de hipervínculo y se nos abre la siguiente pantalla:



Entonces se pulsa en el sobre que aparece a la derecha de dirección URL y se nos abre la ventana siguiente:

Se escribe la dirección de correos a la que se quiere que llegue el correo y se aceptan las dos pantallas.



CAPITULO XIX: Formularios

Un sitio Web puede generar correspondencia hacia su propia entidad. En el sitio Web del CPR hay un formulario de Solicitudes para inscribirse a cursos por vía telemática. Es frecuente en la red. Por ejemplo si deseas un proveedor de Internet gratuito, tendrás que darte de alta, y solicitará tus datos mediante un formulario. En Archivo – Nuevo – Página puedes cargar plantillas de formularios. Por ejemplo el llamado Comentarios. En Vista Previa puedes observar sus posibilidades. El formulario es algo típico de Access, aunque también se puede crear en Word. De todas maneras vamos a tratarlo aquí, ya que nos parece un capítulo menos conocido que el de las tablas. Antes de ponerte a insertar campos de formulario, son precisas unas ideas generales:

1. Cuando insertas el primer campo de tu formulario, Front Page añade los botones Enviar y Restablecer. En los sucesivos campos no. La idea es que todo formulario debe tener un botón Enviar, y así lo prevé ya desde el principio. Estudiaremos más abajo este tipo de botones.

En cuanto al botón Restablecer, su acción es borrar todos los campos del formulario, para el caso de que hayas introducido errores y quieras volver a empezar.

2. Formulario es, propiamente, lo que aparece cerrado entre un marco de línea discontinua. Por eso podríamos tener en la misma página varios formularios. Observa el formulario siguiente, en el que se han descrito los principales tipos de campos:

3. La mayoría de los campos se modifican de tamaño como cualquier imagen



?? Cuadro de texto

Rectángulo vacío. El visitante de la Web puede rellenar el él campos de escritura libre, como sus apellidos.

?? Cuadro de texto con desplazamiento

Cuando la respuesta es más larga se pueden usar estos campos que llevan barras de desplazamiento.

?? Casilla de verificación

El visitante de la Web la activará o no. Cuando hay varias, cosa frecuente, puede activarse una, o varias o ninguna. Por ejemplo: un texto puede estar subrayado, en negrita y/o en cursiva. Puede tener todas estas propiedades, o una o ninguna.

?? Botón de opción

Parecido, pero aquí ha de elegirse uno y sólo uno. Por ejemplo, sexo: hombre o mujer.

?? Menú desplegable

En el formulario de solicitud de inscripción en curso, de la página Web del CPR hay varios campos de menú desplegable. Así, en el tipo de Centro del profesor, las respuestas son: Público, Privado y Concertado. También son cerradas las respuestas sobre si el profesor es de Primaria o de Secundaria. En ejemplos de este tipo es preferible introducir previamente todo el elenco de respuestas, y que el visitante sólo tenga que elegir una, sin darle opción a escribir. De otra forma se recibirán respuestas variadas: profesor de ESO, profesor de Secundaria, Secundaria, etc.

Los valores se introducen de la siguiente manera: se hace clic con el botón derecho en el campo, y se elige Propiedades de Campo de Formulario. Ahí vas dando a Agregar introduciendo todas las posibles opciones.

?? Botón de comando

Después de crearlo, haces clic con el botón derecho y eliges: Propiedades de Campo de Formulario.

En Valor/Etiqueta pondrás el texto que quieras. Por ejemplo, para un botón de tipo Restablecer puedes preferir el texto Borrar.

En Tipo de botón, ya te hemos hablado de los tipos Enviar y Restablecer. En el caso del botón Enviar, habrá que señalar nuestra dirección de correo electrónico. Esto se hace en Propiedades de Formulario y lo explicamos al terminar los campos de formulario.+

?? Imagen Sirve para que un botón lleve una imagen en lugar de un texto.

Falta decir que los campos suelen llevar antes o después etiquetas, que señalan lo que esperamos que el usuario teclee en ellos. Estas etiquetas se teclean directamente en el formulario, delante o detrás de los campos.

Propiedades del formulario



Haciendo clic con el botón derecho en cualquier parte del formulario, puedes elegir la opción Propiedades del Formulario.

La principal es borrar donde dice Nombre de Archivo y rellenar, en su lugar, la Dirección de correo electrónico. Haz clic en el botón Opciones, y en la pestaña Resultados por Correo electrónico. Puede ser interesante que con el formulario te remitan los nombres de los campos, y que vaya rellena por ti, por el creador de la página Web, el asunto. De esta manera, cuando recibas los correos, enseguida sabrás a qué se refieren. Cuando un usuario te envía un formulario relleno, si todo ha ido bien, recibirá al instante un acuse de recibo educado. Pero puede suceder que tú quieras diseñar esa contestación. Puedes hacer una página Web para ello y poner en Página de Confirmación su dirección URL. Una cuestión estética es alinear esos letreros y campos. La manera seria, aunque algo pesada, de hacerlo es mediante una tabla. Se crea dentro del formulario una tabla, por ejemplo de dos columnas. Así, en la columna de la izquierda, por ejemplo, pones los letreros y etiquetas, y en la de la derecha los campos. Otra forma más primitiva consiste en elegir el estilo Con formato, que lleva consigo un tipo de letra feo, pero que facilita los ajustes, ya que todas las letras, espacios y signos de puntuación tienen la misma anchura. Las páginas Web profesionales no manipulan a mano los formularios recibidos, sino que los insertan directamente en ficheros, bases de datos, etc. Nosotros nos conformaremos con imprimirlos.



CAPITULO XX: Las hojas de estilo

Las páginas de estilo sirven para aplicar un mismo formato a todas las páginas que se desee. Pueden proporcionar, por ejemplo, tipos de letra, fondos de página, formato de viñetas, diferentes estilos a los tipos de encabezado, etc. Frontpage tiene diferentes hojas de estilo. Para poder utilizarlas hay que ir a archivo / nuevo / hojas de estilo y se nos muestra la siguiente pantalla:

En esta ventana podemos encontrar una breve descripción de lo que hace cada página. Así, por ejemplo, si nos interesa la hoja de estilo denominada "Arcos", la aceptamos y se nos abre una página que está en código html. Guardamos esta página con el nombre de arcos como una hoja de estilo, es decir que tiene la extensión css. Una vez que la tenemos guardada en nuestra web podemos utilizar la hoja de estilo. Para ello creamos una página nueva en blanco y nos vamos a formato / vínculos de hojas de estilo. Esto nos abre una pantalla como la siguiente:



Pulsamos en agregar y seleccionamos arcos.css y aceptamos. Entonces se nos aplicará el estilo. Al principio sólo veremos el fondo de la página que es amarillo claro, pero según utilicemos los diferentes estilos de título, viñetas, hipervínculos, etc, iremos viendo los resultados. Si esto lo hacemos con las diferentes páginas que componen la web, nos irán quedando con el mismo estilo. Estos mismos apuntes están hechos utilizando hojas de estilo. Conociendo un poco de código h tml podemos cambiar características de las hojas de estilo, e incluso crear nuestras propias páginas de estilo. Pero esto escapa a las pretensiones de este manual elemental. De todas formas lo puede intentar quien le interese porque no es muy complicado. El único problema de las hojas de estilo es que es un recurso típico de Microsoft y lo reconocen los navegadores Explorer 4 y posteriores, pero Netscape, al menos por el momento, no reconoce la hoja de estilo y no muestra sus resultados



CAPÍTULO XXI. HTML DINÁMICO

El dhtml se trata de las últimas tendencias que se quieren aplicar al html. En este punto nos encontramos con diferencias cuando se ve la página con los diferentes navegadores. Frontpage nos ofrece algunas posibilidades para crear dhtml, pero hay que tener en cuenta que sólo funcionará con las últimas versiones del Navegador Explorer y que no siempre funcionan en Netscape. Vamos a ver un par de ejemplo de dhtml: 1.- Pasa el ratón sobre el siguiente texto: Hola ¿qué tal?

2.- Pasa el ratón sobre la siguiente imagen: Para crear efectos dhtml hay que tener visible la barra de dhtml. Para ello, al igual que en Word, se pulsa con el botón derecho sobre cualquiera de las barra de herramientas y seleccionamos efectos DHTML. Se nos muestra la siguiente barra:

A partir de aquí se selecciona un trozo de texto o una imagen y en "elegir evento" se selecciona una de las opciones. Después se nos van activando los siguientes botones y seleccionamos una de las opciones que nos ofrecen y ya está el efecto creado. Hay que tener en cuenta que cuando se trata de una imagen que va a cambiar, las dos tienen que tener el mismo tamaño, si no la segunda se adaptará al tamaño de la primera. Los efectos no se ven en vista normal, sólo en vista previa o en el navegador. Estos efectos son interesantes si los vamos a utilizar con Explorer 5. Pero si los vamos a publicar hay que comprobarlo en los diferentes navegadores para ver que funcionen como queramos.



CAPÍTULO XXII. PUBLICACIÓN DE LA WEB

Una vez que ya tenemos nuestro Website diseñado nos vamos al menú de la parte superior y seleccionamos Archivo y la opción Publicar Web. Vemos que aparece una ventana flotante llamada Publicar web en la que debemos indicar la dirección web donde se van a alojar nuestras páginas. Una vez hecho esto sólo tenemos que pulsar el botón de Publicar.

Para poder publicar nuestro Website de esta manera el servidor donde se alojen nuestras páginas web debe tener instalado unas extensión de FrontPage. En el caso de que el servidor no tenga estas extensiones instaladas podemos usar un software que nos permita subirlas sin necesidad de hacerlo a través de FrontPage2000. Uno de estos programas que os puede servir es Flash FXP, el cual podéis conocerlo a fondo en nuestro artículo sobre el.



PUBLICAR EN LA RED

Frontpage tiene su forma propia de publicar una web en Internet con el icono . Pero esto sólo vale para servidores con los que se han contratado extensiones de Frontpage. La mejor forma de publicar sin contratar estas extensiones, que cuestan dinero, es a través de FTP que son las iniciales en ingles de protocolo de transferencia de ficheros. Para ello lo primero que hay que hacer es contratarse un espacio gratis en cualquiera de los servicios que se ofrecen ahora mismo: terra, inicia, alehop, etc. Estos contratos que se hacen a través de rellenar un formulario sencillo, nos dan una cuenta de correo y un espacio gratis en la Red. Una vez contratado el espacio tenemos que buscar un programa de FTP que también sea gratuito y bajarnoslo de Internet. El más utilizado se llama WS FTP. Lo podemos encontrar en diferentes sitios, por ejemplo, en www.download.com En esa dirección buscamos ws_ftp y en los resultados seleccionamos WS_FTP LE (32-bit) que es el gratuito. Nos bajamos el programa a nuestro disco duro o a un disquete y después lo instalamos. Cuando abrimos el programa nos aparece la siguiente pantalla:

Lo primero que hay que hacer es crear nuestra cuenta con los datos que nos ha dado el servidor. Para ello hay que tener clara la dirección a donde debemos dirigirnos (Host Name/Address), el nombre de usuario (user ID) y la contraseña (password). Si los datos son correctos, en unos instantes se nos abre la siguiente pantalla:



La pantalla de la izquierda es nuestro ordenador y la de la derecha el espacio que nos dejan en el ordenador conectado a Internet. En la pantalla de la izquierda nos vamos a donde está nuestra web y seleccionamos todos los archivos que componen la web y con la flechita los pasamos al otro ordenador. Por el sistema de FTP sólo hace falta pasar la carpeta de imágenes y los archivos de texto. El resto sirven si se está utilizando navegación automática y para que funciones con extensiones de FrontPage. Hay que mantener el mismo esquema que tenemos en nuestra página. Si, por ejemplo, las imágenes están dentro de una carpeta habrá que meterlas en una carpeta con el mismo nombre. Si no respetamos el mismo esquema no funcionará bien la página porque el código html remitirá a un lugar que si no se llama igual y está en el mismo nivel nos dará error. Una vez que el programa nos diga que se han pasado correctamente los archivos de una lado a otro, ya se pueden ver publicados en Internet. Cada vez que hagamos algún cambio en una página habrá que subir la página completa. Es importante recordar que las imágenes son independientes del documento de texto y que, por tanto, habrá que subirlas de forma independiente.



CAPÍTULO XXIII. CÓMO BAJARSE UNA WEB DE LA RED UTILIZANDO EL FTP DE FRONTPAGE 2000

Cuando estamos utilizando mucho una página en Internet, resulta que cada vez que queramos consultarla tenemos que conectarnos a Internet con el consiguiente gasto que esto nos supone. En muchas ocasiones podemos necesitar bajarnos una página completa porque la queremos consultar con frecuencia, seguir modelos que nos interesan o por el motivo que sea. Por ejemplo podemos bajar esta misma web a nuestro ordenador y consultarla sin tener que conectarnos. Lo único que de vez en cuando tendréis que mirarla en la Red para ver si tiene alguna novedad y volver a bajarla completa porque de los diferentes puntos que tratamos voy haciendo alguna modificación. Para bajar la web tenemos que conectarnos a Internet, abrir Frontpage e ir a Archivo/nuevo/web. Se nos abre la siguiente ventana y seleccionamos el asistente para importar al web. En la ventanita de la derecha que dice especifique la ubicación del nuevo Web tenemos que escribir una dirección donde queremos guardar esta web. En el ejemplo que pongo se guardaría en C:\ Mis documentos\ apuntes. Vemos que las barras son invertidas como en Msdos. Esto nos creará una carpeta nueva dentro de Mis documentos o en la ubicación que le demos con el nombre de "apuntes"

Aceptamos y se nos abre otra ventana como la siguiente. Dejamos la opción que nos propone desde un sitio del www y en ubicación escribimos la dirección de esta página que es http://www.terra.es/personal2/cursofront



Damos a siguiente y nos aparece la siguiente ventana:

Podemos seleccionar si queremos limitar el tiempo de descarga o desactivar las opciones que nos propone el cuadro. En el caso de estos apuntes podemos desactivar todas las opciones porque queremos bajar la página completa que al momento de redactar esto ocupa unos 750 kbs. Los niveles por debajo se refiere a los diferentes carpetas por niveles que tenemos dependiendo de la carpeta principal. En el caso de estos apuntes serían 3 niveles. Si queremos bajar una web completa desactivamos todo, pero el problema que tiene esto es que hay webs muy complejas y enormes que nos puede llevar mucho tiempo para bajarlas.



Esto normalmente pasa con webs de empresas y oficiales con muchos contenidos que las construye un equipo de varias o muchas personas, pero es raro en las webs de tipo personal. Por eso cuando desconocemos lo que ocupa una web conviene ponerle unos límites. Así cuando llega al límite de Kbs ya no baja más, pero normalmente tenemos la index y muchas de las páginas que nos interesan. Yo personalmente nunca pongo más de 5000 kb en alguna página que me interesa mucho. Hay que tener en cuenta que un disquete, por ejemplo, ocupa 1400 kbs. Pulsamos en siguiente y nos aparece la última ventana de finalizar:

Pulsamos en finalizar y esperamos que se descargue la página. Una vez que se termine el proceso podemos utilizar los apuntes desde Frontpage, en vista previa, pulsando el botón de vista previa en el explorador o abriendo el archivo de la index desde el navegador.



CAPÍTULO XXIV. INSERTAR SONIDO EN LA PÁGINA

La inserción de sonido y video funciona de una forma muy parecida. Los archivos de video que se admiten en las web tienen las extensiones .avi las que son de Microsoft Vídeo para Windows y .mov o .qt los de Apple. Los archivos de sonido son de muchas más clases porque se han utilizado desde hace mucho más tiempo. Los más habituales son los siguientes:

?? .wav de Microsoft. ?? .snd y .mac de sonido Macintosh. ?? .au de audio de Sun. ?? .mid o . midi que sólo se utilizan para música.

Para utilizar un sonido en una página nos encontramos con las siguientes posibilidades:

?? Incrustar un sonido que lo reproduzcan Internet Explorer y Netscape Navigator: Permite al usuario reproducir un sonido a voluntad. Equivale también a incrustar un video.

Por este sistema vamos a conseguir incrustar un sonido en los dos navegadores más importantes y que el usuario pueda reproducirlos a voluntad utilizando el programa que utiliza cada navegador para ello. Cuando lo hayamos insertado nos encontraremos con los siguientes iconos en las últimas versiones de los navegadores:

El primero en Explorer y el segundo en Navigator. él tamaño de los iconos se puede hacer más grande o más pequeño como cualquier imagen. En Explorer se oirá el sonido al cargar la página una sola vez y si se quiere volver a escuchar hay que pulsar en el triángulo que aparece en la parte inferior izquierda. En Navigator no se oye el sonido al cargar la página sólo cuando se hace doble click sobre el icono del altavoz. El proceso para incrustar el sonido es el siguiente: En la página donde queremos insertar el sonido, colocamos el cursor donde queremos que nos cree el icono de reproducción del sonido (o vídeo) y vamos a Insertar / Avanzadas / Complemento y nos aparece la siguiente ventana:



En origen de datos ponemos la dirección del archivo de sonido o vídeo o en examinar seleccionamos el archivo. Les recuerdo que si el archivo está fuera de la web que estamos

creando y lo tenemos que buscar en otro directorio tenemos que pulsa el icono para navegar por nuestro ordenador. En el cuadro de "mensaje para exploradores que no admiten complementos" hay que escribir el mensaje que queremos que aparezca. Por ejemplo: "Lo siento, pero su navegador no parece disponer de soporte para vídeo o sonido". Las siguientes opciones afectan a cómo aparecerá el icono de vídeo o sonido. Normalmente para vídeo el tamaño de 128 x 128 es suficiente. Una vez puestas las opciones que queremos, aceptamos la ventana y en Frontpage nos aparece el siguiente icono en modo normal:

Cuando guardemos la página en modo vista previa o en cada navegador podremos ver alguno de los iconos del principio de esta página.

?? Configurar un sonido de fondo para usuarios de Internet Explorer y Netscape Navigator: Reproduce un sonido cuando se carga la página.

Se procede como en el punto anterior de incrustar un sonido de fondo hasta que nos aparece la ventana siguiente donde hemos seleccionado el archivo de s onido (esto no vale para los vídeos):



Si hemos puesto algún mensaje para los exploradores que no admiten complementos lo borramos.

?? En el tamaño ponemos 1 x 1. ?? Marcamos la casilla de "Ocultar complementos" ?? Aceptamos la ventana y el icono se nos ha hecho muy pequeño. A partir de este

momento tenemos que recurrir al código html para completar la operación ya que la ventana anterior no nos da más posibilidades.

Damos a la pestaña de HTML y tenemos que buscar un código similar al siguiente:

<embed width="1" height="1" src="nombrearchivo.wav" hidden> Antes de la palabra hidden tenemos que teclear autostart="true" dejando un espacio antes y después. El código nos quedaría de la siguiente forma:

<embed width="1" height="1" src="nombrearchivo.wav" autostart="true" hidden>

Seleccionamos la pestaña de vista Normal y guardamos el archivo. Para ver un ejemplo de este ejercicio lo podemos ver pulsando el siguiente icono: (Si Netscape no está configurado para escucharlo no se oirá). Si alguien tiene un navegador que no dispone de soporte para complementos, el sonido de fondo no se reproducirá, pero la página funcionará correctamente, aunque de forma silenciosa, y los usuarios nunca lo sabrán.

?? Configurar un sonido de fondo únicamente para usuarios de Internet Explorer.

Como Frontpage e Internet Explorer son de Microsoft, esta es la forma más sencilla de poner un sonido de fondo a la página. El único problema es que no se oye con Netscape Navigator. Pero tampoco pasa nada porque la página funciona normalmente, pero en silencio. Para insertar un sonido de fondo, sobre la página que nos interesa pulsamos con botón derecho y nos vamos a propiedades de página. Nos aparece la siguiente ventana en la pestaña General:



En sonido de fondo seleccionamos el archivo de sonido que nos interesa que suene de fondo. Si mantenemos seleccionado "siempre", sonará todo el rato. Si lo deseleccionamos se nos pone activo el "bucle". Cada bucle es las veces que queramos que se repita el archivo. Así, por ejemplo, si ponemos 3, el archivo se repetirá tres veces. Aunque aquí no estamos tratando sobre diseño de páginas, ojo con la utilización de los sonidos. Sobre todo si se repiten mucho o están de fondo de piñon fijo. Pueden aburrir a las ovejas mejor entrenadas.

?? Crear un enlace a un archivo de sonido, de forma que el usuario lo descarga y posteriormente un programa en el ordenador del usuario lo reproduce.

Esta es la técnica más antigua en Internet de escuchar sonidos. Se realizaba de este modo hasta la aparición de los complementos y el streaming de audio. Cuando el usuario hace click en un enlace a un archivo de sonido, el archivo se descarga en el ordenador del usuario. Después el usuario puede reproducir el sonido utilizando la aplicación apropiada. Por ejemplo si se trata de un archivo .wav, se puede reproducir empleando el Reproductor de Medios de Windows. Utilizar esta opción es bueno, especialmente cuando el archivo de sonido es grande. De esta forma no se fuerza al usuario a aceptar un archivo que puede paralizarle el sistema. O también es apropiada para los amantes de navegadores antiguos que funcionan sólo en modo texto. Para enlazar un archivo se hace igual que con cualquier otro enlace. Como los archivos de sonido pueden ser muy grandes, es habitual y cortés, indicar el tamaño del archivo junto al enlace. Si quieres ver el funcionamiento de esto prueba con el siguiente ejemplo. Se trata de un archivo de sonido muy pequeño, que es el que estoy utilizando en todos los ejemplos: Enlace a archivo de sonido "aplauso" (28 kbs). Al ser tan pequeño el archivo apenas se nota la descarga y verás que directamente abre la aplicación de tu ordenador que hace posible escuchar el sonido. Esto funciona con todos los navegadores.

frontpage 2000 · 2009. 12. 20. · capitulo vii: los hipervinculos.....12 capitulo viii: los...

Documents