INDICE

HERRAMIENTAS DE EDICION DE PAGINAS WEB ........................................................................................... 2

1. HTML (LENGUAJE DE MARCACIN DE HIPERTEXTO) ........................................................................ 3
1.1. Estructura bsica de un documento HTML ............................................................................................ 3
1.2. Ttulos ..................................................................................................................................................................... 4
1.3. Estilos de fuentes ................................................................................................................................................ 4
1.4. Enlaces .................................................................................................................................................................... 4
1.5. Enlace a otra pgina local ............................................................................................................................. 5
1.6. Enlace a una direccin de Internet ............................................................................................................ 5
1.7. Imgenes ................................................................................................................................................................ 5
1.8. Ejemplo de cdigo .............................................................................................................................................. 6
2. WORD COMO EDITOR DE PGINAS WEB ................................................................................................... 7
2.1. Crear o editar pginas Web .......................................................................................................................... 7
2.2. Insertar y modificar hiperenlaces .............................................................................................................. 8
2.3. Guardar la pgina .......................................................................................................................................... 11
2.4. Convertir a HTML ........................................................................................................................................... 13
2.5. Publicar en Internet ....................................................................................................................................... 14
3. FRONPAGE ............................................................................................................................................................. 15
3.1. Qu es FrontPage y para qu sirve? ...................................................................................................... 15
3.2. Integracin con Office ................................................................................................................................... 15
3.3. Mi primer documento con FrontPage .................................................................................................... 15
3.4. Crear la pgina Web. ..................................................................................................................................... 16
3.5. Guardar la pgina Web. ............................................................................................................................... 17
3.6. Visualizar la Web. ........................................................................................................................................... 17
3.7. Elementos bsicos de FrontPage .............................................................................................................. 18
3.8. Configuracin de un sitio Web .................................................................................................................. 22
3.9. Formateo de texto .......................................................................................................................................... 23
3.10. Imgenes .......................................................................................................................................................... 25
3.11. Hipervnculos ............................................................................................................................................... 29
3.12. Tablas ................................................................................................................................................................ 30
4. EDITORES GRATUITOS EN INTERNET ..................................................................................................... 33
4.1. Programas editores de pginas Web ..................................................................................................... 33
4.2. Editores on-line de pginas Web ............................................................................................................. 34
4.3. Cuadro comparativo de creadores de pginas Web ........................................................................ 35

HERRAMIENTAS DE EDICION DE PAGINAS WEB

Qu es un editor Web?

Un editor Web sera cualquier aplicacin que nos permita crear, editar y guardar una
pgina Web. Una pgina no es ms que un archivo de texto, por lo que cualquier
programa que nos permita editar texto, puede funcionar como un editor Web.
Podemos considerar tres categoras de editores Web:
-

Editores de texto.
Nos permiten editar el cdigo fuente puro y duro, como puede ser el bloc de notas.

Editores de HTML.
Funcionan como los editores de texto, pero pueden tener algunas opciones ms
avanzadas. Como mostrar las etiquetas de colores, o cerrarlas automticamente.

Editores WYSIWYG.
Por un lado, nos permiten editar el cdigo fuente como los editores de HTML. Y
por otro, nos permiten trabajar en vista de diseo. Es decir, ver la pgina como se
vera en un navegador mientras la editamos. La mayora de estos editores suelen
tener opciones para realizar tareas adicionales de forma ms fcil, como por
ejemplo, crear elementos de un formulario, insertar mens, e incluso cdigo
JavaScript tipo AJAX. Editores de este tipo pueden ser Amaya o Dreamweaver.
Escribir directamente el cdigo fuente nos da un mayor control sobre la pgina,
obteniendo un cdigo ms preciso y sin etiquetas innecesarias. Pero el tener que
escribir cada etiqueta hace que sea mucho ms lento y que debamos conocer
mejor el HTML.
Utilizar editores WYSIWYG resulta ms cmodo. Ya que no hemos de preocuparnos
por la mayora de las etiquetas, y escribimos el texto como lo haramos en un
procesador de texto. No obstante, no siempre se generar el cdigo que
queramos. Y sobre todo si utilizamos editores no especializados, como Word que
permite guardar como pgina web, aunque generando un cdigo muy "sucio". Por
ejemplo, crear un html con Word en el que slo ponga "Hola mundo", con letra
Arial y tamao 16px, genera un archivo de 22KB y 400 lneas de cdigo.

Lo habitual es realizar el grueso de la pgina en vista de diseo, sobre todo escribir el

texto. Y despus, cosas ms concretas y correcciones, realizarlas sobre el cdigo fuente.
Esto tambin depende de los conocimientos de cada uno.

Nota: Aunque en un editor WYSIWYG podemos ver cmo quedar la pgina, siempre
hemos de probarla en los navegadores ms utilizados, en este momento Internet Explorer
y Mozilla Firefox.
1. HTML (LENGUAJE DE MARCACIN DE HIPERTEXTO)
El HTML ( HiperText Markup Language ) es el lenguaje utilizado para representar
documentos en la WWW (World Wide Web). Adems de texto normal incluye tambin,
elementos multimedia (grficos, vdeo, audio) y existen enlaces (links) que permiten saltar
a otras partes del documento o a otro sitio cualquiera de Internet.
Otra caracterstica muy importante de este lenguaje es que es portable, es decir, se
pueden visualizar las pginas con cualquier sistema operativo y, por supuesto tambin
crearlas.
Las etiquetas constituyen la filosofa de este lenguaje. Por medio de ellas se pueden
controlar los elementos tipogrficos del texto: tipo, color y tamao de las fuentes, el estilo
(negrita, cursiva, etc.), as como tambin la inclusin de tablas, listas, formularios, la
insercin de fotos, sonidos, fondos, los enlaces mencionados anteriormente. etc.
Las etiquetas se pueden modificar por medio de sus atributos, stos son del tipo
atributo="valor" y se colocan detrs del nombre de la etiqueta.
El nombre de la etiqueta y sus atributos se colocan entre los smbolos < y > y
normalmente se usan dos, una de inicio y otra final, para conseguir el efecto deseado.
1.1. Estructura bsica de un documento HTML
Todos los documentos HTML tienen la estructura que se muestra a continuacin,
aunque la etiqueta <body> puede ser sustituida por <frameset> para un tipo de
pginas que dividen la ventana del navegador en varios cuadros (frames).
<HTML>
<HEAD>
<TITLE>Ttulo de la pgina</TITLE>
... </HEAD>
<BODY> Aqu ira el contenido de la pgina
</BODY>
</HTML>
La cabecera es la seccin comprendida entre <head> y </head>. En ella se encuentra

necesariamente el ttulo (entre las etiquetas <title> y </title>).

