Diseo de pginas web con FrontPage

Captulo: Cmo planificar el sitio web (I) 1 / 20

Antes de lanzarnos a editar una pgina web debemos dedicar un tiempo a planificar nuestro
trabajo para asegurarnos de qu vamos a incluir en la web, de dnde lo vamos a obtener y qu
aspecto externo le vamos a dar. Un minucioso trabajo de planificacin reducir los errores que se
producen cuando nos ponemos a editar una pgina. Si queremos evitar borrar y repetir las cosas
una y otra vez, convendr que sigamos los siguientes pasos:

1.Definir la audiencia destino: al crear una web desearemos que comunique adecuadamente el
mensaje y contenidos que quiere transmitir: publicar los resultados de una investigacin, describir
una situacin o la inclusin de contenidos diversos. En funcin de la audiencia destino el diseo de
la web ser diferente. Por ejemplo, si queremos publicar un artculo los visitantes visitarn la
pgina para leerlo, por lo que todo elemento que adorne excesivamente la pgina y ralentice su
carga ser negativo para nosotros.

En una web docente la audiencia destino sern alumnos y profesores de una asignatura, curso o
tipo de estudios. El material incluido en la web debe ir dirigido a dicha audiencia para un mejor
aprovechamiento.

2.Establecer objetivos: debemos pensar cules son los objetivos de nuestro sitio web: divulgar
informacin?, promocionar una asociacin? comercio electrnico?, educar?, entretenimiento?.
Debemos definir los principales objetivos que queremos alcanzar, que junto con la audiencia
destino nos permitirn definir los contenidos que debemos incluir en el sitio web.

Los objetivos en una web docente pueden ser muy diversos y dependen de si lo que queremos es
una web para educacin a distancia o una web que sirva de apoyo y complemente a la educacin
presencial. En el caso de la educacin a distancia (teleformacin) los objetivos sern que el alumno
supere el curso o asignatura a travs de los contenidos y procedimientos que se establecen en la
web. En estos casos ser fundamental el apoyo de una gua de estudio y la elaboracin de
materiales didcticos de calidad.

En el caso de que la web docente nos sirva de apoyo para la clase habitual, incluiremos contenidos
que complementen y amplen lo visto en clase, con ejercicios, pruebas de auto-evaluacin, tutora
on-line y con referencias a webs de donde extraer la informacin para realizar cualquier actividad
relacionada con la asignatura.

3.Organizacin: una vez definidos los objetivos debemos recopilar todo el material grfico y
escrito que incluiremos en la web. Seguramente ms adelante nos encontraremos que es
necesario crear nuevos contenidos, pero si estamos organizados bastar simplemente con
incluirlos donde corresponda. Una vez definidos claramente los objetivos y disponer del material
necesario es hora de organizarlo. Cunto ms grande sea el sitio web, ms organizacin
necesitaremos.

En una web docente incluiremos materiales escritos (apuntes, exmenes, documentacin,...) que
debemos recopilar para organizarlos. Es conveniente que el material adopte un formato lo ms
parecido para que se identifique con la web. Igualmente, debemos decidir si el material ser visible
on-line o habr que descargarlo previamente (se usan normalmente los formatos zip y pdf)

Captulo: Cmo planificar el sitio web (II) 2 / 20

Continuamos con todos los aspectos que debe tener en cuenta para crear una pgina web.

4.Crear la estructura de directorios: una vez que hemos organizado nuestras ideas y
recopilado el material necesario para la web, es el momento de organizar los contenidos en un
sistema de archivos y directorios de forma ordenada. A este proceso se le llama mapeado del sitio
web. Este trabajo es una parte esencial en la planificacin del sitio web, ya que nos ayudar a
especificar las trayectorias correctas de los enlaces, imgenes y documentos que vayamos a
incluir en la web.
Para ayudarnos a visualizar la estructura de directorios es recomendable dibujar una especie de
organigrama en el que vayamos colocando los directorios en funcin de su importancia desde un
nivel superior a otros inferiores.

En una web docente se suelen emplear directorios como programacin de la asignatura, ejercicios,
exmenes, material de consulta, etc.

5.Crear un guin: es el momento de hacer un boceto de la pgina principal y de cada pgina que
est enlazada a sta, incluyendo todos los elementos que creamos necesarios (texto, imgenes,
botones, hipervnculos,...) sin preocuparnos demasiado por los ajustes, es simplemente un boceto.
Es importante recordar que los visitantes de una web no lo van a leer completamente sino que lo
que desean es encontrar rpidamente lo que les interesa, por lo que habr que establecer una
estructura adecuada de enlaces entre las pginas. El movimiento de un lado a otro del web debe
ser lo ms intuitivo posible para facilitar el trabajo del visitante. Un sitio web en el que sea difcil
encontrar aquello que buscamos ser abandonado rpidamente.

6.Desarrollo del aspecto externo: el siguiente paso ser la representacin visual del sitio web.
Es esencial la combinacin de color, grficos, tipos y texto que nos ayuden a expresar lo que
queremos comunicar con estilo e impacto. Los editores de pginas web incluyen recursos que
ayudarn a los no especialistas en diseo a conseguir una esttica adecuada.

Cuestiones a tener en cuenta.- Estos son algunos aspectos que debe seguir para conseguir un
buen desarrollo de su web.

-Espacio y equilibrio: cantidad de espacio que los elementos de la pgina ocupan, as como la
cantidad de espacio vaco y cmo equilibrar todo esto. Normalmente a los diseadores les gusta
ver abundante espacio en blanco entre los elementos, lo cual facilita la legibilidad y no agobia la
vista.

-Color: dependiendo del tipo de web incluiremos colores brillantes o suaves. En el caso de una
web docente es preferible colores suaves que faciliten la navegacin y lectura de la
documentacin.

-Tipo de letra: esta caracterstica aade personalidad al sitio web pero es preferible no incluir
muchos tipos de letra en una pgina web.

-Formas: en casi todas las pginas webs se emplean rectngulos para colocar las cabeceras de
pgina o titulares. Pero podemos emplear cualquier otra forma geomtrica que nos ayudar a
crear un sitio con personalidad.

-Textura o grficos de fondo: hay que asegurarse de que el texto sea claro y fcil de leer.

-Consistencia: emplear por todas las partes un mismo esquema de colores que facilite la
navegacin.

Captulo: Qu hacer y no hacer en el diseo web 3 / 20

Hay que tener en cuenta que hay que captar la atencin del lector en un breve espacio de tiempo,
por lo que habr que tener cuidado con el aspecto de la web, la velocidad de carga y todos los
factores que hagan la visita ms agradable a la web.

Sugerencias.-Veamos algunas ideas.

-Colocar un ttulo corto, descriptivo y preciso.

-Proporcionar pistas sobre el contenido en la parte superior de la pgina. No suponga que nadie va
a desplazarse hasta la parte inferior.

-Si la pgina ocupa ms de tres "pantallas", dividirla en ms de una pgina;

equilibrar el espacio en blanco, las imgenes grandes y pequeas y los bloques de texto para dotar
a la pgina de inters y variedad.
-Usar un color para el texto y enlaces que complemente al del fondo, en lugar de que se confundan
con l.

-No crear dos enlaces con el mismo nombre que lleven a sitios diferentes o dos enlaces con
diferentes nombres que lleven al mismo sitio.

-Ofrecer siempre una forma de retornar a travs de un enlace a la pgina principal.

-Evitar generalidades como "Haga clic aqu!".

-Emplear imgenes comprimidas en los formatos adecuados.

-Emplear vistas en miniatura como enlaces a imgenes mayores.

-Recordar que el acceso a Internet se realiza por diferentes navegadores.

-Mantener nombres de archivos cortos.

-Informar a la gente del tamao de los ficheros descargables.

