Manual Completo Frontpage
Manual Completo Frontpage
Manual Completo Frontpage
Una página Web es un documento que puede ser visualizado con un navegador
de Internet. Un sitio Web es un conjunto de páginas Web relacionadas entre
sí. FrontPage nos permite diseñar y modificar tanto el sitio como cada página,
y nos ayuda en su edición y mantenimiento.
Integración con Office
FrontPage es parte del paquete de aplicaciones OfficeXP, y comparte muchas
de las características 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 servirán para FrontPage y viceversa. Algunas
de las características que comparten son:
Los menús y los iconos son similares entre cada aplicación y realizan la misma
función.
Por otra parte, los documentos de Word pueden ser convertidos a páginas
Web. Gracias a esto podemos crear páginas Web a partir de documentos que
ya tengamos escritos en Word de una forma fácil y sencilla. Esto también se
aplica a otra clase de documentos como hojas de cálculo de Excel, ficheros de
Access, etc.
Mi primer documento con FrontPage
Vamos a construir una sencilla página Web para demostrar lo sencillo y potente
que puede llegar a ser FrontPage.
1
Escuela de Informática - Programación y Diseño web FRONTPAGE
Al arrancar el programa, nos aparece por defecto una página web en blanco en
la que podemos trabajar. Si no nos aparece, basta con que pulsemos en el icono
.
2
Escuela de Informática - Programación y Diseño web FRONTPAGE
Podemos ponerle a la página web un título. Para ello, antes de guardar la web,
hemos de pulsar en el botón Cambiar título, y ponerle un título que aparecerá
en la ventana del navegador.
Visualizar la Web.
Ahora vamos a visualizar la página. Para visualizar el archivo, hacemos clic
3
Escuela de Informática - Programación y Diseño web FRONTPAGE
4
Escuela de Informática - Programación y Diseño web FRONTPAGE
Todas las operaciones se pueden hacer a partir de estos menús. Pero las cosas
más habituales se realizan más rápidamente desde los iconos de las barras de
herramientas que veremos en el siguiente punto.
Cada opción tiene una letra subrayada, esto indica que se puede acceder
directamente a la opción pulsando simultáneamente la tecla alt y la letra
subrayada, por ejemplo si pulsamos alt+a se abre la opción Archivo.
5
Escuela de Informática - Programación y Diseño web FRONTPAGE
• La barra de Formato.
6
Escuela de Informática - Programación y Diseño web FRONTPAGE
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:
Hipervínculos: Al hacer clic aquí, nos aparece una relación de todas las páginas
enlazadas de la Web.
Tareas: Al hacer clic aquí, nos aparece una pequeña lista de tareas que
podemos usar sobre todo si trabajamos en grupo.
7
Escuela de Informática - Programación y Diseño web FRONTPAGE
8
Escuela de Informática - Programación y Diseño web FRONTPAGE
¿Qué clase de Web vamos a crear? Existen muchos tipos, pero vamos a nombrar
algunos de los más utilizados:
Sitio personal: Son los sitios diseñados para conocer la vida y obra de
alguien. Es el más sencillo, podemos usar un alojamiento Web gratuito
(normalmente incluyen publicidad) y se compone de unas pocas páginas.
Sitio de una empresa: Son los sitios diseñados para dar a conocer una
empresa. Pueden ser sencillos, en el caso de empresas pequeñas, o muy
complejos, en el caso de grandes empresas. Normalmente tienen una dirección
propia (www.nombre_de_la_empresa.com) y almacenan información
corporativa.
Sitio de una tienda online: Son los sitios diseñados para vender por
Internet. Cualquier empresa, grande o pequeña, pueden llegar a cualquier
cliente del planeta gracias a Internet. Este puede también estar incluido en el
sitio de una empresa.
9
Escuela de Informática - Programación y Diseño web FRONTPAGE
Web.
Crear un boceto de la Web. Estructura de ficheros.
A la hora de diseñar un sitio Web, es conveniente diseñar un boceto sobre
cómo va a ser la Web. Tenemos que decidir cómo vamos a estructurarla.
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.
10
Escuela de Informática - Programación y Diseño web FRONTPAGE
barra de formato
11
Escuela de Informática - Programación y Diseño web FRONTPAGE
Para hacer la letra con efecto negrita, cursiva o subrayado tenemos que
pulsar el botón N, el botón K o el botón 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
características, debemos seleccionarlo y pulsar en los iconos como hemos
hecho antes.
Como se puede observar lo que tenemos que hacer para formatear texto es,
básicamente, 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 párrafos.
Para introducir párrafos mientras escribimos un texto, debemos pulsar la
tecla Enter. FrontPage automáticamente comenzará un nuevo párrafo y
aplicará algunas características propias de un procesador de textos, como son
las sangrías y el espaciado entre párrafos. Podemos modificarlas para que
salgan como queramos.
12
Escuela de Informática - Programación y Diseño web FRONTPAGE
Vamos a modificar
las características del párrafo. Para ello basta con que situemos el cursor en
cualquier parte del párrafo a modificar y pulsar el botón derecho. En el menú
contextual pincharemos en la opción Párrafo.
13
Escuela de Informática - Programación y Diseño web FRONTPAGE
Alineado a la derecha.
14
Escuela de Informática - Programación y Diseño web FRONTPAGE
Alineado al centro.
Alineado justificado: 'estira' el texto para que ocupe todo el área de texto.
15
Escuela de Informática - Programación y Diseño web FRONTPAGE
Ahora
vamos a trabajar el Espaciado en el propio párrafo y entre párrafos. Si
abrimos el menú contextual podemos observar las siguientes opciones:
Antes de: Deja un espacio antes del párrafo actual. Se especifica en píxeles.
16
Escuela de Informática - Programación y Diseño web FRONTPAGE
Espaciado después
de: (15 píxeles)
Espaciado de
interlineado: (1,5
líneas)
Este es el primer
párrafo.
Este es el segundo
párrafo.
Este es el primer
párrafo.
Este es el segundo
párrafo.
17
Escuela de Informática - Programación y Diseño web FRONTPAGE
Unidad 5. Imágenes
Vamos a ver cómo se usan las imágenes en una página Web, cuáles son los
formatos más usados en Internet y cómo combinar imágenes y texto para tener
una Web atractiva.
Formatos de imágenes 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 pequeñas 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 máximo 256 colores, por lo que al representar una foto puede perderse
colorido. Por ello es usado para mostrar dibujos, esquemas, fondos y pequeñas
fotos. Tiene varias características interesantes, como son el entrelazado y la
transparencia. Al contrario que JPG, que veremos a continuación, no se
pierde calidad con este formato.
18
Escuela de Informática - Programación y Diseño web FRONTPAGE
Imagen
original/final
Imagen cargando
19
Escuela de Informática - Programación y Diseño web FRONTPAGE
Veamos un ejemplo de una foto guardada en formato GIF, en JPG y en JPG con
mucha compresión, así como su tamaño para hacernos una idea de cuanto
tardaría en cargarse desde Internet (suponiendo una conexión con módem, que
es la más lenta pero la más extendida).
20
Escuela de Informática - Programación y Diseño web FRONTPAGE
Foto original
FOTO GIF
FOTO JPG
poca
compresión
FOTO JPG
mucha
compresión
188 kb - 22
segundos
37 kb - 5
segundos
17 kb -2
segundos
8 kb - 1
segundo
21
Escuela de Informática - Programación y Diseño web FRONTPAGE
Ahora tan sólo tenemos que elegir la imagen de nuestro disco duro que
queremos incluir en nuestra página, pulsando en Insertar para cargarla. Como
podemos observar podemos cargar distintos tipos de imagen. FrontPage las
guardará automáticamente como GIF si la imagen tiene 256 o menos colores, o
como JPG si tiene más.
Cambiar el tamaño de una
imagen.
Tras cargar la imagen, es el momento para que ajustemos su tamaño al que
más nos interese. Para ello hacemos clic en ella con el botón izquierdo del
ratón sobre la imagen y aparecerán 4 cuadraditos en la imagen. Pinchando en
ellos con el botón izquierdo del ratón y sin soltar, arrastrando el ratón,
podemos cambiar el tamaño de la imagen (el ratón cambia de forma cuando lo
22
Escuela de Informática - Programación y Diseño web FRONTPAGE
Cambiar el tamaño de una imagen hace que pueda parecer distorsionada. Esto
puede notarse más o menos según el tamaño original de la imagen. Mientras
más cambie una imagen, más se distorsiona. Si queremos cambiar el tamaño
de una imagen conservando todo lo que se pueda la imagen original, debemos
usar un programa de tratamiento de imágenes, aunque para pequeños cambios
podemos usar FrontPage perfectamente.
Después tenemos que buscar qué imagen queremos poner como fondo,
haciendo clic en Examinar.
23
Escuela de Informática - Programación y Diseño web FRONTPAGE
Unidad 6. Hipervínculos
Vamos a ver qué son los hipervínculos y como usarlos para hacer navegables
nuestro sitio Web, de forma que los usuarios puedan navegar de una página
Web a otra. Aprenderemos qué tipos de hipervínculos existen y para qué
sirven.
¿Qué es un hipervínculo?
Un hipervínculo es un enlace, normalmente entre dos páginas web de un
mismo sitio, pero un enlace también puede apuntar a una página 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. También se conocen como hiperenlaces,
enlaces o links.
Por lo tanto, podemos usar los hipervínculos para conducir a los visitantes de
nuestro sitio web por donde queramos. Además, si queremos que se pongan en
contacto con nosotros, nada mejor que ofrecerles un hipervínculo a nuestro
correo electrónico. Vamos a ver cómo hacer todo esto.
Tipos de hipervínculos.
24
Escuela de Informática - Programación y Diseño web FRONTPAGE
Hipervínculo de texto.
Hipervínculo de imagen.
Por otra parte, los hipervínculos pueden referirse a páginas del mismo sitio
web o de otros sitios web.
Por ejemplo, supongamos que tenemos un vínculo desde esta página a otra
llamada curso que está en la carpeta access. El vínculo sería:
access/curso.htm
Unidad 7. Tablas
Vamos a ver qué son las tablas y cómo trabajar con ellas, para poder presentar
datos de forma ordenada y para situar en pantalla objetos en un lugar
concreto.
26
Escuela de Informática - Programación y Diseño web FRONTPAGE
Desde el menú
Ver, hacemos clic
en Barras de
herramientas y
después en Tablas.
Poniendo el
ratón sobre una barra de herramientas hacemos clic con el botón derecho del
ratón y después pulsamos en Tablas.
Las tablas son representadas en FrontPage de esta manera:
27
Escuela de Informática - Programación y Diseño web FRONTPAGE
Al soltar el ratón,
aparecerá la tabla en pantalla.
28
Escuela de Informática - Programación y Diseño web FRONTPAGE
Por defecto, la
tabla ocupa
todo el ancho
posible de la
página y tiene
un borde de 1
píxel. Estas y
otras
propiedades
pueden
cambiarse
fácilmente,
como veremos
después.
Para desplazarnos por las celdas podemos usar los cursores. Otra posibilidad
es pulsar la tecla tabulador y tabulador + Mayúsculas si queremos avanzar y
retroceder celda por celda. Si pulsamos tabulador cuando estemos en la
última celda de una tabla, automáticamente añadiremos una nueva fila a la
tabla.
29
Escuela de Informática - Programación y Diseño web FRONTPAGE
Unidad 8. Marcos
30
Escuela de Informática - Programación y Diseño web FRONTPAGE
Unidad 9. Formularios
¿Qué es un formulario?
Un formulario es un conjunto de elementos que se utilizan para recopilar
información. Un formulario electrónico es similar a un formulario en papel.
Veamos un ejemplo:
Este es un ejemplo de
formulario
32
Escuela de Informática - Programación y Diseño web FRONTPAGE
Formulario: Crea un
área en la que podemos
introducir los elementos
del formulario. Se
reconoce por una línea
discontinua, que no es
visible para el usuario.
Este elemento es
imprescindible. Por
defecto se crean dos
botones de uso habitual,
Enviar y Restablecer,
que podemos cambiar o
borrar si queremos.
33
Escuela de Informática - Programación y Diseño web FRONTPAGE
34
Escuela de Informática - Programación y Diseño web FRONTPAGE
Introducción
Una página Web puede tener distintos tipos de elementos interactivos y
multimedia. Un elemento interactivo es un elemento que puede cambiar
dependiendo de cómo actúe el usuario. Un elemento multimedia puede ser un
sonido, una canción, un vídeo...
Ambos tipos de elementos pueden darle vida a una Web, pero utilizar en
exceso esta clase de elementos hará que la carga de nuestra Web sea lenta y
engorrosa, por lo que los visitantes podrían perder el interés. Por lo tanto,
hemos de usarlos con mesura.
Existen objetos que son una mezcla de ambos, como son las animaciones
Flash. Estas animaciones pueden incluir sonidos e imágenes, y además ser
interactivas.
Entonces hacemos clic en la vista HTML para ver el código y, en el lugar dónde
se encuentre el cursor, añadimos esto:
35
Escuela de Informática - Programación y Diseño web FRONTPAGE
Ahora vamos a hacer algo más sofisticado: vamos a crear un botón para
desplazarnos por la página. Se trata del típico botón Subir/Bajar.
Podemos poner tantas anclas como queramos, siempre que no mezclemos sus
nombres.
36
Escuela de Informática - Programación y Diseño web FRONTPAGE
Como ejemplo, al pulsar este botón iremos hacia arriba, al principio del
apartado.
37
Escuela de Informática - Programación y Diseño web FRONTPAGE
Una hoja de estilos puede estar contenida en la misma página donde se utiliza
o puede estar definida en un archivo aparte. De la segunda forma, podemos
definir estilos para todo el sitio Web, mientras que de la primera tendremos
que escribir el mismo código en cada página cada vez que lo necesitemos. Por
eso la primera se utiliza cuando se quiere aplicar algún efecto en particular y
la segunda cuando ese efecto es el mismo para todas las páginas. Existe una
tercera posibilidad, y es especificar el estilo en la propia etiqueta HTML dónde
queramos usarlo, con lo que el efecto sólo se producirá en ese lugar.
Esto implica conocer código HTML y las propiedades que queramos cambiar.
Esto tendríamos que repetirlo para cada elemento del texto cuyo estilo
deseamos cambiar. Por ello, al ser poco eficiente, se usa la primera forma o la
segunda, antes mencionadas.
Estas formas también requieren conocer HTML. Por ello FrontPage nos facilita
el uso de estilos por medio de las plantillas, que nos permite usar hojas de
estilo con pocos conocimientos de HTML.
38
Escuela de Informática - Programación y Diseño web FRONTPAGE
D
e spu
é s
Elegimos el estilo Arcos. Hacemos clic en Aceptar y FrontPage nos abre una
nueva hoja de estilos.
Arcos es una hoja de estilos que se caracteriza por hacer el texto de color
marrón, con el tipo de letra verdana, encabezados con el tipo de letra Times
New Roman y con fondo de color amarillo pálido.
Podemos ver como la hoja tiene un nombre de estilo, que se caracteriza por
acabar en .css. Si examinamos la hoja veremos el código del estilo
etiqueta_HTML
{
características
39
Escuela de Informática - Programación y Diseño web FRONTPAGE
Para ello hacemos clic en el botón Estilo que aparece en mitad de la pantalla.
Aparece la siguiente ventana, que nos muestra los estilos que están
modificados, que en este momento serán los modificados por defecto de la
plantilla de FrontPage.
Veámosla:
Aparece el cuadro de diálogo Estilo, que nos muestra los estilos que están
modificados, que en este momento serán los modificados por defecto en la
plantilla de FrontPage.
Veámosla:
40
Escuela de Informática - Programación y Diseño web FRONTPAGE
Aquí podemos cambiar las características de las etiquetas HTML y tener una
vista previa de estos.
41
Escuela de Informática - Programación y Diseño web FRONTPAGE
Crear una plantilla es muy sencillo. Creamos una página nueva y la llenamos
del contenido que necesitemos. Para guardarla, la guardaremos como Plantilla
en vez de como página web, como hacíamos hasta ahora.
Al guardar una
plantilla tenemos que
darle un nombre para
poder identificarla. Es
recomendable poner
una pequeña
descripción.
Si queremos que la
plantilla sólo pueda
usarse en la web
actual, hemos de
marcar la casilla
correspondiente. Esto
es útil cuando tenemos varias webs, cada una con sus propias plantillas. Por
42
Escuela de Informática - Programación y Diseño web FRONTPAGE
Para modificar una plantilla tan sólo hemos de abrir un nuevo documento
basado en la plantilla que queramos modificar, modificarla y guardarla con el
mismo nombre. Para ello seleccionaremos la plantilla haciendo clic en
Examinar, y después haremos clic en Aceptar.
43
Escuela de Informática - Programación y Diseño web FRONTPAGE
de un sitio web
Vamos a aprender cómo comprobar el buen funcionamiento de nuestro sitio
web. Veremos qué elementos de FrontPage nos pueden ayudar en esta tarea.
Informes del sitio web. Mantenimiento.
FrontPage nos proporciona una serie de herramientas para comprobar el
funcionamiento del sitio web y llevar su mantenimiento. Estas herramientas
funcionarán para un sitio web, pero no para una página individual. Algunas de
estas herramientas son:
Vista de Informes: Nos permite ver una serie de parámetros que nos
informan sobre el estado de la web.
FrontPage nos muestra un resumen de los informes del sitio web. Hay una
pequeña descripción de para qué sirve cada informe y otros datos, como un
contador que muestra la cantidad de páginas o enlaces, y una columna que nos
muestra el tamaño de un conjunto de páginas determinado. Estos son los
diferentes informes:
44
Escuela de Informática - Programación y Diseño web FRONTPAGE
Temas no utilizados: Si decidimos utilizar un tema para una página del sitio
y después borramos la página, en nuestro sitio web quedarán los archivos del
tema. Este informe nos muestra qué tema es, para que lo eliminemos y
ahorremos espacio.
45
Escuela de Informática - Programación y Diseño web FRONTPAGE
Vamos a ver cómo tener nuestra propia página web en Internet. Veremos
cómo subir la página a un servidor de forma que cualquier persona con acceso
a Internet pueda verla. Es importante que al elegir un servidor, ya sea gratuito
o de pago, nos aseguremos de que soporta las extensiones de FrontPage. Si
no lo hace, podrá seguir utilizando el servidor para alojar la web, pero algunas
características avanzadas de FrontPage no funcionarán.
Publicar en Internet.
Una vez tenemos acabada nuestra página Web podemos publicarla en Internet
y podrá ser vista desde cualquier parte del mundo. Sólo tienes que seguir los
pasos que te vamos a indicar, sin gastarte un duro. Así de sencillo.
Para que tu página se vea desde Internet simplemente tiene que estar
almacenada en un servidor de Internet.
Los servidores de pago son muchos y variados. Los mismos servidores gratuitos
nos ofrecen servicios extra por una pequeña cantidad de dinero, amen de
46
Escuela de Informática - Programación y Diseño web FRONTPAGE
eliminar la publicidad.
A partir del momento en que transfieras tus ficheros ya podrás ver tus páginas
en Internet tecleando la dirección (URL) que te asignen. Por ejemplo.
http://members.es.tripod.de/tunombre/tupagina.htm
Pero para ello, has de poner tus archivos en el ordenador que hace de servidor,
ya sea de pago o gratuito. Se suele decir que se 'suben' las páginas a Internet.
Para ello podemos usar un programa especializado o subir los archivos desde
las páginas web del servidor. La segunda forma es más sencilla, pero
normalmente tenemos que subir los archivos de uno en uno. Si tenemos
muchos archivos, es conveniente usar un programa especializado en mandar
archivos llamado FTP.
47
Escuela de Informática - Programación y Diseño web FRONTPAGE
<BODY>
<TABLE>
<tr>
<td width="85%" align="center">
style="font-family: arial"
onClick = "window.open('pagina_pruebas.htm','ayuda','resizable=yes,
scrollbars=yes,menubar=yes,width=300,height=250')">
48
Escuela de Informática - Programación y Diseño web FRONTPAGE
</TABLE>
</BODY>
</HTML>
Este script muestra un botón. Al hacer clic en él, muestra otra página en otra ventana
onClick(). window.open abre una nueva ventana, y pasa como parámetros al navegador
varios valores que configurarán la ventana (resizable: que pueda cambiar de tamaño,
Las primeras son puro código, mientras que las segundas especifican a qué se
aplica el código de las primeras. Por tanto, no importa mucho donde
coloquemos el código que va entre las <HEAD> siempre que allí. En cambio, el
código que va entre las <BODY> se aplicará a un objeto (o creará uno nuevo) y
hemos de colocar el código justo donde lo necesitemos. Todo esto suele ir
explicado en la página web dónde obtenemos el código.
Tomemos por ejemplo el siguiente código de una página web personal (a la
izquierda). Vamos a insertar un código Javascript (a la derecha) que saluda a
nuestros visitantes, variando el texto según la hora del día. En la web se nos
pide que insertemos el código en las entre etiquetas <BODY>.
<HTML>
<HEAD><TITLE>Esto es el titulo</TITLE></HEAD>
<BODY>
<script LANGUAGE="JavaScript">
var dt = new Date();
var hr = dt.getHours();
var msg = ((hr<12) ? "Buenos dias" :"Buenas Noches");
msg = ((hr>11)&&(hr<19) ? "Buenas Tardes" : msg);
msg=" <H2> "+msg+" !</H2>";
document.write(msg);
</script>
</BODY>
49
Escuela de Informática - Programación y Diseño web FRONTPAGE
</HTML>
<BODY>
<script LANGUAGE="JavaScript">
var dt = new Date();
var hr = dt.getHours();
var msg = ((hr<12) ? "Buenos dias" :"Buenas Noches");
msg = ((hr>11)&&(hr<19) ? "Buenas Tardes" : msg);
msg=" <H2> "+msg+" !</H2>";
document.write(msg);
</script>
</BODY>
</HTML>
50