El cuerpo (body) del documento Html es normalmente lo ms importante. Es aqu
donde debemos colocar el contenido de nuestra pgina: texto, fotos, etc.
El cuerpo est delimitado por las etiquetas <body> y </body> La etiqueta <body> suele
contener algunos atributos.
1.2. Ttulos
Los ttulos o encabezamientos se emplean al comienzo de una seccin. Las etiquetas
son: <h1> Ttulo </h1> <h2> Ttulo </h2> <h3> Ttulo </h3>
<h4> Ttulo </h4>
<h5> Ttulo </h5>
<h6> Ttulo </h6>
1.3. Estilos de fuentes
Como ves en la tabla es muy sencillo conseguir los efectos deseados, solamente tienes
que colocar el texto entre las etiquetas adecuadas.
<B>Texto en Negrita</b>
1.4. Enlaces
Probablemente la caracterstica que ms ha influido, junto con las imgenes, en el
espectacular desarrollo de la Web hayan sido los enlaces (links). Un enlace aparece
generalmente como un texto azul subrayado y cuando situamos el cursor sobre l se
transforma en una mano con el dedo ndice extendido. Si pulsamos sobre el enlace
saltamos a otra parte del documento, a otro documento situado en cualquier lugar, o
incluso se abre el programa de correo para enviar un mensaje a la direccin indicada.
En general los enlaces tienen la siguiente estructura
<A HREF="URL"> Texto del enlace</A> Enlace a otro lugar del mismo documento
En este caso la URL se sustituye por un marcador en la misma pgina. El marcador
puede ser texto colocado en el lugar al que queremos saltar. No importa lo que sea ya
que no se ver.
Veamos un ejemplo para saltar al inicio de esta pgina. Escribiramos en el lugar desde
el que queremos saltar: <A HREF="#inicio"> Ir al Inicio</A>
Y en el sitio exacto adonde queremos saltar, debemos poner la siguiente etiqueta: <A
NAME="inicio"> </A>

1.5. Enlace a otra pgina local

En este caso la URL se dar de forma relativa (igual que para poner un fondo a la
pgina). Por ejemplo si tenemos dos pginas en el mismo directorio pagina1.htm y
pagina2.htm y queremos poner un enlace desde la pagina1.htm a la pagina2.htm
debemos escribir
<a href="pagina2.htm">Ir a pagina2</a>
Con esto es suficiente, no hay que crear ningn marcador a no ser que quieras ir a un
sitio concreto de la pagina2.htm. En ese caso tendras que poner en el sitio adonde
quieres llegar de la pagina2.htm
<a name="sitio"></a> y en la pagina1.htm
<a href="pagina2.htm#sitio>Ir a sitio de la pgina 2</a>
1.6. Enlace a una direccin de Internet
Ahora la URL debe darse de forma absoluta, tal como la ves en la ventana de direccin
del navegador, es decir:
<A HREF="http://www.umayor.cl/um/facultad/fcee-home">FCEE Universidad
Mayor</A> Enlace con una direccin de correo Este es un enlace un poco diferente,
veamos un ejemplo <A HREF="mailto: alejandra.acuna@mayor.cl"> Alejandra Acua
</A>
1.7. Imgenes
La etiqueta para incluir una imagen es la siguiente: <IMG SRC="URL">
(no tiene etiqueta de cierre)
donde URL es la direccin de la imagen. La URL puede ser relativa o absoluta. Unos
ejemplos aclararn este concepto:
<IMG SRC="gifs/nido.gif">
Esta es una direccin relativa.
<IMG SRC=" http://nssdc.gsfc.nasa.gov/image/planetary/saturn/saturn_family.jpg">
insertar en el lugar del documento se puso la etiqueta una foto de Saturno con dos
de sus lunas (Tetis y Dione), siempre que estuvieras conectado a Internet. Esta es una
direccin absoluta, ya que la direccin no depende del directorio donde est ubicada
la pgina que la contiene.

1.8. Ejemplo de cdigo

HTML <HTML> <HEAD> <TITLE>Un Titulo para el Browser de turno </TITLE>
</HEAD>
<BODY>
<!-- Aqu va todo los comentarios -->
<H1>Otro t&iacute;tulo, esta vez m&aacute;s largo. </H1>
<P> <IMG SRC= "./felix.gif "ALIGN= "MIDDLE " ALT= "EL Gato Felix ">Hoola.
<P>Esto es un prrafo con informacin sper importante. Ntese que las lneas salen
pegadas aun dejando espacios, saltos de lnea, etc. <BR> &#161 Si pongo esto si
<STRONG>cambia </STRONG> de lnea!
<P>Otro prrafo, esto ya es un poco extenso.
<H3>Pongamos un subttulo<H3> <HR>
<UL>
<LI> Esto es una lista no ordenada.
<LI> Las listas quedan mejor si tienen varios elementos.
</UL>
.....................................................
</BODY>
</HTML>

2. WORD COMO EDITOR DE PGINAS WEB1

Microsoft dispone de un programa llamado Expression Web que est especialmente
diseado para crear pginas web, pero su utilizacin requiere un cierto nivel de
especializacin en el campo. Dado que una pgina web, en el fondo, no es ms que texto,
Word incorpora un editor de pginas Web bsico para aquellos usuarios que necesiten
publicar contenido en internet de una forma sencilla. Esto nos permite transformar un
documento de Word en una pgina en lenguaje HTML sin conocimientos previos de
programacin o diseo.

2.1. Crear o editar pginas Web
-
-

Para crear una nueva pgina, lo haremos creando un documento normal. Ya nos
preocuparemos a la hora de guardarlo, de hacerlo como una pgina Web.
Para editar una pgina ya existente:

Si la pgina est en nuestro disco duro, podemos buscarla y abrirla como

un documento normal, a travs del dilogo Abrir. O buscar el archivo, y
hacer clic derecho sobre l, y en el men contextual, elegir Abrir con >
Microsoft Office Word.

Si la pgina est en Internet, es decir, no disponemos de ella sino que

est alojada en un servidor, deberemos escribir su direccin web
completa (por ejemplo www.aulaclic.es/ejemplo.htm) en el cuadro de
dilogo Abrir. Lo haremos en la caja de texto donde normalmente se
indica el nombre del archivo.

Para trabajar con una pgina web, se dispone de la vista Diseo Web, en la
barra de vistas o en la pestaa Vistas.
A partir de este punto, se trabaja con la pgina de la forma que se est
acostumbrado para el resto de documentos. Por las caractersticas de HTML,
una pgina Web no soporta todos los formato de Word, y al guardarla, se
modificarn.

1

http://www.aulaclic.es/word-2010/t_23_1.htm

2.2. Insertar y modificar hiperenlaces

Un hiperenlace (o hipervnculo) puede ser una palabra, frase o grfico. Se
caracteriza porque al hacer clic sobre l se salta a la pgina web a la que apunta
el hiperenlace. Cuando se pasa el cursor por encima de un hiperenlace, este
cambia de forma y toma la forma de una mano.
Los hiperenlaces pueden llevar a otra parte dentro de la misma pgina, a otra
pgina en el mismo servidor o en uno distinto, a una direccin de correo
electrnico, a un servidor ftp, etc.
Para insertar un hiperenlace ir a la pestaa Insertar, y pulsar el botn
Hipervnculo.

Aparecer un cuadro de dilogo como el que se ve en la imagen, se debe

rellenar el campo Texto y el campo Direccin, ver imagen:

Texto.

Es el texto que contiene el hiperenlace, puede seleccionarlo en el documento