-Obtener el permiso necesario para emplear texto o imgenes creados por otros.

-Crear un enlace con la direccin de correo del webmaster.

En Internet existen numerosas pginas que nos dan consejos sobre como disear pginas web,
ofrecen modelos de pginas e incluso se critican pginas para detectar los fallos ms comunes.
Ejemplos de estas pginas son las siguientes:

-Gua de estilo de Webestilo.com: nos proporciona cmo crear pginas de visualizacin ms

rpida, ms cmodas y fciles de navegar.

-La web ideal: realiza anlisis sobre nuestra web para detectar errores y solucionarlos. (los
anlisis son de pago).

-Usability Methods & Tools: describe los mtodos de usabilidad y herramientas de trabajo para
el desarrollo de sitios Web. (en ingls)

-Think Tank: Web que revisa otras pginas webs acerca de su usabilidad. Contiene numerosos
artculos y crticas. Muy recomendable su lectura.

-Los diez errores ms frecuentes en el diseo web: Artculo de Jakob Nielsen en 1999.

Captulo: Creacin de pginas web bsicas 4 / 20

Existen multitud de programas de diseo web, que nos van a permitir, sin conocer el lenguaje
HTML, llegar a disear todo tipo de pginas. Los ms usados son Microsoft FrontPage, Macromedia
Dreamweaver y Adobe Golive. Adems, existe software gratuito con el cual tambin podemos
hacer diseos similares.

Tenemos un manual de diseo web con Page Mill

En este curso aprenderemos a manejar el FrontPage, programa de Microsoft que va incluido dentro
de la suite Microsoft Office. En concreto vamos a analizar la versin FrontPage 2000.

Cmo empezar.- Para empezar debemos tener claros los conceptos de Web y Pgina para
FrontPage2000. Si creamos un sitio web nos va a generar una carpeta en la cual se va a generar
automticamente una pgina principal (llamada index.htm) y dos carpetas llamadas images y
private, donde guardaremos archivos. Podemos elegir el tipo de web que deseamos a partir del
asistente y especificamos la ubicacin en el disco duro.
Si creamos una pgina web, nos crear una pgina independiente y no generar las carpetas que
aparecen en el sitio web. Cmo lo hacemos?

Hacemos clic en Archivo, Nuevo y seleccionamos Web o Pgina en funcin de lo que queramos
crear. Si creamos un sitio web podemos disfrutar de las utilidades que nos proporciona FrontPage a
travs de la barra de vistas.

Es muy importante que tengamos muy claros los nombres con los que vamos a guardar nuestros
archivos y tener cuidado al utilizar maysculas y minsculas en los nombres ya que sern
reconocidos como diferentes. En la gran mayora de los casos la pgina principal de nuestro sitio
web se denominar index.htm y ser la que aparezca cuando el internauta escriba la direccin de
nuestra web.

Captulo: Las vistas en FrontPage 5 / 20

Cuando abrimos FrontPage lo primero que nos encontramos es que tiene una apariencia similar a
los programas de la familia Office, con barra de ttulo, de mens, herramientas muy similares. La
particularidad es que en la parte izquierda de la pantalla aparece lo que se llama la barra de
vistas, que analizamos a continuacin. Para activar dicha barra de vistas si no lo est entraremos
en la opcin Ver y luego haremos un click sobre la opcin Barra de vistas para que se active. Si
sta ya tiene una v delante significa que ya est activada.

Cada vista muestra diferentes tipos de informacin sobre el web y permite trabajar con el sitio web
de diferentes formas:
1.Vista pgina: muestra las pginas individuales con la que se est trabajando, permitiendo
hacer cambios o ajustes.

2.Vista carpetas: contiene dos partes, con la lista detallada de pginas y ficheros de la carpeta
seleccionada del sitio web. Se utiliza esta vista para la gestin de ficheros (cambiar nombres, crear
carpetas).

3.Vista Informes: se emplea como ayuda para la gestin de las pginas dentro de la web.
FrontPage trabaja con un sitio web constituido por partes ms pequeas (archivos).

4.Vista Exploracin: Tambin conocida como mapa del sitio. Nos muestra la estructura de
navegacin del sitio web.

5.Vista Hipervnculos: Ofrece todos los hipervnculos de la web.

6.Vista Tareas: Para mantener una lista de tareas en curso a medida que construye el sitio web.
Es especialmente til si en el sitio trabaja ms de un desarrollador.

Si trabajamos en la edicin de una pgina para aadir y modificar elementos (texto, imgenes,
grficos,...) utilizaremos la vista pgina, que a su vez tiene otras tres vistas:

