You are on page 1of 129

pgina, ve la misma pgina.

Por tanto, si queremos hacer algn cambio para que lo vea el usuario, hemos de
Internet donde se aloje.

Esto es ideal para una pgina web personal o de una pequea empresa, donde la web no es muy grande o no

variar una pgina cada da? Pongamos por caso una tienda de Internet. Una pgina esttica puede mostrar lo

pedidos, pero y s se acaban los artculos? y si cambian de precio? Lo mismo podemos decir para una web

empresa, o deseamos crear un foro de discusin donde los visitantes puedan dejar su opinin. El nmero de p

el trabajo y tiempo perdido en modificarlas cada vez que haya un cambio puede ser enorme. Por qu no deja
nosotros?

Por eso PHP y ASP mezclan programacin con HTML, pero el resultado final es siempre una pgina web. Am
trabajar con bases de datos y servidores web, son eficientes y nos ahorran mucho trabajo.
ASP es un lenguaje propiedad de Microsoft, mientras que PHP es un lenguaje de desarrollo libre.
Enlaces con cdigo gratuito.
Enlaces interesantes con cdigo Javascript gratuitos:
http://www.mundojavascript.com

http://www.elguruprogramador.com.ar/libre

http://www.losrecursosgratis.com/javascript/seccionjava/otros.html http://www.lawebdelprogramador.com/codi

Enlaces interesantes con Applets gratuitos:


http://www.coolfocus.com/

http://www.anfyteam.com/

http://javaboutique.internet.com/applets/ http://www.javashareware.com

Para practicar los distintos aspectos explicados en el tema puedes realizar el Ejercicio sobre programacin.

siguientes parmetros:
<applet code="CreditRoll.class" width="330" height="200">
<param name="BGCOLOR" value="0088ff">
<param name="FADEZONE" value="30">
<param name="FONTSIZE" value="25">
<param name="REPEAT" value="yes">
<param name="SPEED" value="100">
<param name="TEXT1" value="Hola, bienvenido ">
<param name="TEXT2" value="a mi pgina web personal. ">
<param name="TEXT3" value="Podr encontrar toda clase">
<param name="TEXT4" value="de informacin. Tan slo debe ">
<param name="TEXT5" value="pulsar en los enlaces ">
<param name="TEXTCOLOR" value="333333">
</applet>

Segn el autor, en los parmetros TEXT escribimos que queremos que salga en el cuadro. Lo hacemos perso
Veamos como queda:

JAVA. Errores comunes.

El error ms usual ocurre cuando el applet no encuentra el archivo de la clase (o clases) que necesita. Esto ha

vaco en la pgina. Podemos saber si esto ocurre pasando el ratn por el cuadro del applet. En la barra de est

as como Subprograma iniciado si lo encuentra y el applet funciona, y XXXX no encontrado si no funciona el a


clase que no logra cargar).

PHP y ASP. Qu son? Para qu sirven?

PHP y ASP son dos lenguajes de programacin que permiten generar HTML de forma dinmica. Es decir, con
que crean pginas web dinmicas.

La forma tradicional (como la que ensea este curso) consiste en crear pginas web estticas. Esto significa q

Origen del subprograma: Aqu podremos e


clase Java.

Direccin URL base del subprograma: Si e

que la pgina, debemos escribir aqu donde e


completa.

Mensajes para exploradores no compatible


soportan o no tienen instalado Java. Escriba

Diseo y Tamao: Escriba aqu los parme


alineacin y espaciado.

Parmetros de subprograma: Aqu tenemo

el applet necesita para funcionar. Para ello h

escribiendo los parmetros y sus valores uno

applet llamado CreditRoll.class con el parm


<applet code="CreditRoll.class" width="330"
<param name="BGCOLOR" value="0088ff">
</applet>

Unidad 15. Programacin Javascript, Java, PHP y ASP (V)

Para insertarlo seguimos los pasos ya explicados, y al puls


ventana:

En Nombre escribimos el nombre del parmetro (etiqueta n


value). Pulsamos en Aceptar.

As, iremos haciendo lo mismo con todos los parmetros q


Vamos a usar el applet para crear un cuadro con texto en movimiento, bastante atractivo. En la web del autor

JAVA. Adaptar el applet a la pgina.

Afortunadamente FrontPage nos permite incluir de forma automtica las etiquetas q

hacemos clic en Insertar - Componente Web - Controles avanzados - Subprograma

Aparecer la siguiente ventana, en la que tenemos que rellenar los parmetros que necesita el applet para func

var hr = dt.getHours();
usa esta variable, el navegador nos indica que no podemos usar dt ya que no est definida.

Si tenemos ms de un script, como en el ejemplo anterior, debemos asegurarnos de que los scripts usan varia
el navegador podra confundirse.
Utilizar la asignacin = en expresiones condicionales en lugar de la comparacin == es un error comn.
No cerrar una llave o un parntesis es otro error comn.
Debemos terminar cada lnea con punto y coma.
No podemos usar una variable si no la hemos inicializado antes.

Unidad 15. Programacin Javascript, Java, PHP y ASP (IV)


JAVA. Qu es? Para qu sirve?

Java es un lenguaje de programacin creado por Sun Microsystems. Es gratuito y podemos encontrarlo en la w

Todo applet debe ser incluido junto con los archivos .class que necesite en el mismo directorio. Si no, el apple
JAVA. Adaptar el applet a la pgina.

No obstante el navegador tambin nos avisar al mostrar el siguiente icono en la barra de estado (pulsando dos
anterior si no se ha abierto).
Podemos ver la lnea donde el navegador cree que se encuentra el error y la posible causa. Esto nos orientar

algunos fallos al escribir un programa desencadenan errores en otras partes del programa, y esto confunde al n

El cmo nos informe el navegador depende de qu navegador estemos usando y de cmo est configurado. Po

Herramientas - Opciones de internet... en la pestaa Opciones avanzadas existe una opcin que podemos marc

notificacin sobre cada error de secuencia de comandos para que nos aparezca un aviso como vemos en la im
queremos que nos notifique nada.
En este caso, hemos borrado la lnea:
var dt = new Date();
del cdigo de nuestra pgina de pruebas. Esta lnea define una variable llamada dt. Como la siguiente lnea:

var msg = ((hr<12) ? "Buenos dias" :"Buenas Noches");


msg = ((hr>11)&&(hr<19) ? "Buenas Tardes" : msg);
msg=" <H2> "+msg+" !</H2>";
document.write(msg);
</script>
<p>Bienvenido a mi web personal.</p>
<form name="search" onSubmit="return findInPage(this.string.value);">
<font size="2"><p></font><font size="3">
<input name="string" type="text" size="15" onChange="n = 0;"></font>
<input type="submit" value="Buscar"></p>
</form>

</BODY>
</HTML>

Unidad 15. Programacin Javascript, Java, PHP y ASP (III)


Javascript. Errores comunes.

A veces nos equivocaremos al escribir un cdigo en nuestra pgina y no funcionar. Lo primero que debemos h

nuestra web es leer muy bien las instrucciones que el autor del script nos proporcione, y que nos evitar ms de

Cuando existe un error, el navegador puede informa sobre el error o puede dejar de ejecutar el cdigo asocia

if (n == 0)
alert("Not found.");
}
if (IE4) {
txt = win.document.body.createTextRange();
for (i = 0; i <= n && (found = txt.findText(str)) != false; i++) {
txt.moveStart("character", 1);
txt.moveEnd("textedit");
}
if (found) {
txt.moveStart("character", -1);
txt.findText(str);
txt.select();
txt.scrollIntoView();
n++;
}
else {
if (n > 0) {
n = 0;
findInPage(str);
}
else
alert("Not found.");
}
}
return false;
}
</script>

</HEAD>
<BODY>
<script LANGUAGE="JavaScript">
var dt = new Date();
var hr = dt.getHours();

</HTML>

Unidad 15. Programacin Javascript, Java, PHP y ASP (II)

Vamos a hacer lo mismo con un cdigo Javascript en dos partes. El cdigo nos permite crear una cajita de b