con lo cual ya aparecer en este campo o escribirlo. En el caso de crear un
enlace a partir de una imagen, se debe seleccionar antes de hacer clic en el
botn de hiperenlace, y se ver que el texto que se muestra es <Seleccin del
documento>.

Vincular a.

Aqu se tiene cuatro opciones:

a. Archivo o pgina Web existente. En el campo Direccin escribir una
direccin completa de Internet (URL) si se quiere enlazar con una pgina de
Internet, por ejemplo, http://www.aulaclic.com/index.htm .
b. Lugar de este documento. Utilizar esta opcin si se quiere que el
hipervnculo lleve a un lugar en el mismo documento. Previamente se debe
haber insertado en el documento el marcador al que se hace referencia,
esto se hace colocando en el lugar donde se desea insertar el marcador y
desde la pestaa Insertar, seleccionar Marcador para que aparezca un
cuadro de dilogo donde se escribir el nombre del marcador.
c. Crear nuevo documento. El hiperenlace llevar al documento que se va a
crear en este momento. En el cuadro de dilogo que aparecer escribir el
nombre del archivo nuevo en el campo Nombre del nuevo documento. En el
documento original se rellenar el campo Direccin con el nombre de este
nuevo documento, y se cerrar el cuadro de dilogo.
d. Direccin de correo electrnico. En el campo Direccin escribir una
direccin de correo, como por ejemplo mailto:webmaster@aulaclic.com. Al
hacer clic en el hiperenlace se abrir el programa de correo del navegador
(por ejemplo, Outlook Express) ya preparado para enviar el correo a esta
direccin.
En la parte derecha del cuadro de dilogo tenemos unos botones que vamos a
ver ahora.

Info. de pantalla... Al hacer clic aparece este cuadro de dilogo para que se
introduzca el texto de la sugerencia. Cuando el usuario coloque el cursor
encima del hiperenlace y lo mantenga un cierto tiempo aparecer un
cuadrado amarillo con el texto que hemos introducido en la sugerencia.
Es una buena forma de dar una explicacin adicional sobre el contenido del
hiperenlace. Slo funcionan con IE 4.0 o superior.

Si se quiere que el hiperenlace lleve a un archivo, con este botn se
puede elegir ese archivo en el disco. Se abrir una ventana como la que
aparece cuando utilizamos el comando Abrir archivo.
Una vez encontrado el archivo pulsar INTRO y se copiar en el campo
Direccin.

Si se est conectado a Internet, este botn abrir el navegador para
que se busque la pgina a la que se desea que lleve el hiperenlace que se
est insertando. La direccin (URL) de la pgina que se est visitando se
copiar en el campo Direccin.

Marcador... Muestra los marcadores que contiene la pgina web que se

tiene seleccionada (si es que los tiene). Basta hacer clic en uno de los
enlaces que se mostrarn en una ventana como esta para que el marcador
se aada a la direccin de la pgina. Cuando el usuario pulse en el
hiperenlace, el navegador se colocar en la posicin de la pgina en la que
se insert el marcador.

Marco de destino... Una pgina web puede estar dividida en marcos o

frames, aqu podemos elegir en qu marco queremos que se abra la pgina
apuntada por el hipervnculo. Al hacer clic en este botn se abrir un cuadro
de dilogo como el que ves aqu para que selecciones el marco de destino.
Puedes elegir entre las opciones que ves en la imagen.

Nota: Por defecto, si se escribe una direccin, como por ejemplo

www.aulaClic.es, Word genera automticamente un hiperenlace a esa direccin.
-

Modificar enlaces

Al seleccionar un elemento que contiene un hiperenlace y pulsar el botn

derecho del ratn aparece la ventana que se ve aqu, al elegir la opcin
Modificar hipervnculo se abrir el cuadro de dilogo Insertar Hipervnculo,
donde se puede modificar todas las caractersticas del hipervnculo.

2.3. Guardar la pgina
Si se parte de un documento en blanco, este no ser realmente una pgina Web

hasta que no lo guardemos como tal. Y si se ha abierto una pgina directamente

desde su servidor, deberemos guardarla en nuestro disco duro para salvar los
cambios.
Para guardar el documento, basta con pulsar la pestaa Archivo y la opcin
Guardar o Guardar como. El proceso ser el mismo, tanto si se trata de una
pgina nueva como si queremos guardar un documento de Word como pgina
web.

El dilogo Guardar como ya se conoce. Lo que se debe modificar es el tipo de
archivo, eligiendo Pgina web en el desplegable donde se especifica el tipo:.
Puede elegir varias opciones:

La opcin Pgina web, filtrada, dar el mismo resultado que el tipo Pgina web,
pero aade menos cdigo a la pgina generada por lo que a menudo se prefiere
esta opcin.
Si en la pgina hay elementos especiales como imgenes, estas se guardan cada
una en un archivo y estos archivos especiales en una carpeta con el mismo
nombre que la pgina web.
Si elegimos Pagina Web de un slo archivo, se genera un nico archivo que lleva
incorporadas las imgenes, de la misma forma que en el .doc tenemos las
imgenes incrustadas dentro del documento, en un archivo .mht las imgenes
estarn incrustadas en el documento.
Al elegir cualquiera de estos tres tipos de archivo, aparece una caja de texto
donde se especifica el Ttulo de la pgina. Para cambiarlo debemos hacer clic en
el botn Cambiar ttulo.

Este ttulo no tiene nada que ver con el nombre del documento Web que
damos cuando se guarda el archivo. Aqu se refiere al propio ttulo de la pgina
Web. Este ttulo es el que se ver en la barra de ttulo del navegador y en lista
de Favoritos, cuando se guarde nuestra pgina en Favoritos, y tambin el ttulo
que se suele ver cuando un buscador lista nuestra pgina.
Pulsando en el botn Herramientas, encontramos las Opciones Web, donde se
puede elegir algunas opciones ms avanzadas sobre la web.
Nota: Del mismo modo, podemos guardar una pgina Web en un formato de
documento de Word, escogiendo el tipo adecuado.
2.4. Convertir a HTML
Cuando se guarda el documento, Word lo convierte a HTML, pero hay algunas
caractersticas de formato que no estn disponibles en HTML y, por lo tanto, no
sern visibles al ver la pgina en un navegador como Internet Explorer, Mozilla
Firefox o Netscape Navegator.
Por ejemplo, las letras en relieve, los efectos sobre caracteres, el doble tachado

y el contorno no tendrn ningn efecto sobre los caracteres en HTML, es decir,

que en HTML estas caractersticas de formato desaparecen.
Hay otras caractersticas de formato que varan de aspecto en HTML, por
ejemplo, todos los estilos de bordes de las tablas y cuadros de texto son vistos
en HTML como borde simple; el texto en varias columnas es convertido en una
sola columna; las notas al pie son desplazadas hasta el final de la pgina HTML;
la alineacin de los grficos y tablas respecto al texto tambin puede variar
ligeramente; el texto en vertical es convertido en texto horizontal.
Por ltimo, hay algunos elementos que desaparecen en HTML, por ejemplo, los
nmeros de lnea, los encabezados y pies de pgina y los mrgenes de la pgina.
Si surge alguna de estas incompatibilidades, Word nos lo comunicar en un
mensaje.
2.5. Publicar en Internet
Una vez acabada la pgina Web se puede publicar en Internet y podr ser vista
desde cualquier parte del mundo simplemente tiene que estar almacenada en
un servidor de internet, para ello slo se tiene que seguir algunos pasos.
Cualquiera puede tener un servidor de Internet, slo hace falta un ordenador,
una direccin IP fija, una conexin telefnica y un software adecuado, como el
servidor Apache que adems es gratuito.
De todas formas, crear un servidor es bastante ms complicado. Sin embargo
hay una forma mucho ms fcil de publicar en Internet: basta utilizar los
servicios gratuitos que ofrecen algunos servidores comerciales, a cambio de un
poco de publicidad.
-