1.Vista Normal: en esta opcin vemos la pgina web en formato WYSIWYG ("What you see is
what you get" , "Lo que ves es lo que obtienes"). Para disear la pgina web colocamos el texto,
imgenes y dems elementos de la misma forma que lo veremos en Internet.
2.Vista HTML: podemos visualizar el cdigo HTML si queremos retocarlo para hacer algo que no
podamos con FrontPage o para insertar cdigo HTML que hemos descargado de Internet. En esta
vista es necesario conocer los fundamentos y la estructura del lenguaje HTML para poder
intervenir en l sin errores.
3.Vista previa: Aqu podremos comprobar como se visualizar nuestra pgina en el navegador. Es
importante advertir que al utilizar FrontPage, al activar Vista previa se ver la web en el Internet
Explorer de Microsoft y ste presenta algunas diferencias de presentacin de pginas con los
dems navegadores como el de Netscape.

Despus de crear un sitio web en FrontPage es casi seguro que desearemos aadir nuevas pginas
al sitio. La mayora de la construccin de las pginas se har empleando la vista pgina, a travs
del men Archivo - Nueva pgina, que funciona de forma idntica a todos los programas.

Es importante crearnos una estructura de carpetas y subcarpetas para guardar todas las pginas
que vayamos creando y todos los ficheros (GIF, JPG, ZIP, PDF,. ...) que incluyamos en nuestro sitio
web.

Para comenzar a trabajar en la vista Pgina, crearemos un nuevo web de FrontPage o abriremos
uno ya existente. Al echar un vistazo a la interfaz reconoceremos los elementos propios de Office,
ya que FrontPage trabaja de forma muy similar al procesador de textos. Hay disponibles una serie
de barras de herramientas:

-Barra de herramientas estndar: contiene los botones para creacin, apertura, guardado e
impresin de pginas adems de tareas especficas web como crear hipervnculos e insertar
imgenes.

-Barra de herramientas formato: contiene los botones y listas desplegables para dar formato al
texto.

-Barra de herramientas DHTML (HTML dinmico): permite aadir efectos especiales a la

pgina, como intercambio entre dos imgenes.
-Barra de herramientas imgenes: controlar el formato de las imgenes y convertir las
imgenes en mapas de imagen.

-Barra de herramientas Tablas: para simplificar el uso de las tablas en FrontPage.

Una vez vista la interfaz de FrontPage ya podemos crear una pgina nueva en la cual incluiremos
los elementos que necesitemos (texto, imgenes, hipervnculos, tablas, archivos).

Es muy conveniente poner ttulo a cada pgina que editemos ya que es el nombre que aparecer
en la barra de ttulo del navegador y ayuda a identificar el contenido de la pgina. Para poner el
ttulo a una pgina pulsamos botn derecho del ratn en la pgina y Propiedades de pgina hasta
que aparece una ventana en la cual podemos poner el ttulo:

Captulo: Formatos de texto e imgenes 6 / 20

Para aadir texto a una pgina, simplemente hay que abrirla y comenzar a teclear en la vista
pgina, o bien copiar y pegar un texto de archivo de texto. El funcionamiento es exactamente igual
que el de un procesador de textos.

Los prrafos en HTML tienen una diferencia con los prrafos en documentos de texto y es que no
son la unidad estndar de formato sino que se trata de una unidad visual de elementos separados
en una pgina, donde estos elementos son texto, imgenes o cualquier cosa.

En la vista pgina la insercin de un salto de prrafo se consigue pulsando Intro. En cambio, si lo

que queremos es un salto de lnea lo haremos a travs del men Insertar, Salto de lnea o con la
combinacin de teclas Mays + Intro. Cuando queremos hacer un salto de lnea nos aparece la
siguiente ventana para configurarlo.

Salto de lnea normal: inserte un salto de lnea entre la imagen y el texto.

Hasta el margen izquierdo: mueva la siguiente lnea de texto hacia abajo hasta que quede el
margen derecho libre para la imagen.
Hasta el margen derecho: mueva la siguiente lnea hacia abajo y hacia la derecha.

Hasta ambos mrgenes: mueva la siguiente lnea de texto hacia abajo hasta que queden libres
ambos mrgenes para la imagen.

Alineacin de prrafos: por defecto se alinean con el borde izquierdo de la ventana, pero se puede
cambiar su alineacin a travs de los botones de la barra de herramientas:

Para aplicar la alineacin justificada debemos seleccionar un prrafo, y luego seleccionar el men
Formato, Prrafo, en el siguiente cuadro. En esta ventana podemos configurar la alineacin del
prrafo, las sangras del texto, el espaciado entre prrafos y el interlineado dentro de un prrafo.

Es frecuente la utilizacin de algunos smbolos, conocidos como caracteres especiales. A menudo

emplearemos los smbolos (registered), (copyright) y otros ms que podemos encontrar en el
men Insertar, Smbolos.

La correccin ortogrfica.- Al igual que con cualquier procesador de textos, una vez hayamos
editado nuestra pgina es imprescindible que pasemos el corrector ortogrfico para detectar
posibles errores y evitar la mala imagen que causa una web con faltas gramaticales y de
ortografa. Para ello seleccionamos el men Herramientas, Ortografa.

Formato de texto.- Modificar el formato de texto se hace de forma similar a un procesador de

textos. A partir de la barra de herramientas Formato podemos modificar el tipo y tamao de la
fuente, ponerla en negrita, cursiva o subrayado, cambiar el color o el relleno de la fuente.

Numeracin y vietas.- Para hacer esquemas numerados tenemos la misma herramienta que en
los procesadores de textos. Podemos hacer esquemas con vietas y con nmeros y lo haremos a
travs de los iconos correspondientes en la barra Formato o a travs del Men Formato, Vietas y
numeracin.

Captulo: Trabajar con imgenes 7 / 20

Una web est compuesta por mucho ms que simple texto. Un sitio web se disea para ser grfico,
en el cual vamos a aadir imgenes, tanto estticas como dinmicas. Podemos aadir imgenes
prediseadas de FrontPage, imgenes que tengamos guardadas en el disco duro o imgenes de
Internet.
Es fundamental conocer que las imgenes deben estar en formato GIF o JPEG para poder ser
visualizadas por la mayora de los navegadores. Las caractersticas de ambos formatos son las
siguientes:

GIF: apropiado para logotipos y est comprimida de forma que no pierde definicin. El mximo
nmero de colores que soporta es de 256. Admite la propiedad de transparencia, que permite que
las imgenes compartan el mismo color de fondo de la pgina. Igualmente se pueden crear los GIF
animados como sucesin de diferentes imgenes.

JPEG: apropiado para imgenes complejas y para fotografa. JPEG comprime y destruye parte de la
informacin de la imagen. Soporta hasta 24 bits de colores y no admite transparencias.

Para insertar una imagen podemos hacerlo a travs del botn de la barra de herramientas
Estndar.

Haciendo clic en este botn insertaremos una imagen desde una carpeta de nuestro disco duro. Es
muy importante guardar todas las imgenes en una carpeta independiente de donde guardamos
los archivos html.

Una vez que la imagen est en la pgina podemos cambiar algo en ella, como la alineacin, el
tamao, el borde e incluso aadir un texto que aparecer cuando situemos el ratn encima de la
imagen. Para ello haremos clic en el botn derecho de la imagen para que nos aparezca la
siguiente pantalla.
Utilizacin de divisores.- Los divisores son lneas horizontales que emplearemos para situarlos
debajo e las cabeceras, entre las partes de un artculo o en cualquier lugar que deseemos. Existen
dos tipos de divisores: reglas horizontales (<hr> en lenguaje HTML; Insertar, Lnea horizontal en
FrontPage) y grficos que parecen lneas.

Para insertar un divisor pulsamos en el men Insertar, Lnea horizontal. Posteriormente podemos
cambiar las propiedades de dicha lnea (anchura, altura, color, sombreado) pulsando con el botn
derecho del ratn al divisor de forma que nos aparezca esta pantalla.

Utilizacin de fondos.- El color de fondo en una web es fundamental desde el punto de vista del
diseo, hay que elegir fondos con colores simples y armoniosos, que "no hagan dao a la vista".
Seguramente pocos aguantaramos visualizar una web con un fondo naranja chilln y un texto
verde brillante.
Para establecer el color de fondo de una pgina, nos situamos en la vista normal y all
seleccionamos Formato, Fondo o con el botn derecho del ratn en la pgina que estamos
creando, activar Propiedades de pgina hasta llegar a la siguiente ventana.

En esta ventana podemos modificar diferentes aspectos de la pgina, como son los colores de
fondo, texto y de los hipervnculos

Si queremos colocar una imagen como fondo de la web y si queremos aadirle una marca de agua,
para que aparezca en el fondo de forma esttica.

Captulo: Cmo introducir imgenes en una web 8 / 20

En una pgina podemos insertar imgenes en cualquier lugar, pudiendo incluir en ellas
hipervnculos a otra pgina o a una direccin web o cuenta de correo electrnico. En FrontPage
para incluir una imagen lo podemos hacer de dos formas:

1.En el men Insertar, Imagen podemos seleccionar una imagen prediseada de FrontPage o una
imagen que contenga nuestro disco duro. Nos aparecen las siguientes ventanas:

Imgenes prediseadas
Imgenes del disco duro

El funcionamiento de las imgenes prediseadas es idntico que con Word o Excel. Seleccionamos
en la carpeta donde guardamos las imgenes aquella que queremos incluir en la pgina.

Otra forma de insertar una imagen es a travs del botn Insertar imagen que est en la barra de
herramientas estndar. El resultado obtenido es el mismo que hacindolo de la otra forma.

Una vez que hemos insertado una imagen podemos cambiar sus propiedades haciendo clic con el
botn derecho en la imagen y seleccionando la opcin Propiedades de Pgina aparece el siguiente
cuadro de dilogo:
Podemos modificar el origen de la imagen, eligiendo el archivo GIF o JPG que se corresponde con el
que queremos insertar en la web. Podemos darle a la imagen GIF la propiedad de transparente,
aadir un texto que se mostrar cuando situemos el ratn encima de la imagen (en forma de
etiqueta amarilla) y especificar un hipervnculo.

Es habitual incluir en una web imgenes que hagan ms agradable la visita a la pgina, adems de
que son imprescindibles en el entorno grfico web. En Internet podemos encontrar todo tipo de
imgenes: fotografas, dibujos, imgenes animadas, etc, que podemos encontrar a travs de los
buscadores como Google, que incorpora un buscador de imgenes donde utilizando las mismas
tcnicas de bsqueda podemos encontrar todo tipo de fotografas.

Es imprescindible tener en cuenta el tamao de las imgenes que vayamos a incluir en una pgina
web ya que cuanto mayor sea supondr un tiempo de carga superior de la pgina y esto puede
llevar al visitante a abandonar la web dependiendo de la conexin que tenga. Los formatos
utilizados para las imgenes son GIF y JPEG por su adecuado grado de compresin y ser visibles
por todos los navegadores. FrontPage no es programa de retoque de imgenes, pero dentro de la
familia de Microsoft Office existe PhotoDraw. Otros programas de tratamiento de imgenes son los
siguientes:

-Adobe Photoshop: Uno de los programas ms utilizados. Tutoriales y trucos.

-Corel Draw: Otro programa muy completo. Tutoriales y trucos.

-UltimateFX: Gratuito y muy sencillo de manejar. En Ciberconta podemos descargarlo y consultar

un tutorial.

Una vez que hemos aadido a una pgina texto, imgenes y modificado el fondo a nuestro gusto
ya podemos decir que tenemos una pgina web vistosa, pero nos queda por aadir la pieza
fundamental en una Web: LOS VNCULOS.

Captulo: Insercin de componentes 9 / 20

Con FrontPage podemos aadir componentes para que sea ms atractivo, ms interactivo o
proporcione ms informacin. Estos componentes son los siguientes:

-Comentarios

-Contadores de visitas

-Fecha y hora

-Marquesina

-Botones activables

Los comentarios: los comentarios se introducen para que sean visibles en la Vista Normal
solamente. Proporciona informacin sobre asuntos referentes a la edicin de la pgina web.

Los contadores: los contadores de visitas sirven para saber cunta gente visita nuestra web.
FrontPage nos proporciona un contador con diferentes formatos, pero hay que tener en cuenta que
el servidor donde tenemos alojada la pgina deber tener instaladas las extensiones de FrontPage
para que se vea en Internet. Cuando lo insertamos nos aparece la siguiente ventana, en la que
podemos elegir el formato del contador.

La fecha y la hora: la fecha y la hora normalmente se introducen en una web la fecha de la ltima
actualizacin para informar al visitante de la web. En el momento en que actualicemos la pgina la
fecha cambiar. Es un componente muy til y casi necesario en una web.
Marquesina: la marquesina consiste en un texto que fluye a lo ancho de la pgina, aunque con
otros formatos como los GIF animados o Flash se pueden conseguir efectos mucho ms logrados y
atractivos.

Botones activables: (Insertar, Componente, Botn Activable) consiste en crear un botn al que
haciendo clic va a realizar una determinada accin. Se pueden crear efectos cuando pasamos el
ratn por encima, cambiando la imagen, por ejemplo. El problema es que genera un applet de Java
que tarda bastante en cargarse y puede llegar a no ser visible en funcin del navegador del
internauta, con lo que perdera toda su utilidad. Nos aparece la siguiente ventana para configurar
el botn.

Podemos modificar el texto del botn, aadirle un vnculo, modificar colores, medidas y efectos.

Captulo: Los hipervnculos 10 / 20

Los hipervnculos, enlaces o links son los elementos que diferencian la web de otros medios. Un
hipervnculo supone enlazar la pgina web que estamos visualizando con otra pgina web; otra
seccin de la misma pgina; con un archivo; un servidor FTP; un archivo o una aplicacin para
descargar; una secuencia de sonido; vdeo o multimedia; una direccin de correo o un grupo de
noticias.

Es posible acceder a travs de la web a cualquier sitio empleando hipervnculos. A travs de

FrontPage es muy sencillo crear un hipervnculo a travs del botn Hipervnculo de la barra de
herramientas estndar o a travs del men Insertar, Hipervnculo.

Podemos crear los hipervnculos a partir de texto e imgenes, de forma que pulsando en ellos nos
lleve a otra parte de la misma pgina, a otro archivo o pgina de nuestro sitio web o a una
direccin URL. Para ello seleccionamos el texto o la imagen y pulsamos Insertar, Hipervnculo. Nos
aparecer la ventana siguiente:
En esta ventana podemos crear todos los tipos de hipervnculos que contienen las pginas web.
Veamos a continuacin las instrucciones que debemos seguir para cada uno de ellos:

1.Enlazar a una pgina desde nuestra web: se trata de un enlace interno y consiste en
enlazar un punto a otro documento dentro del mismo web. Supongamos que tenemos dos pginas
web creadas, uno.htm y dos.htm. Para crear un link en uno hacia dos, simplemente abrimos la
ventana anterior y buscamos en el directorio en que guardamos los archivos de la web la pgina
dos.htm, lo seleccionamos y pulsamos aceptar.

2.Enlazar a una pgina en la World Wide Web: se especifica el camino completo hacia el
archivo, poniendo la direccin URL. Por ejemplo, si queremos colocar un enlace con la pgina
principal de la Universidad de Zaragoza haremos lo siguiente:
3.Enlazar con una cuenta de correo: es habitual crear un enlace a una cuenta e-mail en una
pgina web, ya sea para enviar correos al webmaster o hacer sugerencias. El punto de partida
siempre es el mismo, seleccionamos el texto o imagen donde queremos hacer el enlace y
pulsamos Insertar, Hipervnculo. En la ventana que nos aparece seleccionaremos el botn de
enlace a correo y nos aparecer una ventana en la que debemos escribir el nombre de la cuenta.
Observaremos que al crearse el enlace nuestra direccin de correo vendr precedida por "mailto:"

4.Enlazar con una pgina nueva: en ocasiones puede ocurrir que hemos enlazado a una pgina
que todava no hemos creado. Podemos hacer las dos cosas a la vez, el enlace y crear la pgina.
Para ello, en la ventana de Insertar, Hipervnculo elegiremos el botn para enlazar con nueva
pgina. Posteriormente, elegiremos el tipo de pgina que queramos crear y ya podremos entrar a
editarla.

5.Enlazar con otra parte dentro del mismo documento: los enlaces dentro del mismo
documento permiten a los visitantes de su pgina hacer clic y saltar rpidamente a otra parte de
ese documento. Por ejemplo, esto es habitual cuando se crea un ndice al principio del documento
para que los usuarios puedan ir saltando por los apartados del ndice. Igualmente es conveniente
crear otro enlace para volver a la parte superior. A las partes del documento con la que queremos
enlazar se le denomina marcador. El procedimiento para crearlo es el siguiente:

a)En la barra de mens, seleccionar Insertar, Marcador en aquel lugar en el que queramos
situarnos despus de enlazar. Nos aparecer la siguiente ventana:
En esta ventana elegiremos el nombre del marcador y pulsamos Aceptar. A medida que vayamos
aadiendo marcadores en el documento se irn aadiendo en la lista "Otros marcadores" para que
luego al crear el hipervnculo elijamos el que nos interese.

