Taller de elaboracion de paginas web resumen front page

TALLER DE ELABORACION DE PAGINAS WEB con front page
Objetivos:
Crear paginas web con el programa Frontpage utilizando elementos de diseño básicos y
avanzados.
Aplicar los elementos de diseño al proyecto que esta desarrollando para la clase.
Bajar de internet imágenes, sonidos, videos para insertar en las paginas de su poryecto
Elementos basicos:
1. Comentarios: sirven para proporcionar información (Insertar, comentario)
2. Contadores de visitas: indica el numero de visitantes a la pagian (Insertar,
componetne,contador de visitas a la pagina)
3. Fecha y hora: actualiza la informacion (Insertar, fecha y hora)
4. Marquesina desplazandose: texto que fluye a lo ancho de la pagina, puede ser una
animacion realizada en flash o un gif animado.(Insertar, componente, marquesina)
5. Botones activables: son imágenes que representan acciones determinadas, pueden
tener efectos cuando se posa con el mouse, cambiando de imagen por ejemplo
(insertar componente boton).
6. Hipervinculos: (Insertar hipervinculo): se crean para texto, imágenes, botones. Se
puede hacer tres tipos de vinculos
• Enlace con otra parte dentro de la misma pagina usando marcadores(Insertar
marcadores)
• Enlace interno: A otra pagina en mi sitio web
• Enlace externo: A una pagian en un sitio de la WWW
• Enlace a correo
• Enlace a una pagina nueva
Elementos avanzados:
1. Los marcos o frame: tienen por objeto dividir la pantalla en ventanas individuales
y cada una ser una pagina independiente. Se usan para : Indices, Barra de
botones, Anuncios publicitarios, derechos de autor, nostas al pie.
• Creacion de paginas con marcos: Archivo nuevo, del asistente seleccionar
paginas con marco que mas le convenga de las opcines presentadas y aceptar.
Para editar un marco:
Cambiar tamaño: hacer clic en los bordes y arrastar
Dividir marco: en marco, opcion dividir marco en filas o columnas
Eliminar: seleccionar la seccion a borrar y en marco opcion eliminar marco
• Asociar una pagina inicial a un marco
Fanny Lopez V.
Docente de Informatica Aplicada - Nucleo Comun
Facultad de Ciencias de la Educación Universidad Libre

• Hacer clic en el marco con el que se quiere trabajar.
• Hacer clic en el boton Establecer pagina inical, aparenciendo el cuadro crear
hipervinculo
• Se puede asociar a una pagina guardada en disco duro o a una direccion URL
o a una pagina nueva
• Guardar un conjunto de marcos: un conjunto de marcos esta constituido por
varias paginas: la de marcos, que mantiene las instrucciones sobre como debe
aparecer y actuar el conjunto de marcos y las paginas iniciales para cada marco
del conjunto de marcos. Cuando se guarda se debe guardar todas las paginas.
• Modificar las propiedades de los marcos: al hacer clac sobre un marco presenta el
cuadro de dialogo de las porpiedades de ese marco, donde puede cambiar el
titulo, el vinculo, el tamaño del marco, ver o no barras de desplazamiento, entre
otras. En la opcion de paginas de marco se puede desactivar los bordes de los
marcos en la ficha marcos en la cual se activa la casilla ver marcos
2. Creacion de mapas de imágenes: es una imagen dividida que tiene enlaces
• Insertar imagen
• Definir partes que seran las activas
• Clic sobre la imagen para activar barra de herramientas de las propiedades de la
imagen, de alli se usaran tres botones: crear zona rectangular, circular o forma
irregular. Seleccionar una de ellas y sobre la imagen se arrastra el mouse para
marcar cual es la zona activa, cuando libera el boton aparece un cuadro de
dialogo para crear el hipervinculo. (Nota hacer zona amplias)
3. Elementos multimedia
• Sonido o musica: (Insertar, Avanzado, complemento) hay tres metodos para
incluir sonidos:
- Establecer sonido como fondo, se reproduce automaticamente
cuando la pagina se carga (Archivo, propiedades, general)
- Crear un enlace a un archivo de sonido de forma que el usuario
lo descargue y luego lo reproduzca en su equipo
- Inscrustar controles tipo VCR que el usuario ejecuta a voluntad
• Video: (Insertar, Avanzado, componente web) (inserta ,imagen, elemento flash, o
video) archivos recomendados para video son: avi, wav, midi. Se pueden colocar
de dos fomas:
- Inscrustar el video de forma que aparezca en la pagina como el
mismo modo de una imagen.
- Crear un enlace a un archivo de video para ser descargado por el
usuario y luego reproducido en su equipo.
4. Efectos a texto e imágenes: (Formato, DHTML dinamico)
• A texto: seleccionar el texto a animar y en la barra de efectos DHTML se peude
escoger 4 alternativas:
- clic: animacion funciona cualdo se hace clic en el texto
- doble clic: la animacion ocurre al hacer doble clic
- pasar el mouse la animacion ocurre al pasar el mouse
Fanny Lopez V.