Obtener espacio gratuito.

Inscribirse en un sitio que ofrezca servicio de almacenamiento web gratuito.

Colocar tus pginas en internet.

Una vez elegido el espacio web donde hospedar las pginas debe seguir las
instrucciones que darn para transferir las pginas web al servidor.
Normalmente se hace mediante un programa de transferencia por FTP,
como Ws_Ftp, utilizando el usuario, contrasea y DSN que proporcionen.
Una vez acceda se vers dos ventanas, una con los archivos de su
computador y la otra con los archivos en el servidor Web, y mediante unos
botones podr pasar los archivos de un lado al otro. As de fcil.

A partir del momento en que transfiera los archivos ya se podr ver las pginas
en internet tecleando la direccin (URL) que le asignen. Por ejemplo.
http://members.es.tripod.de/tunombre/tupagina.htm.

3. FRONPAGE2
3.1. Qu es FrontPage y para qu sirve?
FrontPage 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 FrontPage para hacer sitios Web muy 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.
FrontPage nos permite disear y modificar tanto el sitio como cada pgina, y nos
ayuda en su edicin y mantenimiento.
3.2. Integracin con Office
FrontPage es parte del paquete de aplicaciones OfficeXP, 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 y pegarlos en una pgina Web de
FrontPage, y despus abrir una hoja de clculo de Excel, y copiar una tabla de Excel
a Word.
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, ficheros de Access, etc.
3.3. Mi primer documento con FrontPage
Vamos a construir una sencilla pgina Web para demostrar lo sencillo y potente
que puede llegar a ser FrontPage. En primer lugar, veamos las dos formas bsicas
de arrancar FrontPage.

2

http://www.lawebdelprogramador.com/cursos/Front_Page/5385-Manual_Basico_de_FrontPage_2007.html

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, aparece otra lista con los programas que hay
instalados en tu ordenador buscar Microsoft FrontPage, hacer clic sobre l, y se
arrancar el programa.
Desde el icono de FrontPage del escritorio
3.4. Crear la pgina Web.
Al arrancar el programa, nos aparece por defecto una pgina web en blanco en la
que podemos trabajar.
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 abre, en Hipervnculo. En Direccin escribiremos lo
siguiente: http://www.elpais.com.uy De esta forma crearemos un vnculo a otra
pgina Web, a la que podremos viajar si disponemos de conexin a Internet.
Ntese que el texto cambia de color y aparece subrayado para indicar que es un
hipervnculo. La pantalla nos mostrar algo similar a esto:

Un hipervnculo, como ms tarde explicaremos, nos permite navegar por

Internet, ya que nos permite cambiar de una pgina Web a otra.
3.5. Guardar la pgina Web.
Vamos a guardar la pgina en el disco duro.
La barra de herramientas contiene iconos para ejecutar de forma inmediata
algunas de las operaciones ms habituales, como Guardar, Abrir, Imprimir , etc.
Pulsamos en el icono Guardar . Al ser la primera vez que guardamos, el sistema nos
pedir un nombre para el archivo, y nos sugerir uno. Los nombres de pginas web
suelen terminar en .htm o .html. Sin embargo, no es necesario escribir esta
terminacin si no queremos. FrontPage lo aadir automticamente.
En la pantalla podemos ver como el sistema nos sugiere index.htm
Hacemos clic en index.htm, lo borramos y escribimos como nombre 'hola.htm' (sin
las comillas). Hacemos clic en Aceptar y el ordenador guardar nuestro trabajo.
Ms adelante, cuando modifiquemos la web, bastar con hacer clic en el icono de
Guardar y el ordenador guardar el documento con el nombre que le dimos.
Podemos ponerle a la pgina web un ttulo. Para ello, antes de guardar la web,
hemos de pulsar en el botn Cambiar ttulo, y ponerle un ttulo que aparecer en la
ventana del navegador.
3.6. Visualizar la Web.
Ahora vamos a visualizar la pgina. Para visualizar el archivo, hacemos clic sobre la
etiqueta en la que pone Vista previa, y el sistema cargar el documento como si
fuera una pgina Web. Ahora, si disponemos de conexin a Internet, al pulsar sobre
las palabras "el Pas", navegaremos a esa pgina. Si no disponemos de conexin,
sencillamente aparecer un mensaje de error.
Finalmente, para cerrar FrontPage, puedes utilizar cualquiera de las siguientes
operaciones:
-
-
-

Hacer clic en el botn cerrar

Pulsar la combinacin de teclas ALT + F4.
Hacer clic sobre el men Archivo y elegir la opcin Salir.

FRONTP AGE

3.7. Elementos bsicos de FrontPage

Elementos de la pantalla inicial.
Al arrancar FrontPage aparece una pantalla inicial como sta, vamos a ver sus
componentes fundamentales. As conoceremos los nombres de los diferentes
elementos y ser ms fcil entender el resto del curso. La pantalla que se muestra a
continuacin pueden no coincidir exactamente con la que ves en tu ordenador, ya
que cada usuario puede decidir qu elementos quiere que se vean en cada
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 archivo con el que estamos trabajando en este momento
(pagina_nueva.htm). En el extremo de la derecha estn los botones para minimizar,
maximizar/restaurar y cerrar.
La barra de mens
La barra de mens contiene las operaciones de FrontPage, agrupadas en mens
desplegables. Al hacer clic en Insertar, por ejemplo, veremos las 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 ms rpidamente desde los iconos de las 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 simultneamente la tecla alt y la letra
subrayada, por ejemplo si pulsamos alt+a se abre la opcin Archivo.
La barra de mens tiene un comportamiento "inteligente", que consiste,
bsicamente, en mostrar slo los comandos ms importantes y los que el usuario
va utilizando. Si deseas ms informacin sobre los mens desplegables.

Los mens desplegables de la barra de mens contienen tres tipos bsicos de
elementos:
Comandos inmediatos. Se ejecutan de forma inmediata al hacer clic sobre ellos. Se
reconocen porque a la derecha del nombre del comando, o no aparece nada o bien

aparece la combinacin de teclas para ejecutarlo desde el teclado. Por ejemplo, en

el men Insertar >>> lnea horizontal.
Opcin con cuadro de dilogo. Al hacer clic en la opcin aparece un cuadro de
dilogo donde nos pedir ms informacin y que tendr botones para aceptar o
cancelar la accin. Se distinguen porque el nombre acaba con puntos suspensivos.
Por ejemplo, en el men Insertar >>> Fecha y hora...
Opcin con otro men desplegable. Al situarse sobre ste, se abre un nuevo men
a su lado con ms opciones para que elijamos una de ellas. Se reconocen porque
tienen un tringulo a la derecha. Por ejemplo, Insertar >>> Imagen.