b) Una vez creado el marcador, es el momento de crear el enlace. Para ello, en la barra de mens
seleccionamos Insertar, Hipervnculo hasta que nos salga la ventana inicial y elegimos de la lista
desplegable el marcador con el que queramos enlazar de la siguiente forma:

Estas son las 5 formas de crear hipervnculos en una pgina web, de esta forma podemos enlazar
con cualquier archivo, pgina, email o parte del documento que queramos y le daremos una mayor
amplitud de contenidos al sitio web. A una pgina web podemos llegar conociendo su direccin
(que en ocasiones es difcil debido a los nombres largos de las direcciones URL) o a travs de
enlaces en otras pginas.

Adems, podemos configurar como queremos que se abra la nueva pgina despus de hacer clic
en el hipervnculo. Se puede abrir en la misma ventana o crear una nueva ventana para no perder
la pgina anterior. Esta ltima opcin es muy til, ya que es habitual navegar en Internet a travs
de los enlaces y es posible perder u olvidar la pgina de referencia inicial.

Para ello, en la ventana del men Insertar, Hipervnculo podemos seleccionar como queremos que
nos aparezca la pgina con la que hemos enlazado.

Entre los destinos comunes de un hipervnculo podemos elegir Toda la pgina (se abrir en la
misma ventana que estamos) o en Nueva ventana (la nueva pgina se abrir aparte). El resto de
destinos comunes se refiere a los marcos que veremos ms adelante.
Captulo: Las tablas 11 / 20