pgina. El cdigo es bastante ms extenso que el anterior. Se ha coloreado en verde la parte que, segn la we
parte que va en el <BODY>.
<HTML>
<HEAD><TITLE>Esto es el titulo</TITLE>
<script language="JavaScript">
var NS4 = (document.layers);
var IE4 = (document.all);
var win = window; // Con frames usar top.nombre.window;
var n = 0;
function findInPage(str) {
var txt, i, found;
if (str == "")
return false;
if (NS4) {
if (!win.find(str))
while(win.find(str, false, true))
n++;
else
n++;

Las primeras son puro cdigo, mientras que las segundas especifican a qu se aplica el cdigo de las primeras

coloquemos el cdigo que va entre las <HEAD> siempre que est all. En cambio, el cdigo que va entre las <B

uno nuevo) y hemos de colocar el cdigo justo donde lo necesitemos. Todo esto suele ir explicado en la pgina

Tomemos por ejemplo el siguiente cdigo de una pgina web personal (a la izquierda). Vamos a insertar un cd

a nuestros visitantes, variando el texto segn la hora del da. En la web se nos pide que insertemos el cdigo en
<HTML>
<HEAD><TITLE>Esto es el titulo</TITLE></HEAD>
<BODY>
<p>Bienvenido a mi web personal.</p>
</BODY>
</HTML>

<script LANGUAGE="JavaScript">
var dt = new Date();
var hr = dt.getHours();

var msg = ((hr<12) ? "Buenos dias" :"Buenas

msg = ((hr>11)&&(hr<19) ? "Buenas Tardes"


msg=" <H2> "+msg+" !</H2>";
document.write(msg);
</script>

La forma correcta de insertar el cdigo (siempre desde la vista HTML) es la siguiente:


<HTML>
<HEAD><TITLE>Esto es el titulo</TITLE></HEAD>
<BODY>

<script LANGUAGE="JavaScript">
var dt = new Date();
var hr = dt.getHours();
var msg = ((hr<12) ? "Buenos dias" :"Buenas Noches");
msg = ((hr>11)&&(hr<19) ? "Buenas Tardes" : msg);
msg=" <H2> "+msg+" !</H2>";
document.write(msg);
</script>

</SCRIPT>

Esto es una cabecera

</BODY>
</HTML>

Pero lo que da sentido a un script es la posibilidad de asociarlo a un evento. Un evento se da cuando se abre u
usuario pulsa un botn, etc. Es un mensaje que el sistema operativo le pasa al navegador, informandole que el

Vamos a ver un ejemplo sencillo: al pulsar en un botn, se abre una ventana. Para ello nos aprovecharemos de

proporciona Javascript: el objeto window, que representa la ventana del navegador, y la funcin window.open(),
<HTML>
<HEAD><TITLE>Esto es el titulo</TITLE></HEAD>
<BODY>
<TABLE>
<tr>
<td width="85%" align="center">
<input type="button" value=" Ver ejemplo " name="B9" style="font-family: arial"
onClick =

"window.open('pagina_pruebas.htm','ayuda','resizable=yes,scrollbars=yes,menubar=yes,width=300,height=250'
</TABLE>
</BODY>
</HTML>
Este script muestra un botn. Al hacer clic en l, muestra otra pgina en otra ventana aparte. El script ya viene

implementado en el navegador, y se asocia al botn con onClick(). window.open abre una nueva ventana, y pas
como parmetros al navegador varios valores que configurarn la ventana (resizable: que pueda cambiar de
tamao, width y height: el tamao (ancho, alto), etc).
Pulsa el botn y comprueba que funciona

Javascript. Adaptar el Javascript a la pgina.

Existen multitud de scripts en Javascript gratuitos disponibles en la red. Pero, cmo usarlos en nuestras pgin

Javascript se divide en dos partes: la que va entre las etiquetas <HEAD> y las que va entre las etiquetas <BOD

navegador.
Tras ello, saldremos del FTP pulsando en Exit.
Obtener una redireccin.

Si la direccin que te asignan es larga y complicada puedes utilizar una ms corta mediante una redireccin. Ha
como www.redireccion.com o www.dot.tk.

Estos sitios nos dejan usar un subdominio a cambio de insertar publicidad en nuestra pgina. Gracias a ello, nu

www.empresa.tk en vez de una direccin larga y que es difcil de recordar, como son las que nos suelen propor

Unidad 15. Programacin Javascript, Java, PHP y ASP (I)


Vamos a ver cmo se pueden incluir programas en nuestras pginas web. Aunque el objetivo de este curso no

posibilidades tiene el usuario para programar sus propias pginas web y de incluir alguno de los programas disp
Javascript. Qu es? Para qu sirve?

Javascript es un lenguaje de programacin creado en sus orgenes por Netscape para ampliar las posibilidades

pequeos programas que se ejecutan en el ordenador del usuario, permitiendo cierta interactividad entre el usu

tenemos un formulario que el cliente ha de rellenar, podemos desarrollar un Javascript que se encargue de veri
de avisar al cliente si falla alguno, antes de enviar el formulario.

As ahorramos trfico innecesario de pginas web. Javascript debe ser soportado por el navegador. Debido a q

que nuestro navegador o el del usuario no soporte la versin de Javascript que usemos. En ese caso, el cdigo
Javascript. Mini-manual.

Los scripts de Javascript son insertados en la pgina web de la misma forma que escribimos cdigo HTML, por

editor de textos o desde la vista HTML de FrontPage. Debemos indicarle al navegador dnde se encuentra el sc
</SCRIPT>. Veamos un ejemplo:
<HTML>

Primero le indicamos al navegador que el lenguaje del s

<HEAD><TITLE>Esto es el titulo</TITLE></HEAD>

(existen otros lenguajes de script menos populares). Pa


LANGUAJE.

<BODY>
<SCRIPT LANGUAJE="Javascript">
document.write("<H1>Esto es una cabecera.</H1>");

Despus escribimos el cdigo (en rojo) dentro de las et


Este script muestra por pantalla un texto de cabecera:

Normalmente, en la barra de estado aparece qu archivo se est subiendo, a qu velocidad, etc.


Tras la carga de los archivos, aparecern en la carpeta del servidor:

Si queremos borrar un archivo del servidor, hacemos clic en l y pulsamos en el botn Delete que hay a la dere

Estos botones nos permiten realizar operaciones sobre los archivos y carpetas. Los de la derecha afectan al se
ordenador. Los ms importante son:
Mkdir: crea un directorio.
Rename: cambia el nombre de un archivo.
Delete: borra un archivo.

Cuando hayamos subido todos los archivos que necesitemos, lo ms recomendable es asegurarse de que todo

sar un programa FTP para subir la pgina. (


Continuacin. )

Al conectar, nos aparece a la derecha la carpeta del servidor con los archivos que se encuentran en ella. A la iz
disco duro.
Si algo no va bien, en la parte de abajo se nos informar de ello (barra de estado).
Para subir informacin debemos pulsar en los archivos que queremos poner en el servidor y pulsar en la tecla
apaga.bat y libera.vbe al servidor, las seleccionamos y pulsamos en la flecha.
Tambin podemos arrastrar y soltar con el ratn.

En Profile Name escribiremos un nombre que describa a qu servidor vamos a acceder. Si tenemos varios, pod
Con New y Delete creamos nuevos accesos o los borramos.

Tenemos que colocar en HOST la direccin host que nos di el servidor, en user ID el nombre de usuario y en P
servidor.

Debemos asegurarnos de deseleccionar el campo Anonymus, ya que este se usa para acceder a un servidor de
El resto de parmetros no se suelen tocar. Podemos seleccionar Save Pwd para que nos guarde la contrasea

Finalmente pulsamos en Aceptar. En la siguiente pantalla pulsamos en Connect para que se conecte, si no lo e

http://members.es.tripod.de/tunombre/tupagina.htm

Pero para ello, has de poner tus archivos en el ordenador que hace de servidor, ya sea de pago o gratuito. Se s

Internet. Para ello podemos usar un programa especializado o subir los archivos desde las pginas web del ser

pero normalmente tenemos que subir los archivos de uno en uno. Si tenemos muchos archivos, es conveniente

mandar archivos llamado FTP. Vamos a usar uno en el siguiente ejemplo para subir una hipottica pgina a Inte
Usar el WS_FTP LE.

Una vez hayas elegido el sitio web que hospedar tus pginas debes seguir las instrucciones que te darn para

Normalmente se hace mediante un programa de transferencia por FTP. El servidor nos proporcionar unos dato
password y la direccin del host donde se conectar el FTP. Quiz nos d otros como las DSN.

Hemos elegido el Ws_ftp LE porque es un programa muy fiable y extendido. Es un programa que podemos baja

podemos registrarnos para poder bajar actualizaciones del programa y servicio tcnico. La versin con la que v

actualmente est por la versin 8.02 que es Shareware (versin de pago con prueba de 30 das). Se puede enc
del programa http://www.ipswitch.com/.

Vamos a suponer que tenemos registrado un espacio web en el servidor de ONO, que es un servidor gratuito (n
datos que se nos han dado al registrarnos son:
nombre de usuario (ID): usuario_aulaclic
password (contrasea): ejemplo
direccin de la web: http://webs.ono.com/usuario_aulaclic
Para usar el FTP:
Host:

webs.ono.com

Usuario:

usuario_aulaclic

Contrasea:

ejemplo

Vamos a conectarnos al servidor y a subir varios archivos. Al abrir WS_FTP aparece la siguiente pantalla:

los pasos que te vamos a indicar, sin gastarte un duro. As de sencillo.


Para que tu pgina se vea desde Internet simplemente tiene que estar almacenada en un servidor de Internet.

Cualquiera puede tener un servidor de Internet, slo hace falta un ordenador, una direccin IP fija (nmero de 1

identifican al ordenador dentro de internet), una conexin telefnica y un software adecuado, como el servidor A

explica el gran crecimiento inicial de Internet. Han surgido miles de servidores que comparten su informacin po
Y muchos ms que esperan hacer negocio en la red.

De todas formas, crear un servidor es bastante ms complicado de lo que vemos en este curso. Sin embargo h

en Internet: basta utilizar los servicios gratuitos que ofrecen algunos servidores comerciales, a cambio de un po
a indicar cmo puedes hacerlo en Espaa, aunque en los dems pases es muy similar.
Obtener espacio gratuito. Hay dos alternativas.

1. Inscribirse en un sitio especializado en ofrecer espacio gratuito como Lycos-Tripod, Geocities-yahoo, iespaa
2. Utilizar el espacio gratuito que suelen ofrecer los proveedores de Internet como Tiscali, Ya.com, Terra, Ono,

Obtener espacio de pago. A cambio de una cuota mensual o anual podemos tener un espacio en un servidor

gratuito son: no hay publicidad, la calidad (velocidad y espacio del que disponemos) suele ser ms alta. Adem

(direccin en Internet asociada a un nombre) para que la gente acceda fcilmente a nuestra pgina. Esto es pa
empresa.

Los servidores de pago son muchos y variados. Los mismos servidores gratuitos nos ofrecen servicios extra po
amen de eliminar la publicidad.

Usar un programa FTP para subir la pgina.


Colocar tus pginas en internet.

A partir del momento en que transfieras tus ficheros ya podrs ver tus pginas en Internet tecleando la direccin

En esta figura, multitud de pginas cuelgan de la pgina principal. Adems, de cada una de ellas cuelgan ms.
signo +. Si queremos verlas, hacemos clic en l y aparecen. Para ocultarlas basta con pulsar el signo -.

Por otra parte, si la web es muy grande, quiz nos interese mover el esquema. Hemos de pulsar con el botn iz
soltar, arrastrar. El ratn se convertir en una manita.

Adems, podemos situar en el centro cualquier pgina que queramos pulsando sobre ella con el botn derecho
mismo efecto conseguimos si seleccionamos el archivo en el rbol de archivos que aparece a la izquierda.
Para disear una web que se adapte a la resolucin de la pantalla, debemos seguir este avanzado

Para practicar los distintos aspectos explicados en el tema puedes realizar el Ejercicio sobre mantenimiento.

Aqu puedes realizar un ejercicio paso a paso interactivo para practicar lo visto en la unidad.

Unidad 14. Publicar en Internet. (I)

Vamos a ver cmo tener nuestra propia pgina web en Internet. Veremos cmo subir la pgina a un servidor de

a Internet pueda verla. Es importante que al elegir un servidor, ya sea gratuito o de pago, nos aseguremos de q
Si no lo hace, podr seguir utilizando el servidor para alojar la web, pero algunas caractersticas avanzadas de

Publicar en Internet.

Una vez tenemos acabada nuestra pgina Web podemos publicarla en Internet y podr ser vista desde cualquie

Unidad 13. Mantenimiento y optimizacin de un sitio Web (VI)

Vista de hipervnculos.
La vista de Hipervnculos nos permite ver los hipervnculos entre las pginas del sitio. Veamos un ejemplo:

Podemos ver una pgina cuyo nombre de archivo es index.htm que tiene dos vnculos a las pginas pagina_pp
pgina pulsando dos veces sobre ella, as como borrarla, seleccionndola y pulsando la tecla Supr.

Por defecto, aparecen los nombres de los archivos, pero podemos hacer que aparezcan los ttulos de los archiv

haciendo clic en Mostrar ttulos de pgina. Los archivos que no tengan ttulo aparecern con sus nombres de ar

Como podemos tener varias barras de vnculos, lo primero es asegurarnos de que en Elegir existente est el n
cambiar.

En Vnculos debemos poner los vnculos que queramos que aparezcan en la barra. Con Agregar/Quitar podrem
poner vnculos externos si queremos, escribiendo la direccin de Internet de la pgina que queramos cargar.
Para cambiar un vnculo, pulsaremos en Modificar vnculo.
Para cambiar el orden de los vnculos, pulsamos en ellos y despus en Subir/Bajar.

- Finalmente podemos aadir un enlace fijo a la pgina principal y otra a la pgina principal de la actual (botone
Para crear la barra pulsamos en Aceptar.
Barra con los vnculos anterior y siguiente: Se trabaja con ella de manera similar a las anteriores.

Una vez tengamos la barra de vnculos en pantalla, podemos modificarla en cualquier momento pulsando dos v
manita con un documento).

Si elegimos mostrar las del Nivel primario, aparecern las siguientes


pginas:

Si elegimos mostrar la Atrs y adelante, se muestran con este criterio:

Si elegimos mostrar el Mismo nive

Si elegimos mostrar el Nivel secun

Si elegimos mostrar el nivel Global, se mostrarn las siguientes:

-Finalmente podemos aadir un en

pgina principal de la actual (en el

Barra con vnculos personalizados: Una vez elijamos esta opcin y pulsemos en siguiente, aparecen las mism

aparece la siguiente pantalla en la que tenemos que introducir manualmente qu pginas queremos que salgan

Unidad 13. Mantenimiento y optimizacin


optimizacin de un sitio Web (V)

En esta pantalla, vamos a elegir qu vnculos aparecern en los botones.

En una gran pgina web, encontraremos estructuras en rbol como la que vemos en la pantalla. Cada cuadrad
pginas especiales, como la pgina principal, que es la primera que se carga:

Respecto a una pgina cualquiera, las del mismo nivel son las que se encuentran en la misma fila. Las del nive

pgina principal. Las pginas atrs y delante son las pginas que hay a su izquierda y a su derecha respectiva
Veamos qu pginas se mostraran en los casos siguientes (pgina actual en rojo y las que aparecen en la bar
As, podemos elegir que la barra de vnculos muestre siempre las pginas del mismo nivel que la actual:

Si elegimos mostrar las del Nivel primario, aparecern las siguientes


pginas:

Si elegimos mostrar el Mismo nive

Ahora hemos de elegir la posicin donde se situar la barra de vnculos

Esta puede situarse en la parte superior o en la parte izquierda de la pantalla. Pulsamos en la que ms nos inte
superior.

Pulsamos en Finalizar y pasamos a la siguiente pantalla del asistente donde nos pedir definir ms Propiedade

men que nos lleva a las distintas partes de la web. Podemos hacerlo manualmente, pero FrontPage nos permi
organigrama que creemos en la barra de vnculos. Adems, podemos hacer que la barra se repita en todas las
ahorramos cierto trabajo al no tener que crearla manualmente.

Para insertar una tabla, primero nos tenemos que situar en el lugar de la pgina donde queremos que aparezca
Hacemos clic en el men Insertar - Componente Web - Barras de vnculos. Aparece la siguiente ventana:

Si hacemos clic en Barra con vnculos personalizados, crearemos la barra manualmente. Nosotros aadiremo

Si hacemos clic en Barra con los vnculos anterior y siguiente, crearemos un par de vnculos anterior y siguien
podemos aadir enlaces personalizados (como por ejemplo a la web principal).

Si hacemos clic en Barra basada en la estructura de exploracin, crearemos la barra a partir del organigrama.

Barra basada en la estructura de exploracin: Una vez elijamos esta opcin y pulsemos en siguiente, aparece
Esta es la pantalla de eleccin de estilo.

En ella elegimos la clase de botones que queremos para la barra de vnculos. Si estamos usando un tema, lo l
estilo del tema para no romper la esttica de la pgina. En ese caso pinchamos en el primer botn (el que est
buscamos el que ms nos guste, pinchamos en l y despus en Siguiente.

Para ampliar el organigrama, hemos de hac

sobre la figura de la casita y pulsar en Agreg


En la ventana que aparece,

elegimos la pgina que queremos aadir al

Supongamos que queremos

aadir la pgina "Acerca de". Su archivo es

pgina existente y, tras Aceptar,

aparece en el organigrama:

Como

podemos observar, aparece un signo - en la

contrae y aparece un +. Si queremos que la figura se expanda lo pulsamos. Si queremos aadir otra pgina, rep

que aadimos desde index.htm colgarn de ella. Para aadir pginas que cuelguen de otras, repetimos el proce
aadimos la pgina aficiones y la figura queda as:
Si la pgina tiene un ttulo, este aparece, sino aparece el nombre del archivo.

Cuando creemos una barra de vnculos (ms abajo), aparecer aqu, y pinchando y arrastrando podremos cam
etc.

Crear una barra de navegacin

Podemos aadir una barra de vnculos. Una barra de vnculos es un conjunto de vnculos que nos pueden se

Nombre de tarea: Aqu escribimos el nombre de la tarea.


Asociada a: Aqu escribiremos a quien le asignamos la tarea.
Prioridad: Aqu elegiremos la prioridad de la tarea (Alta, Medio o Baja).
Descripcin: En este campo podemos guardar una pequea descripcin de la tarea.

Tras rellenar los campos, hacemos clic en Aceptar para crear la tarea.

Para modificar la tarea pulsamos con el botn derecho sobre la tarea, y pulsam
Nos aparecer el cuadro de dilogo anterior y podremos modificarla.

Cuando una tarea se acabe, podemos pinchar en la opcin Marcar como completada del men contextual para
Si decidimos eliminar la tarea, debemos seleccionar la opcin Eliminar tarea.

Podemos asignar una tarea a un archivo. Para ello tenemos que, tras abrir un archivo en la vista Pgina, hace

Entonces pondremos un nombre para la tarea y en la ventana de tareas aparecer el archivo en el campo Asoc
tarea para abrir el archivo asociada a ella.

Unidad 13. Mantenimiento y optimizacin de un sitio Web (IV)


Vista de exploracin
La vista de Exploracin nos permite ver la estructura de la web y aadir una barra de vnculos.
La estructura se muestra en forma de organigrama. Inicialmente, slo aparece la pgina de inicio del sitio.

Naturalmente, si nunca hemos aadido una tarea, aparecer vaca. Cuando existen tareas, aparecen los sigui
Estado: Muestra el estado de la tarea. Esta puede estar No iniciada, Completada o en Curso.
Tarea: Muestra el nombre de la tarea.
Asignada a: Personas a las que asignamos una tarea. Se usa cuando trabajamos en grupo.
Prioridad: Muestra la prioridad de la tarea. Puede ser Alta, Media o Baja.
Asociada con: Podemos asociar un archivo con una tarea.
Fecha de modificacin: Muestra la fecha de la ltima modificacin del archivo.
Descripcin: En este campo podemos guardar una pequea descripcin de la tarea.

Para aadir tareas pulsamos con el botn derecho sobre cualquier parte en blanco de la pantalla de tareas. A
Pulsando en Agregar tarea, nos aparece el cuadro de dilogo Nueva tarea. En el podemos crear una tarea:

Despus de pulsar el botn Iniciar aparece la siguiente pantalla:

En este ejemplo, el sitio web tiene dos pginas, grupo.htm y servicios/servicios.htm.con enlaces rotos. Al analiz

un enlace invlido a una imagen y un enlace roto a noticias.htm, que es una pgina inexistente o que no est do

Podemos cambiar el enlace directamente si pulsamos dos veces en l. Si lo hacemos, aparece una ventana en
No obstante, FrontPage no puede saber si, existiendo un vnculo, este lleva a la pgina correcta.
Tan slo comprueba si esa pgina existe, y si existe, para l es correcto.

Unidad 13. Mantenimiento y optimizacin de un sitio Web (III)


Vista de Tareas.

La vista de Tareas nos permite supervisar una lista de las actividades que nos hacen falta definir para la web. P

distintas personas, de forma que podemos organizar el trabajo de una web entre un grupo de personas. Las tar
sonidos, etc.
Si hacemos clic en la vista de tareas veremos una pantalla similar a esta:

sitio, establecemos vnculos a otras pginas del sitio o a otras pginas en Internet. Suele ocurrir que, en el proc
cambiemos o eliminemos pginas web que no nos interesen. Para comprobar el buen funcionamiento de todos
seguir cada vnculo existente, lo cual puede ser muy trabajoso, o dejar que FrontPage lo haga por nosotros.
Para comprobar los hipervnculos rotos, debemos hacer clic en la vista Informes.
Si no hemos abierto un sitio web, FrontPage nos recordar que slo funcionar con un sitio web.

A continuacin podemos pulsar en el informe Hipervnculos y automticamente nos aparece este dilogo preg
hipervnculos del sitio Web, pulsamos sobre Si para que comience con la comprobacin.

Tambin podemos hacer clic en Informes - Problemas - Hipervnculos.


O bien podemos hacer clic en el siguiente icono de la barra de tareas:
En la siguiente ventana hacemos clic en Comprobar todos los hipervnculos y pinchamos en Iniciar.

Pginas lentas: Muestra la cantidad de archivos de la web cuyo tamao har l

considera lento un archivo que tarda en cargar ms de 30 segundos con un md

actualidad el modelo de mdem ms habitual es de 56kb, sin olvidar que existen


256kb o ms.
Podemos configurar FrontPage para que admita estas velocidades. Para ello, y
clic en Herramientas - Opciones.
Hacemos clic en la pestaa Vista Informes.

Hemos de hacer clic en Asumir una velocidad de conexin de y cambiar a la clase de conexin que queramos.

No obstante hemos de pensar que la mayor parte de usuarios todava se conecta con mdem de 56kb a Interne
56.
Tambin es recomendable cambiar el campo Las "pginas lentas" tardan al menos porque un usuario no suele
pgina web, perdiendo inters. Se recomienda dejar este valor en 15 segundos.
Pulsamos Aceptar para cerrar el cuadro de dilogo.

Hipervnculos: Muestra datos acerca de los hipervnculos del sitio web. Podemos ver cuntos tenemos, cule
nuestra web y cuntos sealan a pginas web externas, etc.

Un hipervnculo roto es un vnculo que, al hacer clic en l, no nos lleva a ningn sitio porque la pgina no existe

que no (no vinculados).

Pginas lentas: Muestra la cantidad de archivos de la web cuyo tamao har la carga lenta y tediosa. Por def
tarda en cargar ms de 30 segundos con un mdem de 28 kb. Podemos cambiar estos parmetros.

Archivos antiguos y agregados recientemente: Muestra la cantidad de archivos antiguos y nuevos. Por defect

no haya cambiado en 72 das, y nuevo es un archivo con menos de 30 das. Podemos cambiar estos parmetro

Hipervnculos: Muestra datos acerca de los hipervnculos del sitio web. Podemos ver cuntos tenemos, cule
nuestra web y cuntos sealan pginas web externas, etc.

Errores de componente: Errores en componentes (componentes insertados con Insertar - Componente Web).
Tareas no completadas: Nos dice la cantidad de tareas de la vista de Tareas que estn sin terminar.

Temas no utilizados: Si decidimos utilizar un tema para una pgina del sitio y despus borramos la pgina, en
del tema. Este informe nos muestra qu tema es, para que lo eliminamos y ahorremos espacio.

Unidad 13. Mantenimiento y optimizacin de un sitio Web (II)

Para ver con ms detalle cada informe, hemos de hacer doble clic en el informe que nos interese, o bien usar la

automticamente en la parte superior. Una vez estemos dentro de un informe, para cambiar de informe o volver
deseemos en Informes. Por ejemplo, para ver el informe de hipervnculos rotos, pulsamos aqu:

Vamos a ver los dos informes ms usados: pginas lentas e hipervnculos.

Vista de Informes: Nos permite ver una serie de parmetros que nos informan sobre el estado de la web.
Vista Tareas: Nos permite llevar una lista de tareas pendientes.
Vista de Exploracin y vista de hipervnculos: Nos ayudan al mantenimiento de la web.
Vista de Informes.
Para mostrar la vista de informes, tan slo hemos de hacer clic en el icono Informes de la barra de Vistas.

FrontPage nos muestra un resumen de los informes del sitio web. Hay una pequea descripcin de para qu sir

contador que muestra la cantidad de pginas o enlaces, y una columna que nos muestra el tamao de un conju
los diferentes informes:
Todos los archivos: Muestra la cantidad de archivos de la web y el tamao total.
Imgenes: Muestra la cantidad de imgenes de la web y el tamao total.
Archivos no vinculados y vinculados: Nos muestra la cantidad de archivos a los que podemos llegar desde la

Para practicar los distintos aspectos explicados en el tema puedes realizar el Ejercicio sobre plantillas.

Aqu puedes realizar un ejercicio paso a paso interactivo para practicar lo visto en la unidad.

Unidad 13. Mantenimiento y optimizacin de un sitio Web (I)

Vamos a aprender cmo comprobar el buen funcionamiento de nuestro sitio


web. Veremos qu elementos de FrontPage2003 nos pueden ayudar en esta
tarea.
Informes del sitio web. Mantenimiento.

FrontPage nos proporciona una serie de herramientas para comprobar e


mantenimiento. Estas herramientas funcionarn para un sitio web, pero no para una pgina individual. Algunas

Galera de imgenes:: Nos permite crear una pgina con muestras de varias imgenes en un tamao peque
una plantilla interesante para mostrar una coleccin de fotos.

haremos clic en Aceptar.

Unidad 12. Plantillas (II)


Plantillas predefinidas del FrontPage.

FrontPage nos proporciona una serie de plantillas creadas. Algunas de ellas requieren que el servidor donde l

extensiones de FrontPage. En ese caso, al probar las pginas en un navegador recibiremos un mensaje inform
Veamos algunas de estas plantillas:

Las plantillas son archivos que acaban que se suelen

c:\Documents and Settings\usuario\Datos de program


archivos ocultos.

Al guardar una plantilla tenemos que darle un nombre


recomendable poner una pequea descripcin.

Si queremos que la plantilla slo pueda usarse en la w

correspondiente. Esto es til cuando tenemos varias w


Por defecto, la plantilla puede usarse en cualquier web.
Pulsando en el botn Examinar... podemos ver las plantillas que ya hemos creado.

Usar una plantilla.

Como ya hemos visto, usar una plantilla es bien fcil. Pulsamos en Archivo - Nuev

derecha) hacemos clic en Ms plantillas de pginas.... Tras esto, elegimos la plan


pgina y pulsamos en Aceptar.

Grabamos los cambios pulsando en

Para practicar los distintos aspectos explicados en el tema puedes realizar el ejercicio paso a paso Hojas de e

Aqu puedes realizar un ejercicio paso a paso interactivo para practicar lo visto en la unidad.

Unidad 12. Plantillas (I)

Vamos a ver un elemento de FrontPage que nos puede ayudar a la hora de crear pginas web: las plantillas. Ap
Qu es una plantilla?

Una plantilla es un documento creado previamente que podemos usar para crear otros. Una plantilla puede con

grficos, vnculos, etc. Normalmente una plantilla contiene ciertas partes vacas, que tendremos que rellenar se

haciendo la web de una empresa, podemos colocar el logo y el nombre de la empresa en la plantilla, y crear las
plantilla: todas las pginas contendrn el logo y el nombre de la empresa.

Crear una plantilla es muy sencillo. Creamos una pgina nueva y la llenamos del contenido que necesitemos.
Plantilla en vez de como pgina web, como hacamos hasta ahora.

Como podemos comprobar, se han aplicado las caractersticas que hemos visto antes.
Vamos a cambiarlas.
Abrimos la hoja de estilos y pulsamos en el botn Estilo que queda en medio de la pgina.

Pinchamos en body y pulsamos en Modificar. En Formato elegimos Fuente.... En la ventana de Fuente elegimo
Le damos a Aceptar hasta que volvamos a la hoja de estilos.

Ahora el texto tiene otro tipo de letra y otro color.

Ahora vamos a indicarle a FrontPage que asocie la pgina w

Hacemos clic en el men Formato - Vnculos de hoja de estil

Nos aparece la siguiente pantalla, en la que tenemos que pu


hoja de estilos que antes hemos guardado. Hacemos clic en

Veamos un par de imgenes de la ventana antes y despus

Al aplicarse la hoja de estilos, la pgina web tiene ahora el siguiente aspecto:

Naturalmente, modificaremos slo los que necesitemos. Vamos a guardar la hoja de estilos y vamos a usarla.
Pulsamos en guardar

y guardamos la hoja como hojaestilos.css.

Vamos a aplicar la hoja de estilos a una pgina web. Creamos la siguiente pgina:

Es importante que marquemos el ttulo como encabezado H4.


Para ello lo seleccionamos y en la barra de formato hacemos clic en Estilo y clic en H4 (o encabezado4).
Si no lo hacemos, el ttulo ser considerado como texto normal y se le aplicar el estilo del texto.

del documento, como ya hemos visto.


Las caractersticas con que cuenta el estilo estn en el apartado Descripcin.

Si pulsamos en el botn Formato podemos modificar el estilo asociado a la etiqueta:

Aqu nos aparecen todas las posibles modificaciones.


Podemos cambiar la Fuente... (tipo, color, tamao,etc), el tipo de Prrafo..., etc.

Ahora el texto tiene otro tipo de letra y otro color.


Grabamos los cambios pulsando en

Unidad 11. Hojas de estilos (III)

Aqu podemos cambiar las caractersticas de las etiquetas HTML y tener una vista previa de estos.

Para crear un estilo nuevo, pulsaremos en Nuevo. Para eliminarlo, lo seleccionamos haciendo clic en l y pulsa
estilo, lo seleccionamos haciendo clic en l y pulsaremos en Modificar.
Algunas etiquetas HTML que debemos conocer son:

a: se refiere a los hipervnculos.


table: se refiere a las tablas.
body: se refiere al cuerpo del documento (texto en general).
h1..h6: se refiere a los encabezados (para los ttulos).
Modificar y aplicar una hoja de estilos.
Para modificar una hoja de estilos tenemos que modificar sus elementos.

Por ejemplo, si hacemos clic en body y despus en Modificar, podemos ver ese estilo y modificarlo body es una

gusto.
Podemos hacerlo a mano, directamente en la pgina, o bien con la ayuda de FrontPage.

Para ello hacemos clic en el botn Estilo que aparece en mitad de la pantalla. Aparece la siguiente ventana, que
modificados, que en este momento sern los modificados por defecto de la plantilla de FrontPage.
Vemosla:

Unidad 11. Hojas de estilos (II)

Aparece el cuadro de dilogo Estilo, que nos muestra los estilos que estn modificados, que en este momento s
plantilla de FrontPage.
Vemosla:

siguiente ventana:

En esta ventana nos aparecen las distintas hojas de estilo predefinidas en FrontPage, con una pequea descrip
Vamos a elegir un estilo y a aplicarlo a una pgina Web para ver cmo trabajar con l.
Elegimos el estilo Arcos. Hacemos clic en Aceptar y FrontPage nos abre una nueva hoja de estilos.

Arcos es una hoja de estilos que se caracteriza por hacer el texto de color marrn, con el tipo de letra Verdana,
New Roman y con fondo de color amarillo plido.
Podemos ver como la hoja tiene un nombre de estilo, que se caracteriza por acabar en .css. Si examinamos la

etiqueta_HTML
{
caractersticas
}
Es decir, modificamos varias etiquetas HTML para darles ciertas caractersticas. Esta es slo una plantilla, que

Aqu puedes realizar un ejercicio paso a paso interactivo para practicar lo visto en la unidad.

Unidad 11. Hojas de estilos (I)

Vamos a ver qu son las hojas de estilos y cmo usarlas para dotar a los documentos que creemos de una apa

sepamos que para poder sacarles todo el partido posible a las hojas de estilos, tenemos que tener ciertos cono
est de ms tener a mano nuestro manual bsico de HTML

Qu es una hoja de estilos?


Una hoja de estilos o CSS ("Cascade Style Sheet"), es un conjunto de reglas y caractersticas que, aplicadas a

pueden modificar su apariencia. De esta forma, podemos separar en cierta forma el diseo de la pgina de su c

Gracias a las hojas de estilos podemos de alguna manera homogeneizar y automatizar el trabajo que supone e

estilo para los ttulos y otro para el texto, de forma que no tengamos que modificar cada vez el texto y los ttulos
queramos.

Una hoja de estilos puede estar contenida en la misma pgina donde se utiliza o puede estar definida en un arc

un sitio Web con varias pginas es recomendable crear una hoja de estilos aparte de esta forma, podemos defin

que de la primera tendremos que escribir el mismo cdigo en cada pgina cada vez que lo necesitemos. Por es

aplicar algn efecto en particular y la segunda cuando ese efecto es el mismo para todas las pginas. Existe un
estilo en la propia etiqueta HTML dnde queramos usarlo, con lo que el efecto slo se producir en ese lugar.

Esto implica conocer cdigo HTML y las propiedades que queramos cambiar. Esto tendramos que repetirlo par
deseamos cambiar. Por ello, al ser poco eficiente, se usa la primera forma o la segunda, antes mencionadas.

Estas formas tambin requieren conocer HTML. Por ello FrontPage nos facilita el uso de estilos por medio de la
de estilo con pocos conocimientos de HTML.
Crear una hoja de estilos.
Para crear una hoja de estilos, hacemos clic en Archivo - Nuevo

En el campo Origen de vdeo aparece e

En Bucle podemos configurar el nmero

antes de pararse o hacer que sea conti

Podemos hacer que haya un retardo en

el nmero de milisegundos (1000 milise

Finalmente el vdeo puede iniciarse al a

es la opcin por defecto), o al pasar el r

Por ltimo, podemos cambiar el tamao

arrastrando los cuadraditos negros. Pod

Propiedades de Imagen, pestaa Apariencia y tamao. Aqu aparecen adems otras opciones, como la alineac
con las imgenes.
Para aadir ms efectos especiales, veamos este avanzado

Para practicar los distintos aspectos explicados en el tema puedes realizar el Ejercicio sobre efectos especiale

Aadir un vdeo a la pgina Web.

Insertar un vdeo es muy sencillo. Tan slo hemos de hacer clic en el lugar de la Web dnde queramos poner e
en Imagen y finalmente en vdeo. Buscamos el archivo de vdeo y hacemos clic en Abrir.

El formato del vdeo debe ser avi, asf, ram o ra. De todos ellos el ms usado es el avi, ya que es un estndar de

ningn componente extra para ser reproducido. Alcanza resoluciones de 320 x 240 pxels y 30 frames/segundo
FrontPage nos mostrar la primera imagen del vdeo.

Debemos configurar si queremos que la reproduccin sea continua o no. Para ello pinchamos con el botn dere
clic en Propiedades de imagen....

Unidad 10. Elementos interactivos y multimedia (III)

Aadir msica de fondo a la pgina Web.

Vamos a aadir msica a nuestra pgina. Esto puede aportar cierta personalidad a nuestra pgina. No obstante

cada vez que un visitante la vea. Podemos configurar la meloda para que suene una, varias veces o de forma i

Con elementos repetitivos como msica de fondo, una imagen en movimiento o videos debemos tener mucha c

demasiado al visitante, si saturamos la pgina con imgenes gif en movimiento sobrecargan demasiado la pgi

elementos interactivos y multimedia pero bien situados. Y si ponemos una meloda de fondo debe ser relajante,

Para insertar msica esta debe estar en uno de estos formatos: wav, midi, au, real audio o aiff. De todos ellos, e

formato reproduce msica con fidelidad, pero ocupa mucho espacio debido a que no utiliza ningn tipo de comp

melodas cortas. Por otra parte, el formato MIDI ocupa poco espacio pero suena artificial. Podemos encontrar g
Internet.

Pulsamos con el botn derecho en cualquier parte de la pgina Web, y hacemos


clic en la ficha General, si no est seleccionada, y buscamos el apartado Sonido

Botones con imagen

Para crear un botn con imagen tenemos que tener la imagen en formato bmp, jpg, gif. Tambin podemos usar otros form
importante resaltar que bien podemos poner un ancla, bien podemos poner un vnculo normal, la nica diferencia respecto
Para crear el botn seguimos los siguiente pasos:.
Del men Insertar elegimos la opcin Imagen - Desde archivo.... Y seleccionamos la imagen que utilizaremos como botn.
Adems de esto abrimos la barra efectos DHTML. Esta barra se
compone de varios desplegables y sirve para aplicar efectos dinmicos
a direrentes elementos como imgenes o texto.
En el primer desplegable seleccionamos el evento que deseamos que lleve a cabo (clic, doble clic, al pasar el mouse, al car
evento seleccionado se puede aplicar unos efectos u otros y por ltimo elegimos la configuracin.
El penltimo botn sirve para quitar el efecto y el ltimo botn resalta los efectos dinmicos que hay en la pgina.

Si queremos que la imagen cambie al pasar el ratn sobre la imagen, debemos seleccionar el evento Pasar el mouse en Apl
en elegir configuracin seleccionamos la segunda imagen que aparecer al pasar el ratn por encima.
Aqu tienes un ejemplo de botn con imagen de sustitucin (cambia la imagen al pasar el ratn por encima):

Propiedades de los botones interactivos.

Propiedades de los botones interactivos.


En esta pestaa se puede seleccionar la fuente del botn
Adems de esto en Color original podemos seleccionar
pgina.
En Color al activar seleccionamos el color que se ver a
En Color al hacer clic podemos seleccionar el color que

En sus propiedades, ponemos lo que queramos qu

Para crear un vnculo al ancla, escribimos su nomb

que el ancla que hemos creado se llama ancla (en

en el dibujo en el campo Vnculo, hemos escrito #a

El resto de opciones las configuramos como quera

Podemos poner tantas anclas como queramos, sie

Como ejemplo, al pulsar este botn iremos hacia a

Unidad 10. Elementos interactivos y multimedia (II)

Entonces hacemos clic en la vista HTML para ver el cdigo y, en el lugar dnde se encuentre el cursor, aadim
<FORM><INPUT TYPE="button" VALUE="Atrs" onClick="history.back()"></FORM>

Si lo que queremos es un botn Siguiente, hacemos lo mismo con:


<FORM><INPUT TYPE="button" VALUE="Adelante" onClick="history.forward()"></FORM>
Estos son los botones:
history.back --> mira en el histrico del navegador y accede a la anterior pgina visitada.
history.forward --> realiza el caso contrario, mira en el histrico del navegador y accede a la siguite pgina.

Ahora vamos a hacer algo ms sofisticado: vamos a crear un botn para desplaza
botn Subir/Bajar.
Para crear el botn, hacemos clic en Insertar y despus en Componente Web.

En el cuadro de dilogo Insertar componente Web que aparecer elegimos Efectos d


tambin podemos hacer clic directamente sobre el botn

Botn interactivo... del m

Unidad 10. Elementos interactivos y multimedia (I)

Vamos a insertar elementos interactivos y multimedia en nuestras pginas Web. Aprenderemos a utilizar sonido
efectos especiales que mediante cdigo HTML no es posible.

Introduccin

Una pgina Web puede tener distintos tipos de elementos interactivos y multimedia. Un elemento interactivo es

dependiendo de cmo acte el usuario. Un elemento multimedia puede ser un sonido, una cancin, una animac
Ambos tipos de elementos pueden darle vida a una Web, pero utilizar en exceso esta clase de elementos har
engorrosa, por lo que los visitantes podran perder el inters. Por lo tanto, hemos de usarlos con mesura.

Existen objetos que son una mezcla de ambos, como son las animaciones Flash. Estas animaciones pueden in
interactivas.

Vamos a aadir dos posibilidades de empresa. Pulsamos en Agregar... y escribimos 'multinacional'. Pulsamos e

Volvemos a pulsar en Agregar... y escribimos 'empresa local', pero esta vez en Estado inicial hacemos clic en s

Aceptar. De esta forma tenemos un cuadro desplegable, en el que podemos elegir una opcin de dos, en el que
seleccionada.

El aspecto final es el siguiente:

Para practicar los distintos aspectos explicados en el tema puedes realizar el ejercicio paso a paso Crear un f

Aqu puedes realizar un ejercicio paso a paso interactivo para practicar lo visto en la unidad.

Elegimos como Tipo de datos: el valor Texto.

Seleccionamos en el apartado Formato de texto e


Adems, para evitar errores, vamos a configurar

de, por lo menos, 3 letras. Por lo tanto en el apar


el valor 3 en el campo Longitud mnima.
La ventana debera quedar as:

Unidad 9. Formularios (VI)

Finalmente vamos a configurar el campo organizacin. Como es un cuadro desplegable, sus propiedades son d

Vamos a configurar cada elemento uno a uno. Para ello pulsaremos con el botn derecho del ratn sobre ellos
de formulario. Comenzamos por el nombre (por el cuadro de texto, no por el texto que pone 'nombre:').

Escribimos en Valor inicial: 'Escriba aqu su nombre y apellidos' y establecemos el Ancho en caracteres en 40. L

iniciales a los campos del formulario o para sealar que deben ser escritos, tal como hemos hecho. El ancho pe
hasta 40 letras.

Para 'Cargo' vamos a impedir que puedan usarse nmeros. Estamos poniendo restricciones a lo que un usuario

ser usada por ejemplo en un campo para la edad o para introducir un dni, obligando a poner slo nmeros, o, c
slo letras. Hacemos clic en Propiedades de campo de formulario, pero hacemos clic en el botn Validar....

repasar el tema de tablas.

Situamos el cursor en la primera celda. Escribimos 'Nombre:' (sin las comilla), y lo ponemos en cursiva. Situamo
hacemos clic en Insertar - Formulario. Hacemos clic en Cuadro de texto.
Repetimos la operacin en la segunda fila pero para el texto 'Cargo:'.

As, podramos emular el formulario anterior. No obstante vamos a situar elementos nuevos. Repetimos el proce
usar un Cuadro de texto, vamos a usar un Cuadro desplegable. Deberamos tener algo similar a esto:

Ahora aadimos algo nuevo. Escribamos lo siguiente: 'Dispone de:'. En la celda que queda libre a la derecha in
al lado escribiremos el texto 'ordenador'.

En la casilla de debajo introduciremos otra Casilla de verificacin, y al lado escribiremos el texto 'vehculo propio

Ya tenemos el formulario hecho. Vamos a configurarlo.


Configurar el formulario.

Tipo de codificacin: Escribimos text/plain, para que se codifique como texto plano (sin formato).
Una vez hecho esto hacemos clic en Aceptar en todas las ventanas y el formulario est listo para funcionar.
Este es el aspecto final del formulario. El usuario no ver las lneas punteadas..

Unidad 9. Formularios (V)


Insertar elementos en un formulario.

Vamos a introducir elementos manualmente en un formulario de forma que no tengamos que depender exclusiv

asistente. Para ello haremos un formulario similar al anterior pero con algunas cosas nuevas. Todos estos elem
Formulario.

Creamos una pgina en blanco. Hacemos clic en Insertar - Formulario. Pulsamos Intro un par de veces para ba
principio del formulario.
Ahora crearemos una tabla para situar los elementos de una forma ordenada. Creamos una tabla de 4 filas y 2

Finalmente hacemos clic en el botn Siguiente>.

Unidad 9. Formularios (IV)


Como los servidores gratuitos no suelen aceptar las extensiones de FrontPage, hemos de usar otros mtodos.
con la informacin a una cuenta de correo.

Para poder configurarlo de esta manera hemos de, una vez creado el formulario con cualquiera de las opciones
hacemos clic en el formulario y pulsamos con el botn derecho del ratn en Propiedades de Formulario.

Hemos de pulsar en Enviar a otra y elegir Secuencia de comandos ISAPI, NSAPI, CGI o ASP personalizada.
Despus hacemos clic en el botn Opciones.... Entonces se nos abre el siguiente cuadro de dilogo:

Accin: Escribimos mailto, dos puntos y la direccin


Mtodo: Se selecciona POST. Disponemos de dos

Cuando utilizamos el mtodo GET la informacin se e


en la barra de direcciones separadas por el signo ? y

ejemplo http://www.aulaclic.es/mipagina.cqi?nombre=

adems de que la informacin se pueda ver por la URL es que esta tiene un tamao mximo por tanto estamos

El otro mtodo es POST el cual envia la informacin directamente al servidor no pasando por el URL y sin restr

Como prrafos normales: Presenta los distintos elementos


normales de texto.

Como una lista numeradas: Igual que el anterior, excepto q


lista.

Como una lista de vietas: Igual que el anterior, excepto qu


vieta.

Como una lista de definiciones: Igual que el anterior, pero e

definiciones. Los trminos se suelen presentar alineados a la

Desea incluir una Tabla de contenido para esta pgina? S

principio del formulario para ayudar en la navegacin. Slo s

Utilizar tablas para alinear los campos de formulario: Usa t

formulario sea el mismo independientemente del monitor donde se muestre. Se recomienda activar esta opcin
Hacemos clic en Siguiente> para continuar.

La ltima ventana del asistente sirve para configurar cmo se

ordenador del cliente al suyo o al ordenador donde se aloje s

Guardar los resultados en una pgina Web:FrontPage usa


resultados.

Guardar los resultados en un archivo de texto:FrontPage u


resultados.

Utilizar secuencia de comandos personalizada CGI: Cuand


hace es usar un programa CGI para guardarlos.

Nota: Para que estas opciones funcionen deben ser soportad

servidor dnde se encuentre la Web. Consulte con el tcnico

Entonces nos aparece la ventana anterior, con el elemento ya introducido. Para introducir ms elementos hacem
ya hemos explicado.
Podemos modificar un elemento seleccionndolo y haciendo clic en Modificar.
Si queremos eliminarlo, lo seleccionamos y hacemos clic en Quitar.
Una vez todos los elementos se hayan introducido, podemos configurar el aspecto del formulario:

Una vez todos los elementos se hayan introducido, pulsamos el botn Siguiente> y pasamos a configurar el asp

Unidad 9. Formularios (III)

Hemos elegido el primer elemento, Informacin de contacto,


informacin sobre nuestros visitantes.
Hacemos clic en Siguiente para configurar el elemento.

Esta ventana nos permite configurar el elemento. Su aspecto

elemento, pero en todos debemos elegir qu campos querem


casillas de verificacin.

En algunos casos podemos personalizar los textos que apare

podr introducir. Cuando hayamos elegido lo que ms nos in

Imagen: Nos permite poner imgenes en un formulario. Podemos usar imgenes como botones.

Unidad 9. Formularios (II)


Crear un formulario.

La forma ms sencilla de insertar un formulario en una pgin

Pginas de Formulario. Para iniciar el asistente, hemos de ha

Despus hacemos clic en Plantillas de Pgina. Elegimos el A


hacemos clic en Aceptar. Se iniciar el asistente.

El modo de funcionamiento del asistente es el siguiente. Irem

queramos incluir. Entonces los configuraremos y personaliza

Podemos entonces aadir, quitar o modificar estos elemento

En la pantalla siguiente elegiremos qu elementos contendr

cada vez que terminemos de agregar y configurar un elemen

los elementos que necesitemos, haremos clic en Siguiente. A


en Agregar para aadir un elemento.

Aparece la siguiente ventana:

son:
Libro de visitas: Los visitantes pueden enviarte un comentario sobre tu pgina mediante un formulario.

Recopilar informacin: Para recoger datos como un currculum, un pedido, datos de contacto, etc. podemos u
Formularios de bsquedas: Para que los visitantes introduzcan los datos a buscar.
Elementos bsicos de un formulario.

Veamos qu elementos puede contener un formulario. To

Si queremos que todos los hipervnculos de la pgina actual sean de un determinado tipo, seleccionamos el tipo
valor predeterminado de pgina.

Para practicar los distintos aspectos explicados en el tema puedes realizar el ejercicio paso a paso Crear un m

Aqu puedes realizar un ejercicio paso a paso interactivo para practicar lo visto en la unidad.

Unidad 9. Formularios (I)

Vamos a aprender a usar formularios. Para ello veremos cmo hacerlos y configurarlos. Aprenderemos a poner
mens desplegables, etc. Un punto importante es asegurarse de que para algunas opciones, el servidor donde

debe soportar las extensiones de FrontPage, que son pequeos programas que automatizan ciertas tareas com

informacin. Sin ellas los formularios no funcionarn. Otra posibilidad es que la informacin que almacena un fo
electrnico.

Qu es un formulario?
Un formulario es un conjunto de elementos que se utilizan para recopilar informacin. Un formulario electrnico
Veamos un ejemplo:

Este es un ejemplo de formulario


Escriba aqu su nombre

Enviar

Restablecer

Como podemos observar, el formulario tiene un cuadro de texto para que el usuario introduzca informacin, su

Restablecer, que enva los datos y pone el valor inicial en el campo de texto respectivamente. Para qu podem

Adems de configurar el enlace de la forma habitual, haremo


Aparecer el cuadro de dilogo Marco de destino:

Hacemos clic en la figura para mostrar el marco destino en e

guardamos el enlace. Su nombre aparecer en el campo De

cada enlace cuyo destino queramos que sea un marco distin

En el caso explicado, deberamos pulsar en el marco en az

se debe hacer para los enlaces que estn en el marco del n


marco principal, que se harn de la forma normal.
Comentemos todas las opciones:

Valor pred (principal): No usar marcos. Es el valor por defe


El mismo marco: si queremos usar el propio marco para cargar la pgina de destino.

Toda la pgina: si queremos cargar la pgina de destino en la actual, ocupndola toda y eliminando el conten
Nueva ventana: si queremos usar una nueva ventana para cargar la pgina de destino.
Marco primario: si queremos usar el marco padre del marco actual.

Pulsando en el botn Pgina de Marcos..., activaremos o desactivaremos la casilla Mostrar bordes si queremos

Unidad 8. Marcos (IV)


Las llamadas a un hipervnculo desde un marco.

Un problema muy comn es hacer una pgina con el ndice para una web con marcos y descubrir como, al puls
cargan en el marco del ndice y no en el marco principal, que es lo que nos gustara.

Para conseguir que los vnculos del ndice carguen pginas en el marco principal debemos hacer lo siguiente al
Creamos un hipervnculo de la forma que ya hemos aprendido:

Ahora pulsamos en el botn Pginas de Marcos.

Nos aparecer la pantalla habitual para guardar los archivos, con la salvedad de que nos aparecer el esquema

contenido de cada marco por separado, ya que cada uno es una pgina Web. Sabremos cual pgina guardamo

resaltada en azul en la figura. Cuando aparece el fondo resaltado, y no los marcos, es porque es el momento de

de los marcos. Llamemos a esta pgina index.htm. Esta es la pgina que debemos cargar en el navegador para
Si queremos modificar cada pgina por separado debemos abrirlas, editarlas y guardarlas.
Si queremos trabajar con todas a la vez en otra sesin, tan slo hemos de abrir el archivo de marcos.
Configurar un marco.
Podemos modificar las caractersticas de un marco para que cumpla con nuestros objetivos.
Lo primero que podemos hacer es cambiar el tamao de los marcos. Para ello pulsaremos sobre los lmites de

ratn y, sin soltar, arrastraremos los lmites. Una vez tenga el aspecto que deseemos es conveniente guardar la
Otro aspecto interesante que podemos configurar es el aspecto de cada marco.

Podemos mostrar los bordes de los marcos en el navegador. Para ello hacemos clic con el botn derecho del ra
queremos cambiar. Hacemos clic en Propiedades del marco.

ndice, y "aqu va el contenido" en el marco central, que es el marco de principal.


La pantalla tendr el siguiente aspecto:

Unidad 8. Marcos (III)


Guardar pginas con marcos.
Ahora vamos a hacer clic en Archivo y despus en Guardar.

Para el Marco del ndice: contenido.


Para el Marco principal: principal.

La imagen que podremos ver en nuestro ordenador es esta:

Nada ms crear la Web desde una plantilla de marcos debemos configurar cada marco para que cargue una p

nuevas en cada marco, pulsando en Nueva pgina o cargar pginas ya hechas, con el botn Establecer pgina
Pulsemos en Nueva pgina en cada marco.

Crearemos tres pginas Web distintas en blanco. Es importante saber que NO estamos creando una pgina We
la pgina que contendr el cdigo de la divisin de marcos. Vamos a comprobarlo.
Escribamos "esto es ttulo" en el marco de ttulo, que es el superior. Escribamos "esto es el ndice" en el marco

Insertar un marco.

FrontPage no permite insertar marcos libremente, sino que nos obliga a utilizar una de las plantillas de marcos q
cambiarla como queramos, aadiendo o quitando marcos, cambiando su tamao, etc.

Vamos a crear una Web con marcos. Hacemos clic en el men Archivo, despus en Nuevo. En el panel de tare

clic en Ms plantillas de pgina....


pgina... Elegimos Pginas de marcos y a continuacin nos aparecern varias plantilla

Vamos a trabajar con la plantilla cuya configuracin es la ms usa

Consiste en dividir la pgina Web en tres: Una superior, que conti

contener un ndice, y una central, en la que se ver el contenido d

Es importante saber que cada marco tiene un nombre, que nos sir
como ms adelante explicaremos.

Vamos a aprender qu son los marcos y cmo usarlos.

Los marcos en FrontPage.

Un marco es una divisin de la ventana del explorador en dos o ms regiones. En cada una de ellas podemos c

podemos dividir la pantalla en dos y cargar el ndice de una Web en un marco y el contenido de la Web en el ot

En FrontPage podemos 'ver' los marcos como barras grises, horizontales o verticales. Los marcos en realidad

a las pginas Web que se van cargando en ellos. Desde FrontPage podemos variar fcilmente su tamao, su n
Ventajas e inconvenientes de los marcos: Actualmente el empleo de los marcos se ha reducido bastante. En

costoso debido a la baja velocidad a la que se acceda a Internet, pero en la actualidad la carga de este men n

Adems, el tener varios marcos puede llevarnos a tener un pequeo lo, ya que siempre hemos de recordar qu
ventaja, los marcos ofrecen la posibilidad de separar mens de contenido y as no tener que repetir el men en

Unidad 8. Marcos (II)

Aqu puedes realizar un ejercicio paso a paso interactivo para practicar lo visto en la unidad.

Unidad 8. Marcos (I)

Se nos abrir el cuadro de dilogo Propiedades de


Podemos cambiar el color de fondo de una celda
apartado fondo o insertar una imagen pulsando el
disco duro.
Tambin podemos cambiar el borde de forma sim
Haciendo clic en Alineacin horizontal y vertical
donde queramos.

Poner una imagen de fondo.


Podemos poner un color o una imagen de fondo en una tabla para hacerla ms atractiva. Veamos un ejemplo:
Esto es
con fondo

una tabla
de color azul

Esto es
con Imagen

una ta
de fon

Tabla con color de fondo


Tabla con imagen de
Hacer esto es sencillo. Hemos de pulsar el botn derecho del ratn sobre la tabla y elegir la opcin Propiedades de tabla...
Color si queremos poner un color de fondo, y si queremos usar una imagen haremos clic en Utilizar una imagen de fondo, y
o la buscaremos con el botn Examinar.... Si la imagen es ms pequea que la tabla, el navegador repetir la imagen tantas
tabla.
Si queremos quitar la imagen, tan solo hemos de desactivar Utilizar una imagen de fondo. Si queremos quitar el color para q
color el Automtico.
Podemos hacer esto tambin para una celda. Se procede de forma similar pero abrimos el cuadro de dilogo Propiedades de

Es importante seguir los siguientes consejos cuando usemos fondos:


No usemos imgenes demasiado grandes excepto cuando sea necesario, ya que harn ms lenta la carga de la Web.
Las imgenes deben seguir el estilo de la pgina, de esta forma conseguiremos que la imagen acompae la esttica d
Si usamos una imagen oscura, es conveniente usar texto de color claro y viceversa (en el primer ejemplo el texto no
color oscuro los dos. Cuando la imagen contenga zonas claras y oscuras, evite usar texto en estas zonas. El fondo ele
lo que no hay que hacer.
Para practicar estos aspectos puedes realizar el ejercicio paso a paso Formateo de tablas.

Nos aparecer el cuadro de dilogo Autoformato de tablas


tabla de la lista Formatos: A la derecha nos aparece un ejem
hagamos una idea de cmo quedar la tabla.
Adems, podemos hacer que determinados formatos se apl
seleccionamos o no en el apartado Formatos para aplicar.
Lo ideal es jugar con las opciones hasta que la tabla tenga
Podemos cambiar el aspecto de una tabla tantas veces com
Cuando estemos satisfechos, pulsaremos en Aceptar.

Por otra parte, puede que nos interese hacer que una o ms celdas sean distintas a las dems. Para ello las seleccionamos y h
de ellas.
Elegimos Propiedades de celda.

Aparece el cuadro de dilogo Propiedades de celda, parecido al de Propiedades de tabla, en el tenemos dos opciones Especi
tenemos que marcar la opcin, despus elegir el alto o ancho, y la unidad ( En pxeles o En porcentaje ). Normalmente traba
slo utilizaremos la opcin en pxeles cuando queramos que los elementos que se encuentren dentro de la tabla queden fijos
monitor o de la ventana, por ejemplo en los formularios.

En ambos casos la ventana se distancia del margen


izquierdo un 15%. El tamao de la imagen en cambio
es absoluto y por eso es igual de grande en ambos
monitores.

monitor 15 pulgadas

Ventajas e inconvenientes de usar tamaos fijos y tamaos relativos:Usamos tamaos fijos cuando la posicin de los elem
de la pgina sea el mismo en cualquier monitor. Sin embargo, una pgina web en un monitor de 15 pulgadas puede parecer
tamaos relativos cuando queremos que los elementos se siten aprovechando el tamao del monitor del visitante.
Unidad 7. Tablas (IV)
Dar formato a las celdas.

Dar formato a la tabla la hace ms atractiva a la vista. Adems, podemos dar formato a determinadas celdas cuyo contenido
Vamos a utilizar en primer lugar el autoformato de tablas. Hacemos clic en cualquier lugar de la tabla a la que queramos da
de tablas de la barra de herramientas Tablas:

El dilogo Propiedades de tabla tiene las siguientes propiedades:


En Herramientas de diseo podemos habilitar o deshabilitar las herramientas
de diseo o indicar, como en este caso, que se habilite automticamente.
En Tamao indicamos el nmero de filas y de columnas.
En Diseo elegimos la alineacin los mrgenes de celda o el espaciado entre
celdas entre otras opciones.
En Bordes seleccionamos el tamao o el color.
En Fondo podemos seleccionar un color o insertar una imagen pulsando
sobre el botn Examinar...
Podemos establecer los cambios realizados como predeterminados para
nuevas tablas sealando la ltima casilla Establecer como predeterminado
para tablas nuevas del dilogo.
Si pulsamos sobre el botn Estilo... podemos modificar el estilo de la tabla.

Cambiar el tamao de una fila, una columna de forma manual.


Para cambiar el tamao de una celda de forma manual debemos seleccionar la fila o columna en primer lugar. Despus puls
fila o columna y hacemos clic con el izquierdo en Propiedades de Celda....

ratn, y la tabla cambiar de tamao automticamente.

Cambiar el tamao de una fila, una columna o de celda de forma interactiva.


Para cambiar el tamao de una fila, una columna o de una celda tenemos que situar el rat

redimensionar. El cursor adaptar esta forma


o esta . Hacemos clic y, sin soltar, arra
tamao automticamente.
Hay que tener en cuenta que cambiar el tamao de una celda implica que cambie el tama
pertenezca, dependiendo de si cambiamos el tamao a lo alto o a lo ancho, respectivament
Cambiar el tamao de una tabla de forma manual.
Para cambiar el tamao de una tabla de forma manual pulsamos con el botn derecho del r
izquierdo en Propiedades de Tabla.
Como podemos ver, en la ventana aparecen dos apartados denominados Especificar ancho
redimensionar la tabla. Aqu podemos elegir si queremos que el tamao se especifique de
trabajaremos de forma relativa, y slo utilizaremos la opcin en pxeles cuando queramos
la tabla queden fijos en su posicin sea cual sea el tamao del monitor o de la ventana.

Para aadir filas o columnas tan solo hemos de pulsar el botn derecho del ratn sobre la tabla y elegir la opcin insertar fil
automticamente una fila o una columna delante de la seleccionada.

Si tenemos la barra de herramientas Tabla activa, tambin podemos utilizar los botones
para aadir filas o en
colum
Para eliminar filas o columnas tan solo hemos de seleccionarlas previamente, a continuacin pulsar el botn derecho del rat
eliminar filas o la opcin eliminar columnas. Se borrarn automticamente las filas/columnas seleccionadas. Tambin pode
barra de herramientas Tabla.
Para practicar puedes realizar el ejercicio paso a paso Insertar filas.
Para aprender a anidar tablas, dividir y combinar celdas tienes el siguiente avanzado.
Cuando pulsamos el botn de nueva pgina
aparece el panel de tareas en la seccin de Tablas y celdas de
diseo, a continuacin explicamos las propiedades y utilidad de este panel.
Si pulsamos sobre Formato de celda podemos modificar:
Propiedades de celda de diseo
Ancho, Alto, Margen, VAlign (alineacin de la celda) puede ser (Superior, Central e Inferior) y BGcolor
(color de fondo de la celda)
Bordes
Ancho, color.
Mrgenes
Izquierdo, superior, derecho e inferior.
Insertar tabla de diseo --> Insertar una tabla sin diseo de una nica celda.
Insertar celda de diseo --> Abre el dilogo Insertar celda de diseo donde podemos especificar el ancho y el alto e
indicar si la vamos a insertar antes o despus de la seleccin.
Si tenemos seleccionada una tabla en la seccin Propiedades de tabla aparece el ancho y el alto de la tabla,
podemos alinearla a la izquierda, centrada o a la derecha.
Si pulsamos Establecer mrgenes de pgina... nos abre el dilogo Propiedades de pgina en la pestaa Avanzadas
para que indiquemos los mrgenes superior, izquierdo, inferior y derecho.
En la ltima seccin del panel tenemos Diseo de tabla, donde podemos escoger un diseo de tabla predefinido,
simplemente con seleccionar el diseo que ms nos convenga se insertar en nuestra pgina.

Unidad 7. Tablas (III)


Cambiar el tamao de la tabla y de las celdas.
Es muy sencillo cambiar el tamao de las tablas y de las celdas para adaptarlas a nuestras necesidades.
Cambiar el tamao de una tabla de forma interactiva.
Para cambiar el tamao de una tabla tenemos que situar el ratn en el borde la tabla. El ratn adaptar esta forma

o esta

otras tablas.
Para desplazarnos por las celdas podemos usar los cursores. Otra posibilidad es pulsar la tecla tabulador para

queremos retroceder celda por celda. Si pulsamos tabulador cuando estemos en la ltima celda de una tabla, a
fila a la tabla con el mismo nmero de columnas que el resto de filas de la tabla.
La tabla se redimensionar automticamente segn el texto o los objetos que insertemos en ella.

Unidad 7. Tablas (II)


Seleccionar los elementos de la tabla.

Existen diferentes maneras de seleccionar los elementos de una tabla. La primera es seleccionar con el ratn el contenido de
clic en ella.

Tambin podemos seleccionar varias celdas haciendo clic en una de ellas y, sin soltar, arrastrando para seleccionar varias ce

Otra forma es seleccionar bien las filas de una tabla, bien las columnas de esa tabla. Para ello hemos de situar el ratn en los
cambie de forma, pasando a ser una flecha. Entonces hacemos clic con el botn izquierdo. De esta manera podemos selecci
pero tambin podemos arrastrar de forma similar a la anterior y seleccionar varias filas o columnas.

Aadir y eliminar filas y columnas.

Insertar una tabla

Lo primero que debemos hacer es situar el cursor donde queramos que est la tabla. Despus, para insertar un

Insertar tabla, que est situado en la barra de herramientas estndar. Sin soltar, arrastramos el ratn de forma q
como queramos.

Al soltar el ratn, aparecer la tabla en pantalla.

Por defecto, la tabla ocupa todo el ancho posible de la pgina y tiene un borde de 1 pxel. Estas y otras propied
veremos despus.
Tamaos relativos y tamaos fijos.

Es importante saber que, por defecto, el tamao de las tablas se especifica de manera relativa a la ventana. Es

pantalla, en un monitor ms grande la tabla se redimensionar para ocupar la mitad de esa pantalla. Se dice qu

porcentaje. Pero podemos cambiar esto para que el tamao de la tabla se especifique en pxeles, de forma que
independiente del tamao de la pantalla en la que se muestre.
Ms adelante veremos cmo elegir una u otra opcin.
Rellenar las celdas
Para rellenar las celdas debemos hacer clic en la celda que queramos rellenar y teclear el texto que queramos.

Desde el men Ver, hacemos clic en Barras de herramientas y despus en Tablas.

Poniendo el ratn sobre una barra de herramientas hacemos clic con el botn
derecho del ratn, se nos abre un men contextual con las barras disponibles,
seleccionamos la barra Tablas.

Las tablas son representadas en FrontPage de esta manera:


Tabla con borde (3 filas, 2 columnas)

Tabla sin borde (1 filas, 2 columnas)

Vamos a ver qu son las tablas y cmo trabajar con ellas, para poder presentar datos de forma ordenada y para

concreto. Las tablas sirven para organizar mejor una pgina Web, por ejemplo si queremos tener el texto a la iz

utilizaremos una tabla con dos columnas, en la columna izquierda escribiremos el texto y en la columna derecha

Tambin es muy til para insertar mens en un lateral de la pgina y como no para dibujar una tabla como lo ha

Las tablas en FrontPage2003

desplazarnos por ella, o bien desde otra pgina distinta. Lo nico que debemos hacer es aadir el nombre del m
de vnculo.

Como se puede ver, este enlace carga la pgina a_10_3_1.htm y nos lleva al marcador "marcador". Tambin po
marcadores, si hacemos clic en Lugar de este documento del cuadro Vincular a:

Como podemos observar, aparece el marcador. Si existieran otros marcadores, tan slo hara falta pulsar en el
el vnculo al marcador.
Para practicar este ltimo punto puedes realizar el ejercicio paso a paso Anclas.
Unidad 7. Tablas (I)

Las Anclas.

Un ancla o marcador es una seal invisible que se deja en ciertas partes de una pgina web para acceder dire

pulsar en los ttulos del ndice de este curso, accedemos a las pginas de cada tema. Pero si pulsamos en alg

En la siguiente ventana elegimos:

Valor pred:No usar marcos. Es el valor por defecto.


El mismo marco:si queremos usar la propia ventana.
Nueva ventana:si queremos usar una nueva ventana.
Si queremos que todos los hipervnculos de la pgina actual sean de un determinado tipo,
seleccionamos el tipo y hacemos clic en Establecer como valor predeterminado de pgina.

El resto de opciones pertenecen al tema de Marcos y sern explicados entonces. En este momento no
son relevantes.
Quitar hipervnculos.

Para modificar un hipervnculo tenemos que seleccionar el texto o grfico que lo contiene y abrir el cuadro de di
lo cambiaremos y pulsaremos en Aceptar.

Para quitar un hipervnculo tenemos que seleccionar el texto o grfico que lo contiene y abrir el cuadro de dilog
pulsaremos en el botn Quitar vnculo y pulsaremos en Aceptar.

Unidad 6. Hipervnculos (IV)

De esta forma, se llama la atencin sobre la existencia del hipervnculo. Por qu es interesante que el visitante

primer lugar lo interesante de una pgina web es que no tenemos que recorrerla tal y como haramos con un lib
lleven a distintos destinos, y el visitante podr elegir lo que quiere visitar.

Pongamos por ejemplo una pequea web sobre un modelo de coche. La pgina inicial puede hablar sobre el co
esttica y sobre las opciones de compra. Es una buena idea poner un enlace en cada prrafo que lleve a otras
sobre cada tema. As, un visitante interesado slo en el motor no tendra que recorrer la web entera.

Por otra parte, ver los hiperenlaces nos ayuda a navegar fcilmente, porque el visitante sabe dnde puede nave

los enlaces adecuados pgina siguiente, pgina anterior, e ndice podemos hacer fcilmente un selector de pg

Sin embargo, estticamente puede que no nos satisfaga. Es posible que, sencillamente, el fondo de la pgina s

haga que un enlace subrayado no quede bien. No hay problema, se puede cambiar sin problemas seleccionand
subrayado y cambiando el color de la letra como vimos en el tema sobre formateo de texto.
Introducir hipervnculos en una imagen.
Vamos a aprender cmo introducir hipervnculos en una imagen.

Para insertar un hipervnculo en una imagen procederemos de una forma similar a lo que haramos con un texto
del ratn sobre la imagen que contendr el vnculo, y elegiremos la ltima opcin, Hipervnculo.

Una forma equivalente es, tras hacer clic en la imagen, hacer clic en el men Insertar y despus en Hipervncul
e indicaremos a dnde conduce el vnculo de la misma forma que hemos hecho con el texto.
Para insertar hipervnculos en distintas zonas de la imagen hemos de usar mapas de imgenes.
Destino del vnculo.

Cuando creamos un vnculo, por defecto el navegador abrir la pgina web destino en la misma ventana, pero p

aparte. Esto es til por ejemplo si queremos abrir una pgina externa a nuestro sitio pero sin que el visitante pie

Para hacerlo, al crear el hipervnculo, hacemos clic en el botn Marco de destino... del cuadro de dilogo Inserta

vnculo a otra pgina Web, a la que podremos viajar si disponemos de conexin a Internet.
Pulsamos en Aceptar.

Ntese que el texto cambia de color y aparece subrayado para indicar que es un hipervnculo. Si quisiramos in
escribiramos la direccin de correo en Direccin.
La pantalla nos mostrar algo similar a esto:

Lo que hemos hecho es crear un hipervnculo con la web de El Pas. Este hipervnculo est asociadas a las letr
Unidad 6. Hipervnculos (III)
Formato del hipervnculo.

Hemos de darnos cuenta de que un visitante sabr que existe un enlace por varios motivos. El primero es que e

una manita. Adems, un hipervnculo aparece por defecto con un color distintivo, normalmente el azul, y aparec

dnde lleva un hipervnculo tan slo poniendo el ratn encima de l sin hacer clic; en la barra de estado del nav

el destino (en este caso http://www.elpais.es). Si pulsamos en el enlace y tenemos conexin a Internet, se debe

Para introducir un hipervnculo tenemos 3 opciones:


Seleccionamos el texto asociado al enlace.
A continuacin podemos
- Pulsar en el men Insertar y despus, en Hipervnculo.
- Pulsar el botn

de la barra formato.

- Presionar Alt + Ctrl + K del teclado.

Veamos un ejemplo siguiendo la primera opcin.


Ahora seleccionaremos las palabras "el Pas" y pulsaremos en Insertar y despus, en el men que se abre, en
Aparecer el cuadro de dilogo Insertar hipervnculo

En Texto: aparece el texto que hemos seleccionado. Podemos cambiar este campo para que aparezca otro tex
pgina.

En Direccin: escribiremos la direccin a dnde nos tiene que llevar el hipervnculo, por ejemplo: http://www.elp

f_flash.htm del sitio Aulaclic.


Vamos a explicar las partes de las que se compone una direccin web completa:
http --> es el protocolo utilizado para pginas web (HiperText Transfer Protocol)
www.aulaclic.es --> es el nombre DNS del servidor de aulaclic
/flashMX/ --> es un directorio dentro del servidor aulaclic
f_flash.htm --> es la pgina web en HTML que estamos buscando
Hipervnculo a una direccin de correo electrnico.

Un hipervnculo a una direccin de correo electrnico es un vnculo que contiene una direccin de correo. Al pu

programa de correo que tenga el usuario instalado para poder escribir a esa direccin de correo. Por ejemplo, s
correo@aula.com, escribiremos esta direccin de correo como direccin al insertar el hipervnculo.
La direccin de correo se descompone en:
correo --> nombre del usuario
aula.com --> nombre del servidor de correo
Unidad 6. Hipervnculos (II)
ntroducir hipervnculos en el texto.

o de guardar el archivo.

Por lo tanto, podemos usar los hipervnculos para conducir a los visitantes de nuestro sitio web por donde quera

pongan en contacto con nosotros, nada mejor que ofrecerles un hipervnculo a nuestro correo electrnico. Vam
Tipos de hipervnculos.
Existen varios tipos de hipervnculos. Vamos a ver los ms usados.
Hipervnculo
Hipervnculo de texto.

Un hipervnculo de texto es un enlace que se encuentra asociado a un texto, de forma que si hacemos clic sobr

hipervnculo. Por defecto, cuando creamos un hipervnculo de texto, el texto aparece subrayado y en un color d

visitante sepa que existe ese enlace. Si volvemos a la pgina despus de visitar el enlace, este aparecer con o

diferenciar el hiperenlace, es posible que no queramos que aparezca as. Ms adelante veremos cmo hacer es
Hipervnculo de imagen.

Un hipervnculo de imagen es un enlace que se encuentra asociado a una imagen, de forma que si hacemos cli

indique el hipervnculo. Por defecto. cuando creamos un hipervnculo de imagen, la imagen aparece rodeada de

el visitante sepa que existe ese enlace. Al igual que con el texto, ms adelante veremos cmo podemos modific
Por otra parte, los hipervnculos pueden referirse a pginas del mismo sitio web o de otros sitios web.
Hipervnculo a una pgina del propio sitio web (pgina local).

Un hipervnculo local es un vnculo a una pgina que se encuentra en el mismo sitio web. Esto significa que el a

refiere el vnculo se encuentra en el mismo disco que la pgina que contiene el vnculo. As, para referirnos a el

direccin en el disco duro. Si se encuentra en la misma carpeta, basta con poner su nombre. Si se encuentra en

Con el botn Examinar podemos buscar la imagen en el disco duro y sustituirla por otra si queremos. Con el bo
dibujo con la imagen; por defecto el Paint de Windows.

En Tipo aparece el tipo de imagen que hemos cargado, GIF o JPEG. Podemos pasar de un tipo a otro cambian
recomendable, ya que pasando de un tipo a otro podemos perder calidad.

En Representaciones alternativas podemos poner una imagen de menor resolucin para que se cargue antes d

entrelazado del gif. Primero se cargar la imagen que indiquemos en Baja resolucin, y tras ella la versin norm
se supone de mayor calidad y, por tanto, de mayor tiempo de carga.

Tambin podemos poner un texto que sustituya a la imagen si, por cualquier razn, esta no se cargara. Es el ca

Tambin podemos ver, en el caso de que hayamos asignado un hipervnculo a la imagen, el destino en el camp
tambin podemos hacerlo desde aqu.
La pestaa Vdeo la veremos ms adelante.

Para practicar los distintos aspectos explicados en el tema puedes realizar el Ejercicio paso a paso Insertar im

Aqu puedes realizar un ejercicio paso a paso interactivo para practicar lo visto en la unidad.

Unidad 6. Hipervnculos (I)


Vamos a ver qu son los hipervnculos y como usarlos para hacer navegables nuestro sitio Web, de forma que
pgina Web a otra. Aprenderemos qu tipos de hipervnculos existen y para qu sirven.

Qu es un hipervnculo?

Un hipervnculo es un enlace, normalmente entre dos pginas web de un mismo sitio, pero un enlace tambin p

web, a un fichero, a una imagen, etc. Para navegar al destino al que apunta el enlace, hemos de hacer clic sobr
hiperenlaces, enlaces o links.

Normalmente el destino se puede saber mirando la barra de estado del navegador cuando el ratn est sobre e

Dependiendo de cual sea el destino, hacer clic en un hipervnculo puede hacer que ocurran varias cosas. Si el d

la cargar y la mostrar, pero si el destino es un documento de Word, el navegador nos dar la posibilidad de a

tiene 256 o menos colores, o como JPG si tiene ms.

AJUSTE IZQUIERDA:
IZQUIERDA Ahora tan slo tenemos que elegir la imagen de nuestro disco duro qu

nuestra pgina, pulsando en Insertar para cargarla. Como podemos observar podemos carg
imagen. FrontPage las guardar automticamente como como GIF si la imagen tiene 256 o
como JPG si tiene ms.

AJUSTE DERECHA: Ahora tan slo tenemos que elegir

disco duro que queremos incluir en nuestra pgina, puls

cargarla. Como podemos observar podemos cargar dist

FrontPage las guardar automticamente como como GIF si la imagen tiene 256 o menos c
tiene ms.
Unidad 5. Imgenes (III)
Podemos cambiar otras propiedades en la pestaa General :

En Origen de la imagen est la ruta en la que se encuentra la imagen. Tambin podemos poner aqu la direcci

Podemos cambiar el estilo de ajuste de la imagen respecto del texto. Por defecto, las imgenes tienen el estilo

seala), lo que significa que el texto no rodear la imagen, permaneciendo esta sola. Sin embargo, si pulsamos

texto podr situarse a la derecha de la imagen. Lo contrario suceder si seleccionamos el estilo de alineacin D

Adems, podemos fijar otras alineaciones, poner un borde alrededor de la imagen (Grosor del borde:) o separa
horizontal o vertical). Podemos tambin especificar un tamao fijo o en porcentaje para la imagen.

Por defecto la imagen se carga con su tamao normal, pero modificando estas opciones podemos hacer que ap

fijo), especificando un tamao en pxeles, o hacer que sea variable con el tamao de la ventana de la pgina we
porcentaje.

Si queremos recuperar el tamao original de la imagen, tan solo debemos desmarcar la casilla de Especificar ta
Veamos unos ejemplos de ajuste:

AJUSTE IZQUIERDA:
IZQUIERDA Ahora tan slo tenemos que elegir la imagen de nuestro disco duro qu

original, debemos usar un programa de tratamiento de imgenes, aunque para pequeos cambios podemos us

El archivo que contiene la imagen no cambia aunque cambiemos su tamao en FrontPage. Siempre podemos v
explicamos en el punto de Propiedades de la imagen.
Usar una imagen como fondo de una pgina.
Podemos usar una imagen como fondo de una pgina Web.
Para poner una imagen de fondo hacemos clic en Formato y despus en Fondo.

En la ventana que se nos abrir debemos hacer clic en la pestaa Formato y asegurarnos de marcar la o

Despus tenemos que buscar qu imagen queremos poner como fondo, haciendo clic en Examinar.

La imagen saldr como fondo de pgina y, si no ocupa toda la pantalla, el explorador automticamente la llenar

Si queremos cambiar la imagen de fondo repetimos el proceso eligiendo otra imagen, y si queremos quitar la im
desmarcando la opcin Imagen de fondo .

Podemos activar la opcin de Convertir en marca de agua. En ese caso el fondo no se desplaza cuando nos mo
barra de desplazamiento. No todos los exploradores admiten este efecto, por lo que no se recomienda usarlo.
Es importante seguir los siguientes consejos cuando usemos fondos:

No usemos imgenes demasiado grandes excepto cuando sea necesario, ya que harn ms lenta la car

Las imgenes deben seguir el estilo de la pgina, de esta forma conseguiremos que la imagen acompa

Si usamos una imagen oscura, es conveniente usar texto de color claro y viceversa. Cuando la imagen c
usar texto en estas zonas.

Propiedades de la imagen.

Para ver las propiedades de una imagen y modificarlas, hemos de hacer clic en ella con el botn derecho y de

Imagen. Nos aparece el cuadro de dilogo Propiedades de imagen, en la pestaa Apariencia tenemos las siguie

Ahora tan slo tenemos que elegir la imagen de nuestro disco duro que queremos incluir en nuestra pgina, pul

podemos observar podemos cargar distintos tipos de imagen. FrontPage las guardar automticamente como G
colores, o como JPG si tiene ms.
Unidad 5. Imgenes (II)
Cambiar el tamao de una imagen.

Tras cargar la imagen, es el momento para que ajustemos su tamao al que ms nos interese. Para ello hacem

ratn sobre la imagen y aparecern 4 cuadraditos en la imagen. Pinchando en ellos con el botn izquierdo del r

podemos cambiar el tamao de la imagen (el ratn cambia de forma cuando lo situamos encima de uno de esto

Con imgenes pequeas a simple vista no notamos demasiado la perdida de calidad, pero cuando estamos trab

dimensiones y deseamos hacer zoom (acercarnos) sobre la imagen es cuando notamos si tiene o no calidad, u

zoom, o mejor dicho admite zoom pero la imagen se distorsiona, por cada zoom que hacemos vemos la imagen

puntos de color que tiene una imagen, a mayor resolucin ms pixeles tiene la imagen en un recuadro) y por ta

Todas estas caractersticas podemos cambiarlas con nuestro editor de imgenes favorito (Coreldraw, Corel Pho
Insertar una imagen.

Vamos a insertar imgenes en nuestra pgina Web. La forma ms sencilla y


Pulsamos con el ratn sobre el lugar donde queremos poner la imagen.
Pulsamos el icono Insertar imagen desde archivo .
Nos aparecer el cuadro de dilogo Imagen:

Todas estas caractersticas podemos cambiarlas con nuestro editor de imgenes favorito.

Adems de estas caracteristicas el formato GIF89a una versin de GIF permite contener varias imgenes en la

pequea animacin (imagen en movimiento). Como por ejemplo la imagen que utilizamos para indicar una anim

PNG es una abreviatura de Portable Network Graphics . Este formato puede llegar a terner 48 bits, con los cu
El inconveniente de tanta calidad es que genera archivos de gran tamao.

Este formato puede llegar a comprimir entre un 10 un 30% ms que el formato GIF. Este formato incluye grad

correccin de gamma (es el ajuste de luz y sombras) y paletas de colores. Una carencia que tiene este formato
Gif89a, es decir no admite imgenes animadas.

JPG o JPEG es una abreviatura de Joint Photographic Experts Group. Este formato utiliza 16 millones de colo

mostrar fotos con gran calidad. Adems, JPG puede comprimir la imagen para que ocupe menos espacio, por lo
cargadas con una velocidad aceptable.

La compresin tiene un precio, y es la prdida de calidad con respecto a la imagen original. JPG nos permite co
perdiendo ms o menos calidad.

Tambin podemos elegir la cantidad de barridos (pasadas para dibujar la imagen) antes de mostrar la imagen fi
entrelazado del GIF.

Veamos un ejemplo de una foto guardada en formato GIF, PNG, en JPG y en JPG con mucha compresin, as

de cuanto tardara en cargarse desde Internet (suponiendo una conexin con mdem, que es la ms lenta pero
FOTO Original

FOTO GIF

FOTO PNG

FOTO JPG poca compresin

esta carpeta.
Para practicar lo que acabamos de explicar puedes realizar el ejercicio paso a paso Aadir texto Wordart.

Unidad 5. Imgenes (I)


Vamos a ver cmo se usan las imgenes en una pgina Web, cules son los formatos ms usados en Internet
tener una Web atractiva.
Formatos de imgenes usadas en Internet: GIF, JPG y PNG.

Para mostrar fotos o dibujos, se suelen usar principalmente dos formatos de imagen: GIF, JPG y PNG. El prime

pequeas fotos de pocos colores. JPG es usado para presentar fotos a todo color y PNG es el llamado a sustitu
GIF, JPG y PNG?

GIF es una abreviatura de Graphic Interchange Format. Este formato utiliza como mximo 256 colores, por lo

perderse colorido. Por ello es usado para mostrar dibujos, esquemas, fondos y pequeas fotos. Tiene varias ca

entrelazado y la transparencia. Al contrario que JPG, que veremos a continuacin, no se pierde calidad con este

El entrelazado permite que la imagen se cargue en el ordenador que visualiza la pgina Web poco a poco, mien

Escribimos el texto del ttulo que queremos crear. Tambin podemos elegir el tamao y la fuente que utilizarem
clic en Aceptar y aparece el texto WordArt en nuestra pgina:

Como podemos ver hemos creado un objeto WordArt. Si pulsamos en l podemos variar algunos de sus parme
WordArt.

Tambin podemos variar el tamao manualmente estirando de los pequeos crculos que rodean al objeto Word
podemos girar el objeto.
A continuacin tienes un resumen de los comandos de la barra de WordArt:

Nota: Al crear el WordArt, FrontPage crea una carpeta donde guarda los archivos que el WordArt necesita para

Podemos crear espectaculares ttulos para nuestros docum


Para ello utilizaremos la herramienta WordArt, que tambin

que es posible usar aqu gracias a la integracin de las aplic

Para usar un objeto WordArt pulsaremos en Insertar - Image


WordArt.

Aparece el cuadro de dilogo Galera de WordArt, e

rtulo que queremos crear. Podemos ver cmo que


palabra WordArt.

Hacemos clic en el estilo que queramos y hacemos clic en Aceptar. En este momento FrontPage nos pide introd
cuadro de dilogo Modificar texto de WordArt.

grficos o el texto del tema.

Para quitar el tema de la pgina actual, debemos elegir de la lista de temas, la opcin (Sin tema) que es la pri
Unidad 4. Formateo de texto (VI)
Uso de WordArt

Para conseguir un aspecto ms atractivo de la


de un sitio, podemos aplicar Temas.

Un tema es una combinacin de colores, tipos

un mismo estilo y tienen una cierta concordan


Para aplicar un tema, hacemos clic

en la barra de mens en Formato - Tema.

Nos aparece el panel de tareas en

la seccin de Tema como vemos en la imagen

Desplazndonos con la barra

vertical podemos ver los distintos temas que p

tema a su derecha aparece un

rectngulo con una flecha apuntando hacia ab

Si pulsamos sobre la flecha se

despliega un men como el que vemos en la i

opcin de Aplicar como tema

predeterminado o Aplicar el tema a la pgina

Para aplicar un tema debemos

hacer clic en las pginas a las que queramos

la vista Exploracin y

seguidamente escoger el tema.

Algunas opciones interesantes

son:

Colores intensos: Aplicar colores

ms brillantes de forma que llamen ms la ate

Grficos activos:Activa ciertas

animaciones en algunos objetos de la web.

Imagen de fondo: Agrega una imagen de fondo, puede servir para aadir el logotipo de la empresa como fondo

Crear tema nuevo...: Nos permite crear un nuevo tema a partir de un tema simple, nos abre el dilogo Personal
realicemos los cambios que creamos conveniente, cuando tengamos el tema terminado debemos pulsar sobre
para el nuevo tema.

Tambin podemos Personalizar el tema, al presionar sobre esa opcin aparece el dilogo Personalizar el tema

As, si tenemos el texto:

Al aplicar numeracin (en este cas

Aqu puedes realizar un ejercicio paso a paso interactivo para practicar lo visto hasta el momento.
Unidad 4. Formateo de texto (V)
Temas de FrontPage.

Vamos a aplicar los espaciados en el siguiente ejemplo:


Espaciado antes de: (15 pxeles)
Este es el primer prrafo.
Este es el segundo prrafo.

Espaciado despus de: (15 pxeles)

Espaciado

Este es el primer prrafo.

Esto es un te

Este es el segundo prrafo.

mismo prraf

Si lo que queremos es introducir un salto de lnea, sin introducir un nuevo prrafo, hemos de pulsar las tecla

Para practicar los distintos aspectos explicados hasta ahora puedes realizar el ejercicio paso a paso Formate

Si quieres aprender a corregir las faltas de ortografa con el corrector ortogrfico que incorpora FrontPage haz
Unidad 4. Formateo de texto (IV)
ntroducir listas y vietas.

Para introducir una lista, tan solo hemos de pulsar sobre el botn lista numerada

de lista que queramos, e ir pulsando la tecla Intro a medida que rellenemos la lis

pulsamos Intro la nueva lnea empieza por un nmero o punto segn el tipo de l
terminada debemos pulsar dos veces Intro.
Intro

Podemos hacer que un texto existente se transforme en una lista numerada o d


el botn de lista numerada o lista de vieta.
Tambin poemos variar la forma en que queremos que se muestre la lista: con
tanto podemos hacer con las vietas, pues podemos usar diferentes smbolos.

Para configurar qu smbolos usar, pulsaremos con el botn derecho del ratn sobre la lista o vieta, y pulsarem
podemos elegir distintos elementos. Tras pulsar en Aceptar, la lista o vieta se actualizar automticamente.

Se abrir el cuadro de dilogo Propiedades de lista donde podemos elegir distintos elementos. Tras pulsar en A
automticamente.

prueba para poder trabajar y observar como FrontPage nos a


Alineado al centro.

Este es un prrafo de prueba para poder trabajar y observar como FrontPage nos ayuda a usarlos como nos

prueba para poder trabajar y observar como FrontPage nos ayuda a usarlos como nos
Alineado justificado: 'estira' el texto para que ocupe todo el rea de texto.
Prrafo alineado con justificado. Podemos
observar como el texto se ajusta a los lmites de
la tabla. Esto suceder tambin para un texto

Prrafo alineado sin justificado. Prrafo a


justificado. Prrafo alineado sin justificad
alineado sin justificado.

cualquiera.

Prrafo alineado prederminado. Puede ser cualquier tipo de alineado. Se aplica el establecido por defecto.

Vamos a aplicar sangras al prrafo. Para ello abrimos el men contextual de prrafo y podemos aplicar Sangra
que dejar la sangra en pxeles:

Antes del texto: Deja un espacio a la izquierda del prrafo.

Despus del texto: Deja un espacio a la derecha del prrafo.

Primera lnea: Deja un espacio a la izquierda de la primera lnea.


Este prrafo tiene una sangra de

Este prrafo tiene una sangra de

Este prraf

antes del texto. Como podemos

despus del texto. Como podemos

primera lnea

observar, queda un espacio a la

observar, queda un espacio a la

observar, la p

izquierda del texto. En este caso es de derecha del texto. En este caso es de

poco despus

20 pxeles.

20 pxeles.

20 pxeles.

Ahora vamos a trabajar el Espaciado en el propio prrafo y entre prrafos. Si abrimos el men contextual podem

Antes de: Deja un espacio antes del prrafo actual. Se especifica en pxeles.

Despus de: Deja un espacio despus del prrafo actual. Se especifica en pxeles.

Palabra: Deja espacio entre cada palabra del prrafo actual.

Interlineado: Deja espacio entre cada lnea del prrafo actual.

En el dilogo Fuente podemos modificar el tipo de letra (Fuente) el Estilo (Cursiva, Negrita, etc) el Tamao (10,
diferentes Efectos sobre el texto seleccionndolos.

En el mismo dilogo podemos ver una Vista previa de cmo quedara el texto segn las modificaciones que vay
Unidad 4. Formateo de texto (III)

Se abrir el cuadro de dilogo Prrafo que te describiremos a continuacin y que nos permite configurar caracte

Podemos cambiar la posicin del prrafo cambiando su Alineacin. Podemos posicionar un prrafo a la izquierd
justificado y prederminado. Veamos cmo actan:
Alineado a la izquierda: es el activo por defecto.

Este es un prrafo de prueba para poder trabajar y observar como FrontPage nos ayuda a usarlos como nosotros queramos. E
trabajar y observar como FrontPage nos ayuda a usarlos como nosotros queramos.
Alineado al
centro.
a la
derecha.

Este es un prrafo de prueba para poder trabajar y observar como FrontPage nos ayuda a usarlos como nos

prueba para poder trabajar y observar como FrontPage nos ayuda a usarlos como nos

Vamos a teclear un texto cualquiera en la ventana. Por ejemplo, este texto:

Este es un prrafo de prueba para poder trabajar y observar como FrontPage nos ayuda a usarlos como
es un prrafo de prueba para poder trabajar y observar como FrontPage nos ayuda a usarlos como noso

Vamos a modificar las caractersticas de la fuente . Para ello basta con que situemos el cursor en cualquier part
seleccionado y pulsar el botn derecho.
derecho En el men contextual pincharemos en la opcin Fuente .

Podemos modificar caractersticas del prrafo haciendo clic sobre la barra de mens, en Formato y despus en

Se abrir el cuadro de dilogo Fuente que te describiremos a continuacin y que nos permite configurar c

Para Insertar texto lo nico que debemos hacer es escribir en la pantalla. Como en el Word, el texto aparecer

Para terminar un prrafo, slo hay que pulsar la tecla Intro. Una vez introducido el texto podemos cambiar su as
que nos ofrece la barra de Formato que describiremos a continuacin:

barra de fo
Para cambiar el tipo de letra lo que tenemos que hacer es pulsar en el cuadro desplegable de Fuente
texto que se introduzca ser con ese tipo de letra. Si lo que queremos en cambio es cambiar el tipo de letra de

debemos seleccionarlo y cambiar entonces el tipo de letra como hemos hecho antes. Ntese que slo se produ
lo que al escribir en otra zona lo haremos con el tipo de letra que tenamos previamente.

Para cambiar el tamao de letra lo que tenemos que hacer es pulsar en el campo Tamao de Fue

introduzca ser con ese tamao de letra. Si lo que queremos en cambio es cambiar el tamao de letr

escrito, debemos seleccionarlo y cambiar entonces el tamao de letra como hemos hecho antes. Nt

ese trozo de texto, por lo que al escribir en otra zona lo haremos con el tamao de letra que tenamos

Para hacer la letra con efecto negrita, cursiva o subrayado tenemos que pulsar el botn N, el botn K o el bo

de entonces el texto que se introduzca ser negrita,


negrita cursiva o subrayado. Si lo que queremos en cambio es hac
caractersticas, debemos seleccionarlo y pulsar en los iconos como hemos hecho antes.

Como se puede observar lo que tenemos que hacer para formatear texto es, bsicamente, seleccionar el tex

apropiados para aplicar el efecto que deseemos. Existen muchos tipos de efectos, que podremos aplicar selecc
Formato - Fuente.
Unidad 4. Formateo de texto (II)
Uso de prrafos y la fuente de letra.

Para introducir prrafos mientras escribimos un texto, debemos pulsar la tecla Intro. FrontPage2003 automtic

aplicar algunas caractersticas propias de un procesador de textos, como son las sangras y el espaciado entre
que salgan como queramos.

En la pestaa Exploracin podemos indicar los Textos que aparecern en la barra de vnculos.
Eliminar un sitio Web.
Para eliminar un sitio debes colocarte en la lista de carpetas, y hacer clic con el botn derecho del ratn en la

contextual, elige la opcin Eliminar. Un cuadro de dilogo te advertir que una vez borrado no se podr recuper

Para practicar los distintos aspectos explicados aqu puedes realizar el ejercicio paso a paso Creacin manu
Tambin puedes realizar el ejercicio paso a paso Creacin del sitio web utilizando el asistente .
Unidad 4. Formateo de texto (I)
Vamos a ver cmo formatear texto en FrontPage2003. Veremos como darle al texto y a la pgina la apariencia
veremos un tema avanzado para corregir las faltas de ortografa.
Introducir texto. Tipo de letra, tamao, negrita, cursiva, subrayado.

Para entender toda la teora de este tema, lo mejor que podemos hacer es crear una Web vaca, con lo que ten

practicar. FrontPage2003 dispone de una interfaz similar a un procesador de textos como el Word, por lo que si
difcil aprender a hacer lo mismo en FrontPage.

En la pestaa Avanzadas podemos seleccionar qu lenguaje de script vamos a usar. Algunas caractersticas a

dependiendo del lenguaje. Lo usual es elegir Javascript, que es el ms extendido en Internet y el que usaremos

Aparece la ventana Configuracin del sitio de la cual comentaremos las opciones ms importantes:

En la pestaa General:
Podemos ponerle un nombre al sitio web. El directorio en el disco duro tendr ese mismo nombre.

Nos pedir el nombre de la nueva carpeta, se lo introduciremos. No es conveniente usar espacios en blanco, ac

carpetas y archivos, ya que en Internet, los servidores en el que se guarde todo nuestro trabajo puede que no s

que nuestra web no funcione bien, tambin hay que tener cuidado con utilizar minsculas y maysculas mezcla

minsculas y maysculas, en este caso si una carpeta (por ejemplo) la hemos nombrado en maysculas y lueg
minsculas, algunos servidores la encontrarn y otros no.
A veces, tras realizar operaciones (como copiar archivos), no aparecen los ltimos cambios realizados, en este
actualizar la vista de Carpetas.

Si quieres ver cmo podemos crear un sitio Web utilizando el asistente haz clic aqu.
Si quieres ver ejemplos de sitios Web predefinidos de FrontPage haz clic aqu

Unidad 3. Introduccin a la configuracin de un sitio Web (III)


Configuracin del sitio.
Para ver la configuracin del sitio y modificarla, hemos de pulsar Herramientas - Configuracin del sitio.

La parte de la izquierda nos recuerda al rbol de directorios de Windows, pero la derecha muestra un esquema
slo contiene la nica pgina existente: index.htm.

Esta vista nos muestra el esquema lgico de nuestro sitio web. Nos muestra cmo estn conectadas las pgina
elementos que veremos a lo largo del curso. Sera como el mapa de un sitio

Para crear nuevos directorios:

Ponemos la vista de carpetas y pulsamos con el botn derecho del ratn sobre cualquier parte vaca de la parte
Carpeta.

Si no aparece el panel de la izquierda selecciona de la barra de mens la opcin Lista de Carpetas del men Ve

observar, nuestro sitio web se compone, en este momento, de 2 carpetas, images y _private, que estn vacas.
index.htm, que est en blanco.
Podemos comprobarlo si pulsamos 2 veces sobre la pgina pasaremos a abrir el archivo en la vista de Diseo.
sobre la pestaa Sitio web

Volvamos a la vista Carpetas. A la izquierda tenemos la estructura en forma de rbol de directorios, y a la derec

contenidos en la carpeta abierta. Es similar a cmo lo veramos en el Explorador de Windows. Desde aqu pode
nuevos, etc.
Si hacemos clic en la parte inferior en el botn Exploracin, pasaremos a la vista Exploracin.
Esta es la vista Exploracin:

Unidad 3. Introduccin a la configuracin de un sitio Web (II)


Crear un sitio Web sin conexin a Internet.

Como es natural, el destino de un sitio Web es ser visitado por personas a travs de Internet. Pero para disear
Internet.

Podemos construir nuestro sitio y almacenarlo directamente en el servidor, para que pueda ser visto inmediatam
Esto es, trabajando directamente en Internet.

Sin embargo, podemos construir nuestro sitio en nuestro ordenador y sin tenerlo almacenado en un servidor vis
Internet. Para ello haremos que FrontPage aloje nuestro sitio Web en nuestro ordenador, y trabaje con l como
Esto es perfecto para probar el buen funcionamiento de nuestro sitio Web y depurar errores.

Lo que se suele hacer es crear y probar la Web en nuestro propio ordenador y, cuando hemos comprobado que
FrontPage nos permite hacer tanto una cosa como la otra.
Para crear el sitio, lo primero que debemos hacer es presionar sobre Archivo - Nuevo

Despus haremos clic en Sitio Web de una pgina... del apartado Nuevo sitio Web de la barra de tareas, a cont
pgina, indicamos la ubicacin de la web mediante el botn Examinar, y para terminar clic en Aceptar.

Hemos creado el sitio Web. Consta tan slo de una hoja en blanco. Para comprobarlo, hacemos clic en Carpeta

nuestro sitio Web.


Crear un boceto de la Web. Estructura de ficheros.

A la hora de disear un sitio Web, es conveniente disear un boceto sobre cmo va a ser la Web. Tenemos que

Lo ms sencillo es no estructurarla, poniendo todos los archivos en el mismo directorio. Esto se suele hacer en

ficheros es pequeo. Sin embargo este es un mal hbito, ya que si la Web crece, acabaremos perdidos en un m

Por ello es conveniente hacer, por lo menos, una pequea divisin, ponie
directorio determinado. Es decir, los ficheros de fotos en un directorio, los ficheros de la Web en otro, etc.

Naturalmente si el sitio Web es de cierta envergadura,

ello en los sitios Web complejos se suele dividir el sitio Web en partes y cada parte se almacena en un lugar dis
sus propias carpetas.

FrontPage nos proporciona las herramientas adecuadas para poder estructurar nuestro sitio Web. Estas herram
Exploracin en la barra de vistas.

Activar producto...: Sirve para activar Microsoft Office FrontPage sino se haba activado ya.

Opciones de comentarios del cliente...: Esta opcin sirve para mandar algn comentario a los desarrolladores d

Acerca de Microsoft Office FrontPage: Nos informa de la versin de Microsoft Office FrontPage de la que dispo
alguna informacin ms.
Unidad 3. Introduccin a la configuracin de un sitio Web
Web (I)
Vamos a ver unas consideraciones bsicas a la hora de construir una Web, la ms importante, la
planificacin. Gracias a ella nos ahorraremos mucho trabajo posterior y evitaremos errores
comunes. Cuando conozcamos todo esto estaremos en disposicin de empezar a crear nuestro
propio sitio Web, que poco a poco iremos construyendo a lo largo del curso.

Qu es un sitio Web? Diseo previo

Un sitio Web se compone del conjunto de pginas Web que diseemos para un objetivo concreto. Sin embargo

para un uso personal que para una empresa. Cada uno tiene sus necesidades y planificar con antelacin qu e
muchos problemas posteriores.

Qu clase de Web vamos a crear? Existen muchos tipos, pero vamos a nombrar algunos de los ms utilizados

Sitio personal: Son los sitios diseados para conocer la vida y obra de alguien. Es el ms sencillo, podemos u
(normalmente incluyen publicidad) y se compone de unas pocas pginas.

Sitio de una empresa: Son los sitios diseados para dar a conocer una empresa. Pueden ser sencillos, en el c

complejos, en el caso de grandes empresas. Normalmente tienen una direccin propia (www.nombre_de_la_em
corporativa.

Sitio de una tienda online: Son los sitios diseados para vender por Internet. Cualquier empresa, grande o pe
del planeta gracias a Internet. Este puede tambin estar incluido en el sitio de una empresa.
Sitio de un portal: Son los sitios especializados en recopilar recursos sobre un tema o temas determinados.

Cada sitio requiere una planificacin previa. Lo ms usual es dibujar un esquema en papel sobre cada parte de

Otra forma inmediata de obtener ayuda es pulsar la t

sobre ? y seleccionar la opcin Ayuda de Microsoft O

tareas en la derecha en la seccin de Ayuda de Fron

que deseemos buscar en el recuadro Buscar y pulsa

Tambin podemos navegar por la Tabla de contenido


disponibles.

A la derecha de la barra de mens disponemos de un

texto a buscar ayuda y pulsando ENTER comienza la

Al desplegar el men de ayuda disponemos de las siguientes opciones:

A continuacin comentamos que realiza cada una de estas opcione

Ayuda de Micosoft Office Frontpage: Esta opcin ya la hemos visto,


seccin de ayuda

Mostrar el Ayudante de Office: Activa el ayudante de office y lo deja

Microsoft Office Online: Abre nuestro navegador en la pgina Web d


Recursos de desarrolladores de Microsoft FrontPage: Abre nuestro
a desarrolladores de Microsoft Frontpage donde se puede ver los ltimos recursos disponibles.

Pngase en contacto con nosotros: Abre nuestro navegador en la pgina Web de Office en la zona de contacto
Buscar actualizaciones: Abre nuestro navegador en la pgina Web de Office en la seccin de actualizaciones

Detectar y reparar...: Sirve para reparar Microsoft Office FrontPage si se detecta que no funciona demasiado b

Hay operaciones que no estn disponibles en un determinado momento. Se reconocen porque tienen el color a

herramientas y las iremos viendo a lo largo del curso. Adems nos podemos definir nuestras propias barras.
barras La

pulsa con el botn derecho del ratn en una de ellas. Nos aparecer una lista de las barras activas. Basta con m
ocultarlas.

Para practicar los distintos aspectos explicados puedes realizar el ejercicio paso a paso Visualizar una pgina

Puedes personalizar FrontPage2003 para definir el entorno de trabajo a tu gusto. A medida que avances en el c

usas a menudo. Para saber cmo definir tus propias barras o modificar las que tienes como quitar iconos que n

Para practicar los distintos aspectos explicados en el avanzado anterior puedes realizar el ejercicio paso a pa
personalizada.

Unidad 2. Elementos bsicos de FRONTPAGE2003 (III)


La ayuda de FrontPage.
FrontPage2003 nos proporciona diversas ayudas. Vamos a verlas.

La ayuda ms inmediata nos la proporcionan los tooltips.


tooltips Los tooltips son los pequeos mensa

sobre algn elemento. Por ejemplo, si lo dejamos sobre el icono de guardar, nos aparece lo si

Las barras de herramientas.

Las barras de herramientas contienen iconos para ejecutar de forma inmediata algunas de las operaciones ms
Imprimir

, etc.

La barra de Formato.

La barra de Formato es una barra de herramientas que se encuentra en la parte superior de la pantalla y contie

formato del texto. Como en otras aplicaciones de Office, podemos definir en cada momento qu clase de texto v
tamao, negrita, cursiva, subrayado, alineacin, etc.
Los modos

de Edicin de pgina.
Se encuentran en la parte baja de la pgina. Son Diseo,
Diseo, Dividir, Cdigo y Vista
Vista

vista habitual de trabajo, la vista dividida en vista diseo y el cdigo en HTML, el

del resultado final de la Web en un navegador. Nosotros usaremos casi siempre

permite editar la Web de forma visual. La segunda opcin la utilizaremos para ve

asociado. Con la tercera, editaremos el cdigo en HTML, opcin slo para exper

veremos nuestra pgina como la veramos desde un navegador. Esta ltima no e

pues solo nos permite visualizar un borrador de cmo ser la pgina Web y no p
sobre la pgina.

Selector de etiquetas.

Esta es la barra de selector de etiquetas y sirve para seleccionar la etiqueta al completo con su contenido, por e

prrafo <p> nos aparece en la barra, al pulsar sobre la etiqueta se selecciona toda la etiqueta <p> con su conte
Adems de seleccionar al situarnos con el ratn sobre la etiqueta aparece una flecha
etiqueta, al pulsar sobre la flecha nos aparece la lista despegable que vemos a la derecha.

indicando que e

La barra de mens contiene las operaciones de FrontPage, agrupadas en mens despegables. Al hacer clic en
operaciones relacionadas con los diferentes elementos que se pueden insertar en FrontPage.

Todas las operaciones se pueden hacer a partir de estos mens. Pero las cosas ms habituales se realizan m
barras de herramientas que veremos en el siguiente punto.

Cada opcin tiene una letra subrayada, esto indica que se puede acceder directamente a la opcin pulsando sim
subrayada, por ejemplo si pulsamos Alt+A
Alt A se abre la opcin Archivo.
Archivo

"inteligente", que consiste, bsicamente, en mostrar slo los coma


La barra de mens tiene un comportamiento "inteligente"
usuario va utilizando. Si deseas ms informacin sobre los mens despegables, haz clic aqu

Los mens despegables de la barra de mens contienen tres tipos bsicos de elementos:
Comandos inmediatos.
inmediatos. Se ejecutan de forma inmediata al hacer clic sobre ellos. Se

nombre del comando, o no aparece nada o bien aparece la combinacin de teclas p


ejemplo, en el men Insertar - lnea horizontal.
horizontal

Opcin con cuadro de dilogo.


dilogo. Al hacer clic en la opcin aparece un cuadro de dilo

que tendr botones para aceptar o cancelar la accin. Se distinguen porque el nomb

Unidad 2. Elementos bsicos de FRONTPAGE2003 (II)

ejemplo, en el men Inserta

Elementos de la pantalla inicial.

Al arrancar FrontPage aparece una pantalla inicial como sta, vamos a ver sus componentes fundamentales. A
diferentes elementos y ser ms fcil entender el resto del curso. La pantalla que se muestra a continuacin (y

pueden no coincidir exactamente con la que ves en tu ordenador, ya que cada usuario puede decidir qu eleme
momento, como veremos ms adelante.

Veamos con ms detalle los distintos elementos:


La barra de ttulo

La barra de ttulo contiene el nombre del programa (Microsoft FrontPage) y el nombre del fichero con el que est

(pagina_nueva_1.htm). En el extremo de la derecha estn los botones para minimizar, maximizar/restaurar y ce

La barra de mens

En la pantalla podemos ver como el sistema nos sugiere index.htm

Hacemos clic en index.htm,


index.htm lo borramos y escribimos como nombre 'hola.htm' (sin las comillas). Hacemos clic e

nuestro trabajo. Ms adelante, cuando modifiquemos la web, bastar con hacer clic en el icono de Guardar y el
nombre que le dimos.

Podemos ponerle a la pgina web un ttulo.


ttulo Para ello, antes de guardar la web, hemos de pulsar en el botn Ca
aparecer en la ventana del navegador.

Aqu puedes realizar un ejercicio paso a paso interactivo para practicar lo visto hasta el momento.
Visualizar la Web.

Ahora vamos a visualizar la pgina. Para visualizar el archivo, hacemos clic sobre el botn Vista previa

edicin, y el sistema cargar el documento como si fuera una pgina Web. Ahora, si disponemos de conexin a

Pas", navegaremos a esa pgina. Si no disponemos de conexin, sencillamente aparecer un mensaje de erro
Finalmente, para cerrar FrontPage, puedes utilizar cualquiera de las siguientes operaciones:
Hacer clic en el botn cerrar

Pulsar la combinacin de teclas ALT + F4.


F4
Hacer clic sobre el men Archivo y elegir la opcin Salir.
Salir

Todas las pginas web que creemos en realidad se componen de un lenguaje generado internamente por Fron
ms tener a mano nuestro manual bsico de HTML que encontrars en la unidad 11 Hojas de estilos.
Para practicar los distintos aspectos explicados en el tema puedes realizar el ejercicio paso a paso Mi primer

Unidad 2. Elementos bsicos de FRONTPAGE2003 (I)

Vamos a ver cules son los elementos bsicos de FrontPage2003,


FrontPage2003 la pantalla, los mens, etc. Aprenderemos a

Unidad 1. Introduccin a FRONTPAGE2003. (II)


Mi primer documento con FrontPage2003

Un hipervnculo,
hipervnculo como ms tarde explicaremos, nos permite navegar por Internet, ya que nos permite cambiar d
Guardar la pgina Web.

Vamos a guardar la pgina en el disco duro. Mientras no est en l, la pgina se guarda en la memoria del orde

de luz o por un fallo del programa. As que no olvide guardar a menudo sus documentos en el disco duro, ya qu

La barra de herramientas contiene iconos para ejecutar de forma inmediata algunas de las operaciones ms ha
Imprimir

, etc.

Pulsamos en el icono Guardar

. Al ser la primera vez que guardamos, el sistema nos pedir un nombre para

nombres de pginas web suelen terminar en .htm o .html. Sin embargo, no es necesario escribir esta terminaci
automticamente.
automticamente

Crear la pgina Web.

Al arrancar el programa, nos aparece por defecto una pgina web en blanco en la que podemos trabajar. Si no n
icono

.
Ahora hacemos clic en el rea en blanco y escribimos lo siguiente:
Hola, esta es mi primera pgina Web.
Este es un enlace al peridico el Pas.
Ahora seleccionaremos las palabras "el Pas" y pulsaremos en Insertar y despus, en el men que se nos

escribiremos lo siguiente: http://www.elpais.es. De esta forma crearemos un vnculo a otra pgina Web, a la q

conexin a Internet. Ntese que el texto cambia de color y aparece subrayado para indicar que es un hipervn
a esto:

Otras funciones, como el corrector ortogrfico, funcionan de la misma manera o de una forma casi
idntica en todas las funciones.
Por otra parte, los documentos de Word pueden ser convertidos a pginas Web. Gracias a esto podemos
crear pginas Web a partir de documentos que ya tengamos escritos en Word de una forma fcil y
sencilla. Esto tambin se aplica a otra clase de documentos como hojas de clculo de Excel,
Excel ficheros de

Access,
Access etc.

Conceptos iniciales de FrontPage.

Puedes arrancar FrontPage2003 ahora para ir probando todo lo que te explicamos. Cuando realices los

ejercicios tambin puedes compaginar dos sesiones de la forma que te explicamos aqu.

Si no conoces funciones bsicas tales como manejar el ratn, teclado, manejar ventanas, etc. aqu

puedes aprenderlas.
Mi primer documento con FrontPage2003

Vamos a construir una sencilla pgina Web para demostrar lo sencillo y potente que puede llegar a ser

FrontPage.
FrontPage
En primer lugar, veamos las dos formas bsicas de arrancar FrontPage2003.

Desde el botn Inicio

situado, normalmente, en la esquina inferior izquierda de la pantalla.

Colocar el cursor y hacer clic sobre el botn Inicio se despliega un men; al colocar el cursor sobre
Programas,
rogramas aparece otra lista con los programas que hay instalados en tu ordenador buscar Microsoft
FrontPage 2003 dentro de Microsoft Office, hacer clic sobre l, y se arrancar el programa.

Desde el icono de FrontPage2003 del escritorio

Unidad 1.
Vamos a ver una pequea introduccin a FrontPage2003. Vamos a aprender para qu sirve esta
aplicacin y cmo nos puede ayudar a hacer desde una sencilla pgina Web hasta un sitio completo en
Internet. Tambin haremos una pgina Web para que veamos lo fcil que puede llegar a ser.

Qu es FrontPage2003 y para qu sirve?

FrontPage2003 es un programa con el cual podemos crear pginas Web de una forma visual. Gracias a

esto el usuario slo tiene que concentrarse en el diseo de su Web sin necesidad de saber programar. No

obstante, un usuario avanzado puede usar las caractersticas avanzadas de FrontPage2003 para hacer

sitios Web ms complejos.

Una pgina Web es un documento que puede ser visualizado con un navegador de Internet. Un sitio Web

es un conjunto de pginas Web relacionadas entre s. Por ejemplo, este documento es una pgina Web, y

pertenece a un sitio Web, Aulaclic.

FrontPage2003 nos permite disear y modificar tanto el sitio como cada pgina individualmente, y nos

ayuda en su edicin y mantenimiento.

Integracin con Office2003

FrontPage2003 forma parte del paquete de aplicaciones Office2003,


Office2003 y comparte muchas de las

caractersticas del resto de programas del Office, tanto en procedimientos como en el interfaz. Gracias a

esto, muchas de las tareas que nos son familiares en Word nos servirn para FrontPage y viceversa.

Algunas de las caractersticas que comparten son:

Los mens y los iconos son similares entre cada aplicacin y realizan la misma funcin.

El portapapeles de Office es ahora comn a todas las aplicaciones Office, y permite guardar de forma

temporal grficos y textos de distintos documentos de Office y de otros programas, y pegarlos en un

documento de Office. Por ejemplo, puedes copiar textos de un documento de Word


Word y pegarlos en una

pgina Web de FrontPage,


FrontPage y despus abrir una hoja de clculo de Excel,
Excel y copiar una tabla de Excel a

Word.
Word

You might also like