Las barras de herramientas.
Las barras de herramientas contienen iconos para ejecutar de forma inmediata
algunas de las operaciones ms habituales, como Guardar , Abrir , Imprimir , etc.
La barra de Formato.
La barra de Formato se encuentra en la parte superior de la pantalla y contiene
indicaciones sobre el estado actual de formateo del texto. Como en otras
aplicaciones de Office, podemos definir en cada momento qu clase de texto
vamos a crear: Estilo, tipo de letras, tamao, negrita, cursiva, subrayado,
alineacin, etc.

La barra de Vistas.
La barra de Vistas se encuentra en la parte izquierda de la pantalla y nos ayuda a
administrar la Web. Contiene los siguientes iconos:
Pgina: Al hacer clic aqu, entramos en el modo de edicin y creacin
de pginas Web. Es el que usaremos para crear y modificar nuestras
pginas Web.
Carpetas: Al hacer clic aqu, FrontPage nos muestra los archivos de
nuestro sitio, en forma de carpetas y documentos. Nos permite
administrar el sitio Web y verlo como lo veramos en el explorador de
Windows.
Informes: Al hacer clic aqu, FrontPage nos informar sobre diferentes
aspectos del sitio Web.
Exploracin: Al hacer clic aqu, veremos la estructura de nuestro sitio
Web en forma de esquema.
Hipervnculos: Al hacer clic aqu, nos aparece una relacin de todas las
pginas enlazadas de la Web.
Tareas: Al hacer clic aqu, nos aparece una pequea lista de tareas que
podemos usar sobre todo si trabajamos en grupo.


Los modos de Edicin de pgina.
Se encuentran en la parte baja de la pgina. Son Normal, HTML y Vista Previa. Nos
ofrecen, respectivamente, la vista habitual de trabajo, la vista del cdigo HTML
usado y una vista previa del resultado final de la Web en un navegador. Nosotros
usaremos casi siempre la vista Normal, que es la que nos permite editar la Web de
forma visual. Con la segunda, editaremos el cdigo en HTML, opcin slo para
expertos y, finalmente, con Vista previa veremos nuestra pgina como desde un
navegador. Esta ltima no es un modo de edicin propiamente dicho, pues solo nos
permite visualizar un borrador de cmo ser la pgina Web.
Hay operaciones que no estn disponibles en un determinado momento. Se
reconocen porque tienen el color atenuado. Existen muchas ms barras de
herramientas y las iremos viendo a lo largo del curso. Adems nos podemos definir
nuestras propias barras. Las barras se pueden ocultar. Para ello pulsa con el botn
derecho del ratn en una de ellas. Nos aparecer una lista de las barras activas.
Basta con marcarlas o no para mostrarlas y ocultarlas.