Las tablas en HTML son como las tablas que podemos ver en libros, hojas de clculo y otros
documentos. Constituyen una forma de organizar y presentar informacin a travs de filas y
columnas que agrupan elementos relacionados. En el diseo web son fundamentales y constituyen
actualmente la piedra angular en el diseo de pginas web, ya que la mayora de las pginas no
seran posibles sin el uso de tablas.

Ejemplos de pginas creadas con tablas son las siguientes: Terra, Yahoo, El Pas, Educaweb, Marca,
HowStuffWorks, The New York Times y Ecomur.

Observando estas pginas podemos ver que en HTML las tablas se emplean para crear columnas
de texto, para integrar textos e imgenes, para crear mrgenes amplios o cuadros laterales y para
cualquier otro uso que le sepamos dar.

Insertar una tabla con FrontPage es muy fcil y basta con usar el botn Insertar tabla de la barra
de herramientas estndar de FrontPage. Pulsando este botn nos aparece un pequeo men con el
que seleccionaremos el nmero de filas y columnas. Igualmente podemos insertar la tabla a travs
del men Tabla, Insertar tabla.

Podemos seleccionar el nmero de filas y columnas y todo lo relativo en cuanto al diseo de la

tabla (alineacin, tamao del borde, margen y espaciado entre las celdas y ancho de la tabla). Es
habitual que aunque el diseo de la pgina se haga con tablas, al visualizarla en el navegador no
aparecen los bordes de dicha tabla. El uso que le damos a la tabla es para organizar todos los
elementos de la web.

Una vez creada la tabla es interesante que abramos la barra de herramientas Tablas, ya que
incluye todas las herramientas para manipular una tabla. Para mostrar esta barra, en la barra de
mens Ver, Barras de Herramientas, Tablas.

El significado de cada uno de los botones, de izquierda a derecha, es el siguiente:

-Dibujar una tabla o un lmite de celda

-Borrar los bordes entre celdas

-Aadir una fila por encima de la fila seleccionada

-Aadir una columna a la izquierda de la columna seleccionada

-Eliminar las celdas seleccionadas

-Fusionar las celdas seleccionadas en una sola

-Dividir por la mitad la celda que est seleccionada

-Alinear el texto con el borde superior de la celda seleccionada

-Centrar el texto verticalmente en la celda seleccionada

-Alinear el texto verticalmente en la celda seleccionada

-Igualar el espacio disponible entre filas

-Igualar el espacio disponible entre columnas

-Configurar el color de fondo para la tabla

-Ajusta automticamente las columnas y las filas, una vez que ha terminado de dibujar la tabla.

El uso de las tablas es similar al del resto de programas de Microsoft Office, con lo que el usuario
habituado a manejar esta suite no tendr ningn problema en trabajar con las tablas de FrontPage.
Es habitual que las tablas se visualicen en Internet sin los bordes, ya que la utilidad mayor es la
organizacin de los contenidos (textos e imgenes) en cuadrculas y es ms esttico que los
bordes no aparezcan en la web.

En una tabla podemos colocar casi cualquier elemento HTML y ello incluye tambin otras tablas, lo
que se conoce como anidamiento. Es una de las herramientas fundamentales en el diseo web, la
posibilidad de generar tablas dentro de otras tablas para poder cambiar fondos, tipos de letra,
bordes, etc. de una forma ms eficiente.

En todas las celdas de una tabla podemos alinear texto, cambiar la anchura y altura, personalizar
el fondo y los colores. La forma de realizar estas tareas es seleccionando las celdas y a travs del
men tabla, propiedades de celda y cambiar las opciones deseadas. Finalmente nos aparece esta
ventana.
Captulo: Elementos del diseo avanzado - los marcos 12 / 20

Los marcos dividen la pantalla del navegador en ventanas individuales, cada una de ellas puede
albergar una pgina individual. Una pgina que aparece dentro de un marco puede incluir
cualquier elemento que se pueda incluir en una pgina web estndar.

Cada marco de una pgina con marcos es un archivo HTML independiente, por lo que una forma de
crear las pginas basadas en marcos es crear alguna de las pginas de contenido antes de crear el
conjunto de marcos. Posteriormente, las colocaremos en el conjunto de marcos para comprobar
que la apariencia es correcta.

Usos de los marcos.- A continuacin le explicamos los principales usos de los marcos.

1.Motores de bsqueda: un formulario de bsqueda aparece en un marco y los resultados en

otro.

2.Indice: es habitual que en la parte izquierda de la pgina exista un ndice de los contenidos de
la web. Con una pgina de marcos podemos hacer que al hacer clic en un enlace se abra en el
marco contiguo sin dejar de verse el ndice.

3.Barra de botones: funcionamiento similar al ndice.

4.Notas al pie

5.Libros de visitas

6.Anuncios publicitarios

El uso ms frecuente de los marcos ser incluyendo un marco de navegacin que permanece
inalterado a lo largo de la visita del usuario. El usuario hace clic en los enlaces o botones para
visitar otra parte de la web. Estos enlaces tienen como destino abrirse en otro marco de la pgina,
normalmente el marco ms grande.
Ejemplos de pginas con marcos: Lecciones de Ciberconta, Radio Huesca, Antena3 TV,
Altoragon.org.

Planificacin de la pgina con marcos.- En todo trabajo de diseo web es importante la

planificacin y todava lo es ms si queremos trabajar con marcos. Es necesario seguir una serie
de pasos:

-Realizar un boceto en papel sobre la apariencia de la pgina de marcos

-Planificar un esquema de colores

-Crear las pginas que llenarn los marcos

-Establecer el destino de los enlaces, definir que ocurrir cuando hagamos clic en todos y cada uno
de los enlaces de la pgina.

-Creacin de pginas de marcos

FrontPage nos ofrece una forma muy sencilla de crear una pgina con marcos y es a travs de las
plantillas que incorpora. Seguiremos los pasos:

Seleccionamos Archivo, Nuevo, Pgina, tras lo cual nos aparecer el siguiente cuadro de dilogo:

Podemos elegir cualquiera de los diseos predefinidos en FrontPage que luego podremos modificar
en cuanto altura y anchura de los marcos.

Suponemos que creamos una estructura con jerarqua anidada, que se compone de tres marcos,
de la siguiente forma:
Podemos reestructurar las plantillas que nos ofrece FrontPage para adecuarlas a nuestras
necesidades. Podemos cambiar los tamaos de los marcos (haciendo clic en los bordes y
arrastrando), dividir los marcos (Marcos, Dividir Marco) en filas o columnas y eliminar los marcos
(haciendo clic en el que queramos borrar o en la barra de mens seleccionar Marcos, Eliminar
marco).

Captulo: Cmo asociar una pgina inicial a un marco 13 / 20

Cuando se carga la pgina de marcos completa en la ventana de un navegador, cada marco

necesita rellenarse inicialmente con algo, que es la pgina inicial. Para asociar una pgina inicial a
un marco, seguiremos los siguientes pasos:

1.Hacer clic en el marco con el que deseamos trabajar.

2.Hacer clic en el botn Establecer pgina inicial, apareciendo el cuadro Crear Hipervnculo,
explicado en un apartado anterior.

3.Podemos asociar una pgina que tengamos grabada en el disco duro o seleccionar una direccin
URL.

4.Igualmente podemos asociar a un marco una nueva pgina que posteriormente editaremos y
guardaremos.

Cmo guardar un conjunto de marcos.- Un conjunto de marcos est constituido por varias pginas:
la pgina de marcos, que mantiene las instrucciones sobre cmo debe aparecer y actuar el
conjunto de marcos, y las pginas iniciales para cada marco del conjunto de marcos. Cuando
guardamos un conjunto de marcos debemos guardar todas estas pginas. Nos aparecer un
cuadro de dilogo con una vista en la cual se ver claramente qu marco es el que estamos
guardando.