- cargar la pagina, la animacion se activa cuando se abre la pagina
• A imágenes: seleccionar imagen a animar y en la barra de efectos DHTML se
tiene las mismas alternativas anteriores para obtene intercambi de imágenes.
• Transicion entre paginas(Formato, transicion de la pagina)
5. Galeria de fotos: insetar componente avanzado galery verificar menu
http://fresno.cnice.mecd.es/~avaler3/index2.htm
Publicar en red
9.1 Incluir la declaración del tipo de documento
9.2 Conocer las etiquetas <meta>, que informan a los buscadores
9.3 Aprender a transferir los archivos a un servidor
9.1 Declaración del tipo de documento
Antes de dar por terminado un documento para publicarlo en Internet, tenemos que
declarar qué tipo de documento es con el fin de que los navegadores sepan en qué
versión de HTML está escrito; de este modo, podemos estar más seguros de que el
navegador que utilice el usuario le ofrecerá con fidelidad la página que hemos creado de
la forma más parecida a como lo hemos hecho. Con la declaración del tipo de documento
también contribuimos a la normalización de los lenguajes utilizados en la Red,
organizando mejor de esta manera todo el flujo de millones de páginas que circulan por el
ciberespacio. De este ordenamiento se ocupa un grupo de expertos reunidos entorno al
World Wide Web Consortium (http://www.w3.org/), que publican distintas versiones
de todos los lenguajes y códigos de Internet, y ofrecen pautas con el fin de unificar y
normalizar las herramientas utilizadas en la Red.
Existen varios tipos de declaraciones del tipo de documentos (DOCTYPE). Para este
curso sólo nos interesa uno de ellos, el que declara la última versión de HTML, la 4.01.
El texto de la declaración hay que colocarlo al principio del documento, antes de la
etiqueta <html>:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
Lo importante de esta declaración es la definición del tipo de documento (DTD) que se
encuentra en la dirección del World Wide Web Consortium que consta en la declaración.
Existen tres versiones de esta definición: Strict, Transitional y Frameset. Las dos
primeras varían poco, pero la Transitional es menos estricta, con lo cual los navegadores
antiguos tienen menos problemas. La última es la que hay que utilizar cuando la página
ha sido creada con marcos o frames. Así, el documento principal de este curso y el de la
página con marcos del Monstruo tienen la siguiente declaración:
Fanny Lopez V.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
Para que esta declaración sea efectiva, el documento creado no tiene que tener errores de
lenguaje HTML, por eso hay que validar el documento, es decir, confirmar que está
bien escrito siguiendo las directrices del tipo de documento. Algunos programas de
edición de páginas web incorporan un instrumento para ello, como el excelente editor
gratuito HTML-Kit, pero lo mejor sigue siendo acudir a la página web del World Wide
Web Consortium, que tiene una página donde se pueden validar los documentos HTML:
The W3C MarkUp Validation Service: http://validator.w3.org/
Los archivos que se tendrían que validar serían todos los que contienen lenguaje HTML y
también los que contienen hojas de estilos (CSS).
9.2 Etiquetas que informan a los buscadores
Para terminar este curso debemos conocer el mecanismo para informar a los buscadores
de que nuestra página existe y de sus contenidos. Los buscadores son potentes servidores
que rastrean la Red para registrar las páginas web existentes. Si hemos terminado una
página web, tenemos que transferir los archivos a un servidor donde alojarla, pero antes
de eso hay que colocar unas etiquetas en el documento principal de nuestra página web
para informar a dichos buscadores. Posteriormente, cuando un usuario acuda a un
buscador y busque, por ejemplo, la palabra "Monstruo" o la expresión "Página web del
Monstruo", obtendrá una multitud de entradas, entre ellas probablemente la de la página
del Monstruo, y podrá ir a visitarla sin necesidad de saber previamente su dirección de
Internet.
Esta información se ofrece mediante las etiquetas <meta>, que se colocan en la cabecera
de la página principal de un sitio web, es decir, en el archivo que suele llamarse
index.htm. En nuestro caso, esa información la hemos colocado en la cabecera del
archivo index2.htm de los ejemplos. Veamos qué dicen esas misteriosas etiquetas:
• <meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">
• <meta name="description" content="Página personal del
Monstruo, creada para alivio de sus penas">
• <meta name="keywords" content="monstruos, miedo,
horror">
• <meta name="GENERATOR" content="Microsoft FrontPage
Express 2.0">
La primera y la cuarta etiquetas <meta> han sido insertadas automáticamente por el
programa. En la primera se informa del tipo de caracteres utilizado; en este caso,
caracteres occidentales. En la cuarta etiqueta aparece el nombre del programa utilizado
para crear la página web, que no es obligatorio declarar.
La segunda y la tercera etiqueta, en cambio, tiene que introducirlas, si lo desea, el creador
de la página para informar a los buscadores del tipo de contenido que hay en esa página
Fanny Lopez V.

web. La segunda etiqueta es una descripción (description), general y concisa, de la
página, y en la tercera ofrecemos palabras clave (keywords) del contenido, separadas por
comas.
Desde FrontPage Express se puede realizar la redacción de estas etiquetas abriendo el
menú Archivo, eligiendo Propiedades de página y pulsando en la pestaña Personalizar.
En la sección Variables de usuario podemos escribir estos datos si pulsamos el botón
Agregar. En el cuadro de texto Nombre escribimos la palabra "description" y en el
cuadro de texto Valor escribimos la descripción. Y Después hacemos lo mismo con la
palabra "keywords", como se ve en esta imagen:
9.3 Transferir los archivos al servidor
Una vez que tengamos acabada nuestra página web y dispongamos
de una cuenta en un servidor, podemos transferir los archivos al
ordenador del servidor. Windows dispone de un programa llamado
Asistente para la publicación en web que resulta fácil de utilizar
porque está compuesto de ventanas que van recabando la información
necesaria que el usuario sólo tiene que teclear. Con los datos que le
ofrecemos, el asistente se conecta con el servidor y transfiere los
archivos al lugar que le hemos indicado. A este asistente se accede al
pulsar el botón de Inicio del escritorio de Windows por la siguiente
ruta:
InicioProgramasAccesoriosHerramientas de Internet
Pero existe un programa gratuito muy utilizado para transferir
archivos a un servidor: WS_FTP. Cuando lo abrimos tenemos que
pulsar el botón Connect, que está en la parte inferior izquierda de la
ventana. Entonces aparece la siguiente ventana:
Lo primero que hay que hacer es pulsar el botón New para configurar una nueva
conexión. Los cuadros de texto hay que rellenarlos de la siguiente manera:
• En el cuadro de texto Profile name escribimos el nombre que queramos para
identificar nuestra conexión.
• En el de Host Name/Address escribimos la dirección del servidor que va a alojar
nuestra página.
• En Host Type se deja el texto que aparece predeterminado: "Automatic detect".
• En User ID hay que escribir el nombre de usuario.
• Y en Password, la contraseña.
Después, se pulsa el botón Aceptar y desaparece esa ventana para dejar a la vista la
ventana posterior, que es desde donde vamos a efectuar la transferencia de ficheros. En la
parte izquierda está la sección Local System, que es una lista de archivos de nuestro
disco duro en la que vamos a buscar la carpeta donde está nuestra página. La ruta aparece
Fanny Lopez V.

en el cuadro de texto de la lista desplegable que hay en la parte superior. Cuando
tengamos a la vista nuestros archivos, los marcamos con un clic del ratón mientras
mantenemos apretada la tecla de mayúsculas. A continuación los transferimos al servidor
apretando el botón que tiene la flecha dirigida hacia la derecha (->) y que está situado en
el panel central, entre las dos ventanas. Si queremos borrar algún archivo, pulsamos el
botón Delete después de destacarlo con un clic del ratón, y si queremos cambiarle el
nombre, pulsamos el botón Rename.
La sección derecha de la ventana presenta la ubicación de los archivos transferidos en el
servidor remoto, el ordenador donde se va a alojar nuestra página. Antes de transferir los
archivos quizá haya que crear una nueva carpeta, según las condiciones que imponga
cada servidor. Desde esta sección también se pueden copiar los archivos a nuestro disco
duro, borrarlos y cambiar sus nombres.
Cuando hayamos terminado de transferir los archivos ya tendremos nuestra página en
Internet. Y nuestro Monstruo podrá así aliviar sus penas, porque la comunicación lo
libera un poco de su oscuro destino.
JavaScript
Los objetivos de la octava lección son:
8.1 Conocer el funcionamiento básico de JavaScript
8.2 Actividad nº 8: Ejemplos de scripts:
8.2.1 Ventana de alerta en JavaScript
8.2.2 Menú desplegable
8.2.3 El rollover
8.1 Funcionamiento básico de JavaScript
JavaScript es el hermano menor del lenguaje Java. Se utiliza mucho en la creación de
páginas web para conseguir que éstas sean más dinámicas. JavaScript está basado en
scripts que se introducen en las etiquetas de una página web para producir los
comportamientos que desea su creador. No hay que saber programar con este lenguaje
para poder utilizar de forma gratuita los muchos scripts que se encuentran en páginas de
Internet. Sólo hay que saber dónde ponerlos dentro del código fuente del documento. Las
posibilidades que tiene el lenguaje JavaScript son amplísimas y se utilizan mucho en la
Red.
A veces estos scripts se encuentran en un archivo externo con extensión JS (de
JavaScript), y entonces hay que escribir una llamada en la cabecera del documento donde
queremos que funcione:
<SCRIPT SRC="buscadores"></SCRIPT>
Pero en esta lección vamos a comentar varios scripts de JavaScript que se encuentran
incrustados en el mismo documento. El primero de ellos se utiliza mucho en páginas web
y consiste en abrir una ventana de un tamaño y características concretas al pulsar un
Fanny Lopez V.

botón. Parte del código tiene que estar en la cabecera del documento, delimitado por las
etiquetas <head> de cierre y de apertura:
<SCRIPT LANGUAGE="JavaScript">

</SCRIPT>
Con la primera expresión indicamos que el lenguaje de scripts utilizado es JavaScript.
Después se introduce una función que llamamos abre_ventana y que consiste en abrir
(open) una ventana de un tamaño determinado (500 píxeles de ancho por 400 de alto)
que, además, tendrá disponibles las barras de desplazamiento (scrollbars=yes). Esa
función tendrá efecto cuando el usuario pulse el botón que se ha introducido en otra parte
del documento. Dentro de la etiqueta del botón tiene que haber, por tanto, una llamada a
esa función, lo que se consigue de esta manera:
<input type="button" name="ventana" value="Página del
Monstruo" onClick="abre_ventana()">
Al pulsar el botón (evento onClick), llamamos a la función abre_ventana definida en la
cabecera del documento. Veamos el botón:
8.2 Actividad nº8: Ejemplos de scripts
8.2.1 Ventana de alerta
Vamos a realizar ahora una sencilla actividad que nos ilustra las posibilidades de
JavaScript en la creación de páginas web. Se trata de introducir un script en nuestro
documento para que aparezca una ventanita dando las gracias al usuario cuando pulse el
botón Enviar de la encuesta. El script lo incluimos dentro de la cabecera (<head>) del
archivo monstruo.htm para que el navegador lo lea nada más cargar el documento:
<script language="JavaScript">

</script>
Después, tenemos que introducir la llamada a la función "gracias" desde el formulario, es
decir, cuando el usuario pulsa el botón Enviar se origina el evento onSubmit, que hay
Fanny Lopez V.
Página del Monstruo

que incluir dentro de la etiqueta del formulario (<form>) y que consiste en que aparecerá
una ventana de aviso (alert) con una frase de agradecimiento:
<form action="mailto:avaler3@fresno.pntic.mec.es"
method="POST"
enctype="TEXT/PLAIN" name="Formulario" OnSubmit="gracias()">
Cuando el usuario rellene el formulario y pulse el botón Enviar, surgirá la siguiente
ventana:
8.2.2 Menú desplegable
Un script muy utilizado en Internet es el menú desplegable, que puede contener
opciones tales como las direcciones de las secciones más importantes de una página web
concreta o las direcciones de otras páginas de Internet. Se utiliza generalmente para
ahorrar espacio dentro de un documento y ofrecer al usuario una forma rápida de llegar a
algunos contenidos de un sitio. Un ejemplo podría ser el siguiente:
Vamos a crear un menú desplegable que contenga la dirección de nuestro archivo de
fotos y las tres direcciones de las páginas que hemos considerado como enlaces de
interés. El siguiente código, que corresponde al menú desplegable, lo podemos incluir en
cualquier parte de nuestro documento, es decir entre las etiquetas <body> de apertura y
cierre.
<form name="buscar">
<select name="lista" size="1">
<option value="colec2.htm">Mi colección de fotos</option>
<option value="http://alirburia.8m.com">Halloween.com</option>
<option value="http://www.halloween.com">Alirburia</option>
<option value="http://www.museoceramadrid.com">Museo de cera de
Madrid</option>
</select>
<input type="button" value="Vamos" onClick="busqueda()">
</form>
Dentro del código del botón hemos escrito, como se ve más arriba, la llamada a esta
función utilizando el evento onClick (onClick="busqueda()"), que ocurre cuando el
usuario hace un clic con el ratón sobre un objeto.
Y en la cabecera de la página (<head>) tenemos que colocar el siguiente script para que
funcione este menú desplegable al pulsar el botón Vamos:
<!--
function busqueda() {
location=document.buscar.lista.options[document.buscar.list
a.selectedIndex].value;
Fanny Lopez V.

}
//-->
</script>
Este menú también lo podemos crear con FrontPage Express tal y como lo hicimos en la
lección de los formularios. Esta vez hay que escribir la dirección de Internet en el campo
donde se tiene que especificar el valor:
El botón lo crearemos como hicimos en la lección de hipervínculos, pero ahora habrá que
introducirle el código de llamada a la función que está en la cabecera. Para ello hay que
pulsar el botón cuya etiqueta es Extendido...; entonces se abre la ventana de Atributos
extendidos y pulsamos el botón Agregar... para introducir en la ventana que aparece el
nombre del atributo (onClick) y el valor que tiene (busqueda()).
Sólo queda un pequeño detalle: nombrar el formulario para que el script funcione
adecuadamente. Introducimos el cursor del ratón dentro del triángulo de línea discontinua
que indica el formulario, pulsamos el botón derecho del ratón y elegimos las
Propiedades del formulario. En el campo Nombre del formulario escribimos lo
siguiente: "buscar", tal y como se muestra en esta imagen:
8.2.3 El rollover
Otro script que se utiliza constantemente en las páginas web es el llamado rollover, que
consiste en sustituir una imagen por otra cuando el usuario coloca el puntero del ratón
encima de la primera imagen que aparece en el documento, y se suele emplear como
hipervínculo. El código en sí es muy sencillo. En la cabecera del documento colocamos
las dos funciones que tenemos que utilizar:

</script>
La primera función sirve para cuando el puntero del ratón se encuentra encima de la
imagen (en nuestro caso la función encima, que después incluiremos en el evento
onMouseOver), que hace que se vea la segunda imagen, y otra para cuando el ratón está
fuera de la imagen (fuera, incluida en el evento OnMouseOut), que hace que se vea la
primera imagen. En este caso se trata de un botón de color amarillo y de borde y texto
Fanny Lopez V.

rojos (primera imagen) cuyo color de fondo cambiará al verde cuando el usuario ponga el
ratón encima:
Además, este botón servirá de hipervínculo: cuando el usuario haga clic encima de él,
será conducido a otro documento; en nuestro caso, a la página del Monstruo. Para ello
habrá que colocar la imagen en cualquier parte de la página y hacer un doble clic sobre
ella para que se abra la ventana de Propiedades de imagen. A continuación escribiremos
la ruta del archivo que queremos que se abra al pulsar la imagen, y eso lo haremos en el
campo de texto llamado Ubicación. También tendremos que dar un nombre a la imagen
(no al archivo, que ya lo tiene) para que el script la identifique, y para ello pulsamos el
botón Extendido y agregamos name (tiene que estar en inglés) como nombre del atributo
y dibujo, por ejemplo, como su valor. Allí lo escribiremos todo sin las comillas.
Sólo queda por escribir las llamadas a las dos funciones desde el código del hipervínculo
de la imagen:
<a href="index.htm" onMouseOver="encima()" onMouseOut=
"fuera()">
<img src="imagenes/hola.gif" name="dibujo" border=0
width="89" height="34"></a>
Esto lo podremos hacer directamente sobre el código fuente o haciendo click sobre la
imagen y abriendo la ventana de Modificar hipervínculos. Una vez allí pulsamos el
botón Extendido... y agregamos los nombres de atributos y sus valores.
Fanny Lopez V.

Taller de elaboracion de paginas web resumen front page

Más contenido relacionado

La actualidad más candente

Destacado

Similar a Taller de elaboracion de paginas web resumen front page

Más de Fanny Lopez Valek

Taller de elaboracion de paginas web resumen front page