3.8. Configuracin de un sitio Web

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, no es lo mismo disear un sitio Web para un uso
personal que para una empresa. Cada uno tiene sus necesidades y planificar con
antelacin qu es lo que vamos a hacer nos puede evitar 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 usar un alojamiento Web gratuito
(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 caso de empresas pequeas, o muy
complejos, en el caso de grandes empresas. Normalmente tienen una
direccin propia (www.nombre_de_la_empresa.com) y almacenan
informacin corporativa.
Sitio de una tienda online: Son los sitios diseados para vender por Internet.
Cualquier empresa, grande o pequea, pueden llegar a cualquier cliente 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 nuestra Web, y basarnos en l a la hora del diseo.
Naturalmente es conveniente seguir una determinada esttica relacionada con la
clase de sitio Web que estemos diseando, as como evitar recargar en exceso las
pginas. FrontPage nos proporciona diversos temas ya definidos que nos ayudarn
a dotar de una apariencia adecuada a nuestro sitio Web.
Crear un boceto de la Web. Estructura de archivos.

FRONTP AGE
A la hora de disear un sitio Web, es conveniente disear un boceto sobre cmo va
a ser la Web. Tenemos que decidir cmo vamos a estructurarla.
Lo ms sencillo es no estructurarla, poniendo todos los archivos en el mismo
directorio. Esto se suele hacer en sitios personales, ya que el nmero de ficheros es
pequeo. Sin embargo este es un mal hbito, ya que si la Web crece, acabaremos
perdidos en un mar de archivos.
Por ello es conveniente hacer, por lo menos, una pequea divisin, poniendo los
archivos de cada clase en un 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, nos acabar sucediendo lo
mismo. Por ello en los sitios Web complejos se suele dividir el sitio Web en partes y
cada parte se almacena en un lugar distinto. Cada uno de estos lugares posee sus
propias carpetas.
FrontPage nos proporciona las herramientas adecuadas para poder estructurar
nuestro sitio Web. Estas herramientas son los iconos Carpetas y Exploracin en la
barra de vistas.
3.9. Formateo de texto
Vamos a ver cmo formatear texto en FrontPage. Veremos como darle al texto y a
la pgina la apariencia que deseemos. Y al final del tema 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 tendremos una hoja en blanco en la que practicar.
FrontPage2002 dispone de una interfaz similar a un procesador de textos como el
Word, por lo que si lo hemos utilizado no nos resultar nada difcil aprender a hacer
lo mismo en FrontPage.
Para Insertar texto lo nico que debemos hacer es escribir en la pantalla. Como en
el Word, el texto aparecer a medida que lo vayamos tecleando. Para terminar un
prrafo, slo hay que pulsar la tecla Enter. Una vez introducido el texto podemos
cambiar su aspecto utilizando las distintas opciones que nos ofrece la barra de
Formato que describiremos a continuacin:
-

Para cambiar el tipo de letra lo que tenemos que hacer es pulsar en el

cuadro desplegable de Fuente . A partir de entonces el texto que se
introduzca ser con ese tipo de letra. Si lo que queremos en cambio es
cambiar el tipo de letra de un trozo de texto que ya hemos escrito, debemos

seleccionarlo y cambiar entonces el tipo de letra como hemos hecho antes.

Ntese que slo se producir el cambio en ese trozo de texto, por 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 Fuente. A partir de entonces el texto que se introduzca
ser con ese tamao de letra. Si lo que queremos en cambio es cambiar el
tamao de letra de un trozo de texto que ya hemos escrito, debemos
seleccionarlo y cambiar entonces el tamao de letra como hemos hecho
antes. Ntese que slo se producir el cambio en ese trozo de texto, por lo
que al escribir en otra zona lo haremos con el tamao de letra que tenamos
previamente.
Para hacer la letra con efecto negrita, cursiva o subrayado tenemos que
pulsar el botn N, el botn K o el botn S. respectivamente. A partir de
entonces el texto que se introduzca ser negrita, cursiva o subrayado. Si lo
que queremos en cambio es hacer que un trozo de texto tenga estas
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 texto a formatear y pulsar en los iconos apropiados
para aplicar el efecto que deseemos. Existen muchos tipos de efectos, que
podremos aplicar seleccionando el texto y haciendo clic en Formato >>> Fuente.
Uso de prrafos.
Para introducir prrafos mientras escribimos un texto, debemos pulsar la tecla
Enter. FrontPage automticamente comenzar un nuevo prrafo y aplicar algunas
caractersticas propias de un procesador de textos, como son las sangras y el
espaciado entre prrafos. Podemos modificarlas para que salgan como queramos.
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 nosotros queramos.
Vamos a modificar las caractersticas del prrafo. Para ello basta con que situemos
el cursor en cualquier parte del prrafo a modificar y pulsar el botn derecho. En el
men contextual pincharemos en la opcin Prrafo.
Podemos hacer lo mismo pinchando en la barra de mens, en Formato y despus
en Prrafo. En cualquier caso se abrir el cuadro de dilogo Prrafo que te
describiremos a continuacin y que nos permite configurar caractersticas del
prrafo actual.
Podemos cambiar la posicin del prrafo cambiando su Alineacin. Podemos

posicionar un prrafo a la izquierda de la pgina, a la derecha, en el centro,

justificado y predeterminado. Veamos cmo actan:
Alineado a la izquierda: es el activo por defecto.

3.10.

Imgenes

Vamos a ver cmo se usan las imgenes en una pgina Web, cules son los
formatos ms usados en Internet y cmo combinar imgenes y texto para tener
una Web atractiva.
Formatos de imgenes usadas en Internet: GIF y JPG.
Para mostrar fotos o dibujos, se suelen usar principalmente dos formatos de
imagen: GIF y JPG. El primero, GIF, se suele usar para dibujos y pequeas fotos de
pocos colores. JPG es usado para presentar fotos a todo color. Pero, qu son
exactamente GIF y JPG?
GIF es una abreviatura de Graphic Interchange Format. Este formato utiliza como
mximo 256 colores, por lo que al representar una foto puede perderse colorido.
Por ello es usado para mostrar dibujos, esquemas, fondos y pequeas fotos. Tiene
varias caractersticas interesantes, como son el entrelazado y la transparencia. Al
contrario que JPG, que veremos a continuacin, no se pierde calidad con este

formato.
El entrelazado permite que la imagen se cargue en el ordenador que visualiza la
pgina Web poco a poco, mientras va mostrando versiones de la imagen cada vez
ms aproximadas a la versin normal. Esta caracterstica es interesante para
ordenadores con una conexin lenta a Internet, porque el usuario puede decidir
que la imagen que se est cargando no le interesa, dejando entonces esa pgina
para cargar otra. Sin embargo esta caracterstica no se usa mucho actualmente,
excepto para pginas Web con muchas imgenes. Un ejemplo del entrelazado sera
el siguiente:
Imagen original/final

Imagen cargando

La transparencia permite elegir un color de los 256 para hacerlo transparente y

representar el fondo que se encuentre detrs del dibujo. Veamos el siguiente
ejemplo. El primer logo es un GIF sin transparencia, mientras que el segundo es un
GIF con transparencia (hacemos transparente el color rojo).
Todas estas caractersticas podemos cambiarlas con nuestro editor de imgenes
favorito.
JPG o JPEG es una abreviatura de Joint Photographic Experts Group. Este formato
utiliza 16 millones de colores, por lo que es el adecuado para mostrar fotos.
Adems, JPG puede comprimir la imagen para que ocupe menos espacio, por lo
que grandes imgenes pueden ser cargadas con una velocidad aceptable.
La compresin tiene un precio, y es la prdida de calidad respecto a la imagen
original. JPG nos permite comprimir ms o menos las fotos, perdiendo ms o
menos calidad.
Tambin podemos elegir la cantidad de barridos antes de mostrar la imagen final.
Es una caracterstica similar al entrelazado del GIF.
Veamos un ejemplo de una foto guardada en formato GIF, en JPG y en JPG con

mucha compresin, as como su tamao para hacernos una idea de cuanto tardara
en cargarse desde Internet (suponiendo una conexin con mdem, que es la ms
lenta pero la ms extendida).
Foto
kb
segundos

Original

GIF

188
22

37
5

JPG (poca
compresin)
17
2

JPG (mucha
compresin)
8
1

Todas estas caractersticas podemos cambiarlas con nuestro editor de imgenes

favorito.
Insertar una imagen.
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:

Ahora tan slo tenemos que elegir la imagen de nuestro disco duro que queremos
incluir en nuestra pgina, pulsando en Insertar para cargarla. Como podemos
observar podemos cargar distintos tipos de imagen. FrontPage las guardar
automticamente como GIF si la imagen tiene 256 o menos colores, o como JPG si
tiene ms.
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 hacemos clic en ella con el botn izquierdo del ratn sobre la
imagen y aparecern 4 cuadraditos en la imagen. Pinchando en ellos con el botn
izquierdo del ratn y sin soltar, arrastrando el ratn, podemos cambiar el tamao
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 Fondo y asegurarnos de marcar la opcin
Fondo de imagen. 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 con copias de la
imagen.
Si queremos cambiar la imagen de fondo repetimos el proceso eligiendo otra
imagen, y si queremos quitar la imagen de fondo, repetimos el proceso
desmarcando la opcin Fondo de imagen.
Podemos activar la opcin de marca de agua. En ese caso el fondo no se desplaza
cuando nos movemos por la pgina al subir o bajar la 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 carga de la Web.
Las imgenes deben seguir el estilo de la pgina, de esta forma
conseguiremos que la imagen acompae la esttica de la Web.
Si usamos una imagen oscura, es conveniente usar texto de color claro y
viceversa. Cuando la imagen contenga zonas claras y oscuras, evite usar
texto en estas zonas.

3.11.

Hipervnculos

Qu es un hipervnculo?
Un hipervnculo es un enlace, normalmente entre dos pginas web de un mismo
sitio, pero un enlace tambin puede apuntar a una pgina de otro sitio web, a un
fichero, a una imagen, etc. Para navegar al destino al que apunta el enlace,
debemos hacer clic sobre l. Tambin se conocen como hiperenlaces, enlaces o
links. Normalmente el destino se puede saber mirando la barra de estado del
navegador cuando el ratn est sobre el hipervnculo. Dependiendo de cual sea el
destino, hacer clic en un hipervnculo puede hacer que ocurran varias cosas. Si el
destino es otra pgina web, el navegador la cargar y la mostrar, pero si el destino
es un documento de Word, el navegador nos dar la posibilidad de abrir una sesin
de Word para visualizarlo o de guardar el archivo. Por lo tanto, podemos usar los
hipervnculos para conducir a los visitantes de nuestro sitio web por donde
queramos. Adems, si queremos que se pongan en contacto con nosotros, nada
mejor que ofrecerles un hipervnculo a nuestro correo electrnico. Vamos a ver
cmo hacer todo esto. Tipos de hipervnculos. Existen varios tipos de
hipervnculos. Vamos a ver los ms usados.
Hipervnculo de texto.
Un hipervnculo de texto es un enlace que se encuentra asociado a un texto, de
forma que si hacemos clic sobre ese texto, navegamos dnde indique el
hipervnculo. Por defecto, cuando creamos un hipervnculo de texto, el texto
aparece subrayado y en un color distinto al del texto normal, de forma que el
visitante sepa que existe ese enlace. Si volvemos a la pgina despus de visitar el
enlace, este aparecer con otro tono tambin. Aunque es interesante diferenciar el
hiperenlace, es posible que no queramos que aparezca as. Ms adelante veremos
cmo hacer esto.
Hipervnculo de imagen.
Un hipervnculo de imagen es un enlace que se encuentra asociado a una imagen,
de forma que si hacemos clic sobre esa imagen, navegamos dnde indique el
hipervnculo. Por defecto. Cuando creamos un hipervnculo de imagen, la imagen
aparece rodeada de un borde con un color llamativo para que el visitante sepa que
existe ese enlace. Al igual que con el texto, ms adelante veremos cmo podemos
modificar este comportamiento.
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 archivo de la pgina web a la que se refiere el vnculo se

encuentra en el mismo disco que la pgina que contiene el vnculo. As, para
referirnos a ella tan solo basta con poner la ruta o direccin en el disco duro. Si se
encuentra en la misma carpeta, basta con poner su nombre. Si se encuentra en una
carpeta que cuelga de la actual, hay que poner el nombre de la carpeta y el del
archivo.
Por ejemplo, supongamos que tenemos un vnculo desde esta pgina a otra
llamada curso que est en la carpeta access. El vnculo sera: access/curso.htm
Hipervnculo a otro sitio web (pgina externa).
Un hipervnculo externo es un vnculo a una pgina en Internet. Es un vnculo a
cualquier otro lugar fuera del sitio actual. Cuando ponemos un vnculo externo,
escribimos la direccin completa de la pgina incluido http://www.... As,
http://www.google.com.uy es un vnculo a la pgina de google.
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 pulsar en l, automticamente se abre el programa de
correo que tenga el usuario instalado para poder escribir a esa direccin de correo.
Por ejemplo, si nuestra direccin de correo es cursofrontpage@gmail.com,
escribiremos esta direccin de correo como direccin al insertar el hipervnculo.
3.12.

Tablas

Vamos a ver qu son las tablas y cmo trabajar con ellas, para poder presentar
datos de forma ordenada y para situar en pantalla objetos en un lugar concreto.
Las tablas en FrontPage
Lo primero que vamos a hacer es activar la barra de herramientas de tablas. Todas
las opciones que contiene estn disponibles en el men Tabla, pero usar la barra de
herramientas de tablas es ms cmodo y rpido.
Para activar la barra de herramientas, lo podemos hacer de dos formas:
-
-

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 y despus pulsamos en Tablas.

Las tablas son representadas en FrontPage de esta manera:

-
-

Tabla con borde (3 filas, 2 columnas)

Tabla sin borde (1 filas, 2 columnas)

Insertar una tabla

Lo primero que debemos hacer es situar el cursor donde queramos que est la
tabla. Despus, para insertar una tabla debemos pulsar en el botn Insertar tabla,
que est situado en la barra de herramientas estndar. Sin soltar, arrastramos el
ratn de forma que la tabla tenga tantas filas y columnas 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 propiedades pueden cambiarse fcilmente.

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 decir, si la tabla ocupa la mitad de su pantalla, en
un monitor ms grande la tabla se redimensionar para ocupar la mitad de esa
pantalla. Se dice que su tamao est especificado en porcentaje. Pero podemos
cambiar esto para que el tamao de la tabla se especifique en pxeles, de forma
que su tamao permanezca constante, independiente del tamao de la pantalla en
la que se muestre.

Rellenar las celdas

Para rellenar las celdas debemos hacer clic en la celda que queramos rellenar y
teclear el texto que queramos. Tambin podemos insertar imgenes u otras tablas.
Para desplazarnos por las celdas podemos usar los cursores. Otra posibilidad es
pulsar la tecla tabulador y tabulador + Maysculas si queremos avanzar y
retroceder celda por celda. Si pulsamos tabulador cuando estemos en la ltima
celda de una tabla, automticamente aadiremos una nueva fila a la tabla.
La tabla se redimensionar automticamente segn el texto o los objetos que
insertemos en ella.

4. EDITORES GRATUITOS EN INTERNET

Para escoger un programa, lo primero es optar por una solucin gratuita o de pago,
como tambin si desea el programa o disearlo on-line.
Existen algunos programas para crear pginas web como editores WYSIWYG. Uno
de los mejores de este tipo es Dreamweaver, de Adobe. Es un editor muy
completo, y el elegido por la mayora de desarrolladores profesionales. Pero se
trata de un editor de pago, aunque es cierto que podemos probarlo gratuitamente
durante 30 das.
4.1. Programas editores de pginas Web
Dreamweaver 3 - desarrolla contenido web con mayor rapidez. Gracias a una
interfaz de usuario optimizada, a las herramientas conectadas y a las nuevas
herramientas de edicin visual de CSS, podrs codificar de forma eficaz e intuitiva.
Adems, ahora Dreamweaver CC te permite compartir tu trabajo directamente
desde la aplicacin y te ayuda a mantenerte al da de los estndares web
proporcionndote acceso a las nuevas funciones en el momento en que estn
disponibles.
En cuanto a opciones gratuitas, podemos encontrar, entre otros, Bluefish, ms
enfocado a programadores; Amaya, desarrollado por el consorcio W3C; o
KompoZer.
Bluefish4 - es un potente editor dirigido a programadores y desarrolladores web,
con muchas opciones para escribir pginas web, scripts y cdigo de programacin.
Bluefish soporta muchos lenguajes de programacin y de marcas. Bluefish es un
desarrollo de cdigo abierto del proyecto, liberado bajo la GNU GPL licencia.
Bluefish es una aplicacin multiplataforma que funciona en la mayora de los
sistemas operativos de escritorio, incluyendo Linux, FreeBSD, MacOS-X, Windows,
OpenBSD y Solaris.
Amaya 5 - el web-redactor destinado para la creacin y la renovacin de los
documentos directamente en las redes. En un paquete son unidos todos los medios
para la presentacin, la redaccin y la direccin quitada por los ficheros. Esto
corresponde a la concepcin inicial de Internet como los espacios para la
colaboracin, en vez del ambiente para la publicacin unilateral. Amaya es el
proyecto W3C con el cdigo abierto inicial Podis redactar y conservar los textos
iniciales, incluso corregir los errores, traer los cambios al cdigo, la documentacin,
y etc.
KompoZer6 - es un completo sistema de edicin Web que combina la gestin de

Dreamweaver, http://www.adobe.com/es/products/dreamweaver.html
Bluefish, http://bluefish.openoffice.nl/index.html
5 Amaya, http://www.browsersdoc.org/Amaya/
6 KompoZer, http://kompozer.net
3
4

archivos web y fcil de usar WYSIWYG edicin de pginas web. KompoZer est
diseado para ser extremadamente fcil de usar, por lo que es ideal para los
usuarios de computadoras no tcnicos que quieren crear un sitio web atractivo y de
aspecto profesional sin necesidad de conocer cdigo HTML o web.
4.2. Editores on-line de pginas Web
Entre los editores on-line para creacin y edicin de pginas web encontramos (por
mencionar algunos) uCoz o Wix.
uCoz - es un servicio de alojamiento web y gestin de contenidos (CMS) con
numerosas posibilidades y capacidades, siendo una alternativa potentsima a
sistemas como Blogger. No se requiere de experiencia en el diseo de web y es
gratis. Algunas caractersticas son espacio de disco gratuito e ilimitado y los
archivos pueden ser subidos va interfaz web o FTP.
Wix es una plataforma de creacin de sitios web de manera sencilla, es un editor
online que permite crear y publicar un sitio web en flash indexado en buscadores,
gratuitamente, con una direccin de tipo www.wix.com/nombre de
usuario/nombre de documento. Claro que tambin puedes conectar tu propio
dominio www...com por un pequeo costo mensual/anual. Con Wix puedes crear
tu propio sitio web con facilidad. No hay necesidad de agregar una sola lnea de
cdigo de programacin. Diseado con una vistosa interfaz grfica con funcin
arrastrar y colocar, el creador de sitios web se realiz de modo que sea muy fcil de
usar y permita una completa libertad en la creacin.

4.3. Cuadro comparativo de creadores de pginas Web7

Este cuadro proporciona una vista general de los creadores de pginas Web ms
asentados y fciles de usar en todo el mundo. Es posible probar y utilizar la mayora de
ellos gratuitamente. No necesitar ningn tipo de habilidad especial para utilizarlos;
garantizado. Estos creadores de pginas Web estn indicados para la creacin tanto de
pginas Web personales como de pginas Web para su empresa o negocio. Tambin
incluyen la posibilidad de aadir o crear una tienda virtual.
Proveedor

Valoracin

+ Fcil de utilizar
+ Incluye dominio y cuenta de correo electrnico
+ Tienda online excelente
+ Gran variedad de diseos disponibles
+ Especialmente indicado para pginas web de
mayor tamao
+ gran cantidad de funciones
+ lo mejor para optimizacin en motores de
bsqueda
- algo complicado en algunos momentos para
principiantes
+ Muy intuitivo
+ flexible y ajustable
+ buena funcin de blog
- No tiene servicio de asistencia en espaol
+ Diseos impactantes
+ animacin y multimedia
+ perfecto para artistas, modelos y diseadores
- relativamente caro

+ enfoque nico en el sector

+ muy fcil de configurar
- no es del todo barato

Comentarios

http://www.creadores-paginasweb.com/creadores-de-paginas-web/

5. PASOS PARA LA CREACION DE UNA PAGINA WEB8

Son cinco los pasos que usted debe seguir para la operacin de una pgina web en su
empresa: registro de dominio, hospedaje, diseo, mantenimiento y difusin.
Si usted est por implementar una pgina web para promover su negocio en Internet, es
muy importante que conozca desde un principio cules son los distintos pasos que deber
realizar para que su pgina web opere eficazmente y su empresa pueda alcanzar los
resultados esperados.
5.1. Registro de dominio
El primer paso para tener presencia en Internet es registrar un dominio. El nombre de
dominio es como su direccin en Internet (www.mabelgiordano.com.bo), a travs de
la cual los clientes potenciales visitarn su pgina web para conocer su oferta de
productos y servicios. Aunque parezca una actividad muy simple, la definicin del
nombre, la categora del dominio (.com, .net, .org, info, .name, .biz, .tv, .gov, .edu) y el
cdigo de pas (.com.bo, .com.br, .com.co, .com.cl) es crtica y deben ser
cuidadosamente establecidos en base al giro de la empresa, mercado destino y
disponibilidad de nombres de dominio.
Es muy importante que alguien dentro de su empresa adquiera la titularidad del
dominio para que ustedes tengan el control total sobre el mismo. Si usted adquiere un
paquete de servicios y no se encarga personalmente de registrar su dominio, es muy
probable que ste quede bajo el control de una tercera persona ajena a su empresa.
Muchos de los problemas en la administracin de dominios se deben a que las
empresas no adquieren esa responsabilidad desde un principio.
5.2. Hospedaje del dominio
Para que su pgina web pueda ser visitada por los usuarios de Internet, adicional al
nombre de dominio, usted debe contratar un servicio de hospedaje (web hosting) a
travs del cual su empresa contar con un espacio en disco dentro de un servidor web
conectado a Internet y adems un nmero determinado de cuentas de correo
electrnico
personalizadas
con
el
nombre
de
su
dominio
(juan.perez@miempresa.com.mx ), las cuales podr usted asignar a los empleados que
las requieran. Actualmente, la mayora de los proveedores de web hosting ofrecen en
su paquete bsico 250 Mb de almacenamiento, 8,000 Mb de transferencia y 10
cuentas de e-mail.
5.3. Diseo del sitio web
El diseo es la comunicacin textual (contenidos) existente en Internet una faceta

8

http://www.deltaasesores.com/articulos

visual, sino que obliga a pensar una mejor estructuracin de los mismos en este
soporte. La unin de un buen diseo con una jerarqua bien elaborada de contenidos
aumenta la eficiencia de la web como canal de comunicacin e intercambio de datos,
que brinda posibilidades como el contacto directo entre el productor y el consumidor
de contenidos, caracterstica destacable del medio Internet.
5.4. Mantenimiento del sitio web
Todo evoluciona en el tiempo y su empresa no es la excepcin. Es muy probable que
usted tenga que hacer algunos ajustes a su pgina web cada determinado tiempo
debido a cambios de productos, altas y bajas de personal de contacto, nuevos
distribuidores, noticias, eventos, actualizacin de informacin tcnica, nuevos
artculos, entre otros conceptos. La frecuencia del mantenimiento vara de empresa en
empresa, ya que existen compaas que requieren cambios semana tras semana y
otras que revisan el contenido de su pgina web una vez al ao.
Si su empresa cuenta con un sitio web extenso y participan varias personas en el
mantenimiento del mismo, es conveniente que usted evale la posibilidad de que su
sitio web sea desarrollado empleando un administrador de contenido CMS (content
management system), de tal forma que la labor de mantenimiento sea ms sencilla y
expedita y no tenga usted que depender de una agencia de diseo web para mantener
actualizado su sitio.
5.5. Difusin del sitio web
Por lo general este es el tema en el que existe mayor confusin entre las empresas que
implementan una pgina web por vez primera. La mayora de las personas piensan
que para poder promocionar eficazmente sus productos y servicios en Internet, es
suficiente con tener la pgina web y desconocen que sta debe contar con un medio
de difusin o promocin, como quiera usted llamarle, para que las visitas lleguen.
No slo es necesario que su pgina web tenga un diseo agradable. Para que su sitio
sea visitado con frecuencia y se generen las oportunidades de negocio (Internet
generated leads), los clientes potenciales deben saber que su pgina web existe y
debe haber alguna forma de localizarla fcilmente. Aun cuando existen diversas
formas de difusin, actualmente el mtodo ms efectivo es el posicionamiento de
pginas web en buscadores, ya que es precisamente por medio de los motores de
bsqueda que los usuarios de Internet localizan los productos y servicios que ellos y
ellas requieren.
No se olvide de la difusin! Es muy importante para promover sus productos y
servicios dentro y fuera del pas.