Hay que tener mucho cuidado a la hora de guardar los archivos, ya que es fundamental para que
aparezcan con la misma estructura que deseamos.

Cmo modificar las propiedades de los marcos.- Adems de las propiedades que tiene cada pgina
web, los marcos de un conjunto de marcos tienen propiedades por s mismos, que se guardan en la
pgina principal, la cual almacena la informacin acerca de la estructura y funciones de cada
marco del conjunto de marcos. Haciendo clic con el botn derecho en un marco se abre el
siguiente cuadro de dilogo:
A travs de este cuadro de dilogo modificaremos todas las propiedades del marco que deseemos
de una forma muy sencilla. Podemos cambiar el ttulo, el vnculo a la pgina inicial -el tamao del
marco- si queremos que aparezca la barra de desplazamiento.

Si queremos seguir modificando la pgina de marcos, por ejemplo, desactivando los bordes de
marcos, lo podemos hacer haciendo clic en Pgina de marcos del anterior cuadro y despus en la
solapa Marcos hasta llegar a esta ventana:

A travs de esta opcin podemos cambiar el espaciado del marco, que es la cantidad de espacio
en blanco entre los marcos y los bordes del marco.

Ya hemos visto como se crea y edita una pgina con marcos, pero qu ocurre con los
hipervnculos?, en qu marco se abrirn? Esto hay que definirlo en la opcin Crear hipervnculo
cuando nos pide el marco de destino del enlace, en la ventana siguiente:
Elegiremos el destino del enlace eligiendo la opcin ms adecuada a nuestra pgina web. Por
ejemplo en las lecciones de Ciberconta, cada vez que pulsamos un enlace en los dos marcos, se
abre la pgina en el marco principal.

As pues, los marcos es una forma muy sencilla de organizar de forma estructurada las pginas
web manteniendo a la vista varias pginas, como por ejemplo un ndice. La edicin de cada pgina
dentro de una web de marcos se hace de forma idntica a una pgina que no tenga esta
estructura.

Captulo: Creacin de mapas de imgenes 14 / 20

Un mapa de imagen es una imagen que contiene enlaces. En qu se diferencia de una imagen
que es un enlace? Normalmente un mapa de imagen contiene al menos dos puntos activos o
enlaces entre sus bordes, es decir, dependiendo de donde hagamos clic en la imagen. Una
aplicacin interesante del mapeo de imgenes es un mapa de Espaa dividido por provincias y en
el que pulsando en cada provincia accedemos a la web de su Universidad. Lo podemos encontrar
en la siguiente direccin.

Cmo creamos un mapa de imagen.- En FrontPage seguiremos los siguientes pasos:

1.Insertamos una imagen en la pgina web, siguiendo el procedimiento visto anteriormente.

2.Debemos definir y tener muy claro cules van a ser las zonas activas de la imagen.

3.Hacemos clic en la imagen tras lo que aparece una barra de herramientas en la parte inferior de
la pgina.

4.En esta barra aparecen diferentes botones para alterar las propiedades de las imgenes. Para
crear las zonas activas emplearemos tres botones, que nos permitirn dibujar figuras geomtricas
en la imagen:

Crea una zona activa en forma rectangular

 Crea una zona activa en forma de crculo o elipse

Creamos cualquier tipo de figura

Para dibujar la imagen seleccionamos una de las tres opciones y arrastramos el ratn por la zona
que se quiere convertir en zona activa. Cuando se libera el botn del ratn, aparece el cuadro de
dilogo Crear hipervnculo, en el que especificaremos el destino para la zona activa que se acaba
de definir.

Cuando se disean mapas de imagen, a veces se intentan definir pequeas zonas activas, pero los
usuarios no buscan exhaustivamente esas minsculas zonas. Es ms conveniente definir zonas
activas amplias, que sean fciles de encontrar para que cumplan su funcin.

Elementos multimedia.- En una web no slo podemos incluir texto e imgenes, sino que tambin
se puede aadir vdeo, sonido y msica. Cada vez las conexiones a Internet tienen una mayor
velocidad y la visualizacin de los vdeos es mejor, aunque se precisar disponer de una muy
buena conexin para no preocuparse por el tiempo. Hay que tener en cuenta las necesidades
reales de la audiencia, los equipos de que se dispone y cmo se puede hacer para que el mensaje
se comunique de una forma ms efectiva.

Los tipos de archivo ms habituales para vdeo son AVI, QuickTime y Real Player. Para sonido son
WAV y MIDI.

Para colocar un vdeo en una pgina Web, tenemos dos opciones bsicas:

1.Incrustar el vdeo de forma que aparezca en la pgina del mismo modo que una imagen.

2.Crear un enlace a un archivo de vdeo de forma que el usuario pueda descargar el archivo y
luego un programa en el ordenador del usuario lo reproduce.

Para incrustar un vdeo en FrontPage seleccionamos Insertar, Avanzadas, Complemento hasta que
nos aparezca el siguiente cuadro de dilogo:
En el cuadro de texto Origen de datos escribiremos la ubicacin del vdeo que queremos emplear,
incluyendo la extensin del archivo. Para ello, pulsando el botn Examinar buscamos el archivo en
nuestro disco duro. En el cuadro Mensaje para exploradores que no admiten complementos se
escribir lo que aparecer cuando el navegador no disponga de soporte para complementos.

Adems, se puede modificar el tamao, espaciados, alineaciones y ocultar el control de la

reproduccin del sonido.

Utilizacin de sonido en una pgina.- Se dispone de tres mtodos bsicos para incluir sonido en las
pginas Web:

-Incrustar controles tipo VCR, que permiten al usuario reproducir el sonido a voluntad.

-Establecer un sonido de fondo, que se reproduce automticamente cuando se carga la pgina.

-Crear un enlace a un archivo de sonido, de forma que el usuario lo descarga y posteriormente un

programa en el ordenador del usuario lo reproduce.

Para incrustar el sonido seguiremos los mismos pasos que en el apartado anterior al insertar un
vdeo. Simplemente al elegir el archivo, tendr extensin de sonido en lugar de vdeo.

Para escuchar el sonido simplemente pulsamos el botn de reproducir. Por defecto FrontPage va a
reproducir automticamente el sonido al cargar la pgina. Si no queremos que esto sea as, habr
que modificar el cdigo HTML en la lnea donde figura el complemento. Incluiremos
autostart="false" en la etiqueta EMBED.

Si queremos hacer un enlace a una pgina web que apunta a un sonido seguimos el procedimiento
habitual para crear hipervnculos. Esta es una solucin buena cuando el archivo ocupa bastante y
no queremos cargar nuestro espacio web disponible.

Para poner un sonido de fondo en una pgina web seleccionamos la opcin Propiedades de Pgina
haciendo clic con el botn derecho en el fondo de la pgina.

En la opcin Sonido de fondo especificamos el archivo de sonido (se utilizan archivos con extensin
MID ya que ocupan muy poco espacio) y seleccionamos cuantas veces lo queremos reproducir
(Bucle) o si queremos que tenga reproduccin continua (Siempre).
Un ejemplo de web con sonido de fondo es www.altoaragon.org.

Antes de incluir un sonido en una web hay que detenerse a pensar si es imprescindible su
colocacin y que debemos poner en la pgina que lleva un sonido de fondo, ya que mucha gente
navega sin conectar los altavoces y por lo tanto no se enterara de que lleva ese sonido.

Captulo: Las hojas de estilos 15 / 20

Una hoja de estilo es una coleccin de reglas que afectan a la apariencia de un documento, puede
estar incrustada en la pgina o almacenada en un archivo independiente que luego se enlaza a
una o ms pginas de su sitio.

