Professional Documents
Culture Documents
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
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:
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
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
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.
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:
</BODY>
</HTML>
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>
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();
<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>
</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
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
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>
<HEAD><TITLE>Esto es el titulo</TITLE></HEAD>
<BODY>
<SCRIPT LANGUAJE="Javascript">
document.write("<H1>Esto es una cabecera.</H1>");
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
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:
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.
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.
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
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).
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
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:
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.
aparece en el organigrama:
Como
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.
Podemos aadir una barra de vnculos. Una barra de vnculos es un conjunto de vnculos que nos pueden se
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.
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:
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.
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.
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
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.
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:
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.
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.
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:
Como ya hemos visto, usar una plantilla es bien fcil. Pulsamos en Archivo - Nuev
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.
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.
Naturalmente, modificaremos slo los que necesitemos. Vamos a guardar la hoja de estilos y vamos a usarla.
Pulsamos en guardar
Vamos a aplicar la hoja de estilos a una pgina web. Creamos la siguiente pgina:
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:
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:
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.
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
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
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
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....
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.
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):
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>
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.
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.
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.
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....
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
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..
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
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:
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
formulario sea el mismo independientemente del monitor donde se muestre. Se recomienda activar esta opcin
Hacemos clic en Siguiente> para continuar.
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
Imagen: Nos permite poner imgenes en un formulario. Podemos usar imgenes como botones.
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.
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.
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:
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
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
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:
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.
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
Es importante saber que cada marco tiene un nombre, que nos sir
como ms adelante explicaremos.
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
Aqu puedes realizar un ejercicio paso a paso interactivo para practicar lo visto en la unidad.
una tabla
de color azul
Esto es
con Imagen
una ta
de fon
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.
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:
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.
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.
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.
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.
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.
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.
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
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
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.
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
de la barra formato.
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
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.
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
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.
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.
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
esta carpeta.
Para practicar lo que acabamos de explicar puedes realizar el ejercicio paso a paso Aadir texto Wordart.
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
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.
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
la vista Exploracin y
son:
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
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.
Espaciado
Esto es un te
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
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.
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
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:
Este prraf
primera lnea
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.
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
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
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
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
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:
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
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.
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.
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
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.
sobre algn elemento. Por ejemplo, si lo dejamos sobre el icono de guardar, nos aparece lo si
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
asociado. Con la tercera, editaremos el cdigo en HTML, opcin slo para exper
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
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
que tendr botones para aceptar o cancelar la accin. Se distinguen porque el nomb
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.
La barra de ttulo contiene el nombre del programa (Microsoft FrontPage) y el nombre del fichero con el que est
La barra de mens
nuestro trabajo. Ms adelante, cuando modifiquemos la web, bastar con hacer clic en el icono de Guardar y el
nombre que le dimos.
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
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
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.
. 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
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.
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.
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.
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.
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
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
FrontPage2003 nos permite disear y modificar tanto el sitio como cada pgina individualmente, y nos
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.
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
Word.
Word