FrontPage facilita el trabajo con las declaraciones de estilos mediante el cuadro de dilogo Estilo,
que aparece en muchos cuadros de dilogo de FrontPage. Actualmente la forma habitual de la
tecnologa de estilo es las Hojas de Estilo en Cascada (CSS).

Podemos seguir el funcionamiento de las Hojas de Estilo a travs del siguiente Tutorial disponible
en Internet, que nos explica el fundamento de la programacin de las hojas de estilo en HTML.

FrontPage nos ofrece varias plantillas de hojas de estilo, que suponen trabajar con algo hecho y
para utilizarlas seguimos los siguientes pasos:

1.Seleccionar Archivo, Nuevo, Pgina. Entonces aparece el cuadro de dilogo Nuevo en el que
haremos clic en la pestaa Hoja de estilos hasta que aparezca la siguiente ventana:

2.Elegiremos el estilo que queramos, tras lo cual FrontPage abrir la hoja de estilo en la que
veremos reglas de estilo o conjuntos de reglas. Si queremos podemos hacer cualquier modificacin
a la hoja de estilo guardndola en el sitio web junto con las pginas. De esta forma ya tenemos
una hoja de estilos externa, tras lo cual deberemos asociar la hoja a nuestras pginas.

Para aadir la hoja de estilos CSS a parte de la web habr que enlazarla a cada archivo empleando
la opcin Vnculos de hoja de estilos del men Formato, apareciendo el siguiente cuadro de
dilogo:
3.Si queremos que la hoja se aplique a todas las pginas de nuestra web, seleccionamos Todas las
pginas. En cambio, si slo lo queremos aplicar a ciertas pginas, seleccionamos Pginas
seleccionadas.Pulsamos en Agregar para encontrar y aadir el archivo de la hoja de estilos (con
extensin CSS).

Pulsando Aceptar, FrontPage enlaza automticamente la hoja de estilos a las pginas que se han
elegido.

Para crear una hoja de estilo autntica, seleccionaremos el men Formato, Estilo, tras lo que
FrontPage abre un cuadro de dilogo que contiene un conjunto de etiquetas, as como un mtodo
personalizado de modificacin. Es preciso conocer el lenguaje HTML ya que lo que se van a
modificar son las etiquetas de este lenguaje. FrontPage colocar las etiquetas de hojas de estilos
(<STYLE> y </STYLE>) de forma automtica.

EJEMPLO:

Suponemos que aplicamos una regla para que todos los prrafos estn alineados en el centro. Al
seleccionar en la barra de mens Fomato, Estilo nos aparece la siguiente ventana:
Elegimos el selector que queremos modificar, en este caso <p> que es la etiqueta de prrafo. A
continuacin hacemos clic en Modificar para crear un estilo para esta etiqueta, seleccionando la
opcin de alineacin en el centro.

Aparecer el siguiente cuadro de dilogo

En esta ventana, haciendo clic en Formato podremos modificar las opciones en cuanto a fuente,
alineacin, etc. de todos los prrafos.
Una vez generado el estilo, el cdigo HTML que se nos ha generado ha sido el siguiente, incluido
dentro de la etiqueta HEAD del documento.

<style>

<!--

p { text-align: center }

-->

</style>

As pues, las hojas de estilo nos permiten configurar la presentacin de una pgina o sitio web de
una forma muy sencilla, aunque requiere el conocimiento del lenguaje de programacin HTML.

Ejemplo de estilos sobre los hipervnculos.- En muchas pginas hemos observado que los
hipervnculos aparecen sin el subrayado habitual o cambian de color cuando situamos el puntero
del ratn encima de ellos o el subrayado aparece slo cuando lo hemos visitado. Estos efectos se
hacen con hojas de estilos, modificando las caractersticas de la etiqueta <a> del cdigo HTML. El
hipervnculo lo podemos clasificar de cuatro formas:

a:active: define el estilo de un hipervnculo activo

a:hover: define el estilo del hipervnculo cuando situamos el ratn sobre l.

a:link: define el estilo del hipervnculo cuando entramos en la web y no actuamos sobre l.

a:visited: define cmo ser la apariencia del hipervnculo cuando lo hemos visitado

La forma de modificar estos selectores es la que hemos visto anteriormente, seleccionando el

men Formato, Estilo y cuando elijamos las etiquetas que vamos a modificar, seleccionamos "a" y
le aadimos las propiedades de los hipervnculos.

Una vez que hemos aadido hover (estilo del link cuando situamos el ratn encima) seleccionamos
Formato y definimos la fuente, el color, y el relleno.

Captulo: Los formularios Usos 16 / 20

Los formularios suponen una de las mejores formas de interactuar con los usuarios de la web. Si
alguna vez hemos utilizado un motor de bsqueda, rellenado una encuesta online; solicitado
productos a travs de la web; registrado como miembro de un sitio o participado en un concurso
online; entonces hemos empleado un formulario.

Los formularios en el mundo real son hojas de papel con espacios para rellenar que estn junto a
una etiqueta, de forma que todo el mundo presente su informacin de la misma forma.

Usos de los formularios.- Se pueden emplear para recoger cualquier tipo de informacin, como por
ejemplo:

-Crear un formulario de registro para conocer quines son sus usuarios.

-Solicitar a los usuarios que rellenen una encuesta.

-Proporcionar un formulario de comentarios para recoger las opiniones de los usuarios.

-Disear un formulario web para actualizar una base de datos.

-Desarrollar una herramienta de bsqueda para buscar en el sitio web.

-Ofrecer un registro online para un acontecimiento, conferencia o concurso.

-Crear un sistema de nombre y usuario para restringir el acceso al sitio

A travs de los formularios haremos clic en Botones, seleccionaremos Casillas de verificacin,

teclearemos texto y seleccionaremos Opciones de las listas desplegables. Despus de rellenar un
formulario, a travs del botn denominado Enviar la informacin se enviar a un "gestor de
formulario" que puede hacer varias cosas con los datos:

- Almacenar los datos en un archivo de texto para recuperarlos ms tarde.

- Enviar los datos por correo electrnico directamente al administrador de la web.

- Aadir la informacin desde los formularios a la base de datos

- Introducir directamente los datos en una pgina web del sitio.

Es importante crear una pgina de confirmacin que informe al usuario de que los datos han sido
recibidos y aceptados. Igualmente esta pgina de confirmacin proporciona al usuario un enlace
para volver a la pgina principal o a la pgina desde la que se hizo la encuesta.

Captulo: Los formularios - Su creacin 17 / 20

FrontPage posee un Asistente para la creacin de formularios que nos va a ayudar y permitir que
nuestra pgina web los incluya de una forma muy sencilla. Es importante conocer que para que
nuestra web pueda ejecutar los formularios de FrontPage el servidor donde tenemos alojada la web
nos debe ofrecer el servicio de las extensiones de FrontPage.

Podemos crear el formulario a travs del Asistente que nos proporciona FrontPage al seleccionar el
men Archivo, Nuevo, Pgina y elegirlo de entre las diferentes plantillas que aparecen. Con el
asistente simplemente nos basta con seguir los pasos para seleccionar los campos que hemos de
aadir, datos del usuario, forma de enviar los datos, etc.

A pesar de poseer el Asistente, FrontPage hace muy fcil la creacin y edicin de formularios en las
pginas web sin utilizar dicho Asistente. Antes de crear el formulario es conveniente conocer los
diferentes tipos de campos que podemos incorporar:

-Cuadro de texto: son adecuados para respuestas cortas.

-Cuadro de texto con desplazamiento: se utilizan para respuestas ms largas. Almacena

suficiente texto como para disponer de sus propias barras de desplazamiento.

-Casillas de verificacin: se utilizan para preguntas de verdadero o falso. Se pueden usar varias
casillas de verificacin junta (como en los formularios "Seleccione todo lo que es aplicable").

-Botn de opcin: son adecuados para preguntas de verdadero o falso o de seleccin mltiple y
slo se admite la eleccin de uno de ellos.

-Men despleglable: sirve para permitir que los usuarios elijan entre diferentes opciones,
ordenadas en un pequeo cuadro de texto. Son botones que permiten a los usuarios enviar todos
los datos a su destino. Sin ellos el formulario no servira para nada.

Para agregar un formulario de forma manual en nuestra pgina, seleccionamos Insertar, Formulario
y vamos aadiendo dentro de ste los diferentes campos que son posibles. En cada formulario slo
debe haber un botn de enviar y restablecer, que ser el que transmitir al gestor de formulario
los datos introducidos.

Una vez que el usuario hace clic en el botn Enviar de su pgina web, los datos introducidos por el
usuario se envan al gestor de formulario, que procesa las respuestas. Se puede elegir un gestor de
formulario basado en FrontPage (es necesario que el servidor tenga instaladas las extensiones de
FrontPage), configurar el gestor de formulario para que funcione con secuencias de comando
propios instalados en nuestro sitio web (hay que conocer si nuestro alojamiento dispone de cgi de
formulario preinstalado) o gestionarlo con un servidor de Internet que nos ofrezca este servicio,
como por ejemplo Melodysoft.

Tenemos dos alternativas principales para gestionar los datos: enviarlos a un archivo o a una
direccin de correo electrnico

Para configurarlo en FrontPage seguimos los siguientes pasos:hacemos clic con el botn derecho
dentro del formulario y elegimos Propiedades de formulario apareciendo el siguiente cuadro de
dilogo

Seleccionamos la opcin que deseamos para nuestro formulario en Enviar a:

Si escogemos la opcin de un archivo debemos pulsar Examinar para elegir dicho archivo y luego
pulsar Opciones, apareciendo el siguiente cuadro de dilogo, en el que elegiremos nuestras
preferencias sobre el archivo (ubicacin, formato de archivo y la posibilidad de incluir o no los
nombres de campo).
Si escogemos la opcin de Resultados por Correo Electrnico, nos enviar los datos introducidos en
el formulario a la cuenta de correo que le indiquemos. Aparece el siguiente cuadro de dilogo:
Debemos seleccionar la direccin email y el formato de correo electrnico que deseamos que
llegue como confirmacin, en cuanto al tipo de texto, asunto y Responder a.

Una opcin fundamental es crear una pgina de confirmacin del envo del formulario para que el
visitante se asegure del envo de sus datos. En el cuadro de dilogo anterior seleccionamos la
solapa Pgina de confirmacin y seleccionaremos la direccin URL de la pgina de confirmacin.

Los formularios son una herramienta imprescindible para interactuar con el visitante. Con
FrontPage es muy sencilla su creacin pero si queremos asociar formularios con bases de datos
para introducir, modificar o eliminar registros y para realizar consultas o listados, se debern
emplear los lenguajes de programacin ASP o PHP.

Captulo: El HTML dinmico 18 / 20

El HTML Dinmico (DHTML) se refiere al uso de JavaScript, Hojas de Estilo en Cascada (CSS) y
tecnologa de navegador para hacer pginas ms vibrantes y activas. Los efectos del HTML
dinmico que crea FrontPage de forma sencilla exigiran un alto grado de conocimiento de cada
una de las tecnologas anteriormente citadas. El problema del HTML dinmico es que su
visualizacin es diferente en funcin del tipo de navegador que estemos manejando (Internet
Explorer o Netscape Navigator).

Para aadir efectos DHTML debemos mostrar la barra de herramientas especfica, seleccionando
Ver, Barras de Herramientas, Efectos DHTML:

Podemos aadir efectos tanto a textos como a imgenes.

El texto animado.- Le explicamos los pasos que debe seguir para insertar un texto animado.
1.Seleccionamos el texto que se quiere animar.

2.En la barra de efectos DHTML podemos elegir entre cuatro alternativas:

-Clic: hace que la animacin ocurra cuando se haga clic en el texto.

-Doble clic: la animacin ocurrir tras un doble clic en el texto.

-Pasar el mouse: la animacin ocurrir cuando el ratn pasa por el texto.

-Carga de pgina: la animacin se producir cuando se carga la pgina.

3.Elegimos entre dos opciones: Volar hacia fuera (el texto se mover de la forma que indiquemos)
o Formato (cambia la fuente, tamao, color, relleno,... del texto).

Imgenes animadas.- Podemos hacer que una imagen vuele, que su borde cambie de estilo o
incluso que se cambie la imagen al situar el ratn encima de ella. Veamos los pasos a seguir.

1.Seleccionamos la imagen que se quiere animar.

2.En la barra de efectos seleccionamos las mismas alternativas que en el texto (clic, doble clic,
pasar el mouse y carga de pgina), aunque con posibilidades diferentes.

3.Por ejemplo, podemos hacer que al situar el ratn sobre una imagen, esta cambie a otra imagen.
Para ello insertamos una imagen, la seleccionamos y en la barra DHTML escogemos "Pasar el
mouse", Aplicar "Intercambiar imgenes" y seleccionamos la imagen que deseamos que aparezca.

Transiciones entre pginas.- Al igual que con textos e imgenes, podemos aplicar efectos DHTML
para establecer transiciones entre pginas, es decir, definir el paso de una pgina a otra. Para ello
seleccionamos Formato, Transicin de Pgina, apareciendo el siguiente cuadro de dilogo:

En este cuadro de dilogo seleccionaremos el efecto que deseamos al pasar a la pgina siguiente.
Al pulsar la flecha verde del final de esta pgina, para pasar a la siguiente, se realiza el efecto
"Salida en crculo".

Captulo: Recursos gratuitos en Internet 19 / 20

En Internet existen multitud de recursos gratuitos para disear pginas webs. As podemos
encontrar manuales, tutoriales, alojamientos gratuitos, servicios interactivos (foros, chats,
formularios, libros de visitas) que nos pueden ayudar a realizar muy buenos diseos.

Adems, una forma de aprender que no debemos descartar es a travs de los foros y las news,
donde cada usuario consulta sus dudas y resuelve las dudas que plantean otros usuarios. Es
imprescindible la visita a Foros del Web, donde existen foros temticos para todo tipo de lenguajes
de programacin web, para sugerencias y crticas a las webs que plantean los usuarios.

Una recopilacin de enlaces la podemos encontrar en la leccin Estndares HTML y XML de Carlos
Serrano y disponible en Ciberconta.

Esta seccin ser actualizada con frecuencia con los recursos gratuitos que vaya encontrando en
Internet y con los que nos sugiera el visitante a travs de correo electrnico.

Captulo: Publicacin de la web 20 / 20

Una vez que hemos diseado una pgina web llega el momento de publicarla en Internet. Para ello
hemos de encontrar alguien que nos aloje la web y que nos ofrezca servicios adicionales (cuentas
de correo, FTP, estadsticas,...). Para empezar es suficiente con registrarnos en alojamientos
gratuitos que nos ofrecen suficiente espacio aunque cuentan con el inconveniente de que no nos
conceden un nombre personalizado y que en la mayora de los casos introducen publicidad.

Si tenemos intenciones ms "serias" con nuestra web, podemos registrar un nombre de dominio y
contratar alojamiento de pago, que casi siempre ser mejor y no colocar publicidad en nuestro
sitio web.

Una vez elegida la forma de alojamiento, habr que enviar nuestros archivos al directorio que nos
han adjudicado en el servidor, a travs de un programa FTP.

Hasta aqu hemos llegado con los contenidos del curso de FrontPage, esperamos que le hayan sido
de gran utilidad y que, si se anima a crear su site, sea todo un xito.