_______________________________________

__________

Las vistas en FrontPage 2000

FrontPage nos da la posibilidad de tener diferentes vistas para organizar y administrar nuestro sitio web
(recordemos que sitio se refiere a un conjunto de páginas web, cuando vamos a un sitio web, se llama
página principal a la primer página a la que llegamos y que generalmente lleva el nombre de index.html)
Vista exploración: Es tal vez donde mejor podemos visualizar el sitio, ya que nos muestra su estructura
en forma de organigrama, donde tenemos en la parte superior la página principal (con un icono de una
casita) y debajo de esta, todas las páginas secundarias ramificadas. Podemos colocar nuestras páginas,
o no, en la vista exploración (arrastrándolas de la lista de carpetas o seleccionando nueva página con el
menú del botón derecho del mouse) pero si alguna no se coloca, esta no aparecerá en las barras de
exploración que coloquemos en las páginas (una barra de exploración es una lista automática con
hipervínculos a las demás páginas).
Vista Pagina: esta es la vista donde se arma y se da formato a la página, como se verá, el proceso es
similar a editar un documento en Word, ya que las herramientas son parecidas.
Vista Carpetas: Acá es donde podemos ver las diferentes carpetas en donde guardamos los archivos.
Generalmente nos conviene organizarlos para trabar más ordenados, por ejemplo, las imágenes las
guardamos todas juntas en una carpeta; también podemos guardar una sección entera de nuestro sitio
en una carpeta diferente. Es importante no confundir la estructura de exploración con la estructura de las
carpetas ya que no tienen porqué ser iguales.
Vista Informes: En esta vista podremos obtener una serie de datos muy útiles para nuestro sitio como
páginas lentas, archivos no vinculados, archivos nuevos, hipervínculos rotos, etc.
Vista Hipervínculos: Nos muestra cada página con sus hipervínculos entrantes y salientes.
Tareas: Acá podemos organizarnos las próximas tareas que iremos a realizar en nuestro sitio o en algún
archivo determinado. Es una especie de agenda.

Dentro de la vista página podremos observar que existen tres lengüetas: Normal, HTML y Vista previa.
La vista Normal es en donde editamos nuestra página, es decir, donde podemos agregar el texto, gráficos,
etc.
La vista HTML, nos es útil para cuando tenemos que hacer alguna modificación en el código de la página.
Muchos sitios web ofrecen la opción de darnos contadores o banners de intercambio, y nos pueden
enviar por e-mail, el código html que debemos agregar a nuestra página. Para hacer esto, debemos
copiar dicho código en la vista HTML. Para ubicarlo con precisión coloquen el cursor en la vista Normal
en donde quieren que aparezca el contador o el banner, y luego en la vista HTML, aparecerá en el
mismo lugar; presionen Edición / Pegar y se copiará el código. Puede ser que en algunas ocasiones
tengan problemas y que el código se copie como un texto para leer en la vista Normal o Vista previa;
para evitar esto, copien el código al bloc de notas (texto sin formato con extensión .txt) y luego vuelvan a
copiarlo, recién ahí péguenlo en la página.
Por último la Vista previa nos da una idea de como se va a ver la página en el explorador, aunque algunos
elementos, como contadores o formularios, deben estar publicados en Internet para que funcionen
correctamente.

Como empezar desde cero

Crearemos un sitio web desde cero a modo de ejemplo. El sitio será para un grupo de música que
llamaremos "Los Desertores":
1- Vamos a Archivo / Nuevo / Web y elegimos la opción Web vacío.
2- Una vez hecho esto se crearán las carpetas images y _private y aparecerá una página en blanco.
Nosotros comenzaremos por cerrar esta página en blanco e iremos a la vista exploración.
3- Una vez en la vista exploración hacemos clic derecho y seleccionamos Nueva Página. Una vez creada,
si hacemos doble clic, automáticamente pasaremos a la vista página. Aún en la vista exploración,
hacemos clic derecho sobre la nueva página que creamos y seleccionamos Nueva Página otra vez,
creando así una página secundaria.
4- Si hacemos clic derecho sobre cada página y elegimos Cambiar nombre podremos colocar un título a la
página (que es diferente al nombre de archivo). Pondremos "Los Desertores" a la primer página y
"Nuestras Canciones" a la segunda.
5- Podemos, de este modo, definir toda la estructura de nuestro sitio para luego tener listas todas las
páginas para trabajar. Una característica importante es que si hacemos clic en una página y sin soltarla
la arrastramos, veremos una línea punteada que une a la misma con su página superior, ya al moverla,
podremos colocarla en cualquier otra posición, modificando así la estructura del sitio.
6- Una vez hecho esto, si hacemos doble clic sobre una página, pasamos a la vista página para comenzar
a ingresar el contenido.
7- Cuando guardamos una página (con la opción Archivo / Guardar), esta se guarda como un archivo .htm.
Si vamos a la carpeta de Windows donde estamos armando el sitio veremos que el archivo de página
tiene el icono de nuestro explorador, y si lo abrimos, no se abrirá en FrontPage, sino en el explorador.
Para abrir el archivo para editarlo debemos abrir FrontPage y elegir la opción Archivo / Abrir y buscar la
página que queremos editar. Si por el contrario queremos abrir el sitio entero (es más recomendado para
verlo completo) debemos elegir Archivo / Abrir Web con lo que distinguiremos a las carpetas de sitios
web, de las demás porque tienen un icono de un globo terráqueo. No obstante, las carpetas de sitios
web se verán como carpetas comunes si la buscamos desde Windows.

Ventana Abrir Web: vemos que las carpetas de sitios tienen un icono distinto. Para abrirlas, seleccionamos
la que queremos, y hacemos clic en Abrir dos veces.

Es muy importante que cuando guardemos una página o cualquier otro archivo de nuestro sitio (imágenes,
sonidos), no utilicemos en el nombre del mismo, ningún carácter con acento ni la letra "Ñ", ya que
cuando la queramos publicar, nos será rechazada!!

Dar formato a las páginas

Como es fácil de observar es muy fácil dar formato a las páginas ya que disponemos de herramientas muy
similares a las de cualquier procesador de texto como Word. Solamente caben algunas aclaraciones.
Cuando iniciamos una nueva página, aparece en el menú de fuentes Fuente predeterminada, y en el de
tamaño, Normal. Esto se refiere a la fuente y el tamaño configurados en el navegador predeterminado
de Internet que se tenga instalado. Si por ejemplo tenés el Internet Explorer y la fuente predeterminada
que tiene configurada (en Opciones de Internet del Panel de Control) es Times New Roman, entonces
esta será la fuente predeterminada de FrontPage, pero una vez publicada la página, cada persona verá
la página con el tipo de letra y tamaño que tenga configurada en su navegador.
Para que no suceda esto, y que todos vean la página con la letra que nosotros elegimos, debemos elegir
una fuente del menú, distinta a la predeterminada.
Seguiremos ahora con la página de "Los Desertores":

1- Para elegir un color de fondo para la página vamos a Formato / Fondo o bien Formato / Propiedades y
hacemos clic en la ficha Fondo. Una vez allí podemos elegir el color de fondo, el color del texto, de los
hipervínculos, podremos optar por colocar una imagen de fondo que se multiplicará en mosaico, o bien
tomar la información del fondo de una página que bien podría ser la principal.

2- Para cambiar el color de las letras debemos seleccionar el texto y elegir el nuevo color en la barra de
herramientas (el símbolo de una A con una raya debajo). También se pueden editar todas las opciones
de formato del texto en el menú Formato / Fuente.
3- Al guardar una página por primera vez, nos encontraremos con la ventana Guardar como donde
podremos colocar el nombre del archivo y el Título de la página.
4- Si al escribir, nos parece exagerado el espacio entre párrafo y párrafo, podemos incluir un salto de línea
presionando MAYÚS+INTRO.
5- Para insertar una línea horizontal, la cual nos es útil para separar secciones o títulos, vamos a Insertar /
línea horizontal. Si luego hacemos doble clic en la línea, se abrirá el cuadro de diálogo con las
propiedades de la misma.

6- Es sumamente importante que definan el estilo del sitio antes de empezar. Es conveniente para lograr
un buen sitio que las diferentes páginas no difieran mucho en lo que respecta a color de fondo, tipos de
letra, tamaño de la letra. Para ello conviene siempre que se selecciona una nueva página, elegir la
opción Obtener información del fondo de otra página en el menú Formato/Propiedades y tomar la
información de la página principal (index.htm), de este modo cada vez que queramos cambiar algo del
fondo, solamente lo cambiemos en el cuadro de Propiedades de la principal. Para el texto es
recomendable elegir un tipo y un tamaño de letra para los títulos, y otro tipo (o el mismo) y tamaño para
 los párrafos, y conservar el mismo estilo para todo el sitio dejando algún otro cambio solo para alguna
situación en particular.

Como organizar los archivos

A la hora de organizar los archivos disponemos de la opción de crear carpetas para que no se nos mezclen
todos en la lista de carpetas.
Nuestro sitio se ha creado en una carpeta determinada, y dentro de esa carpeta FrontPage creó dos más:
_private e images. Es conveniente que todas las imágenes las guardemos en la carpeta images. Cuando
guardemos una página que contiene imágenes, se nos preguntará donde la queremos guardar y si
queremos cambiarle el nombre.

Cuadro de diálogo para guardar archivos incrustados: podemos elegir entre cambiar el nombre del
archivo o cambiarlo de carpeta (siempre dentro de la carpeta de nuestro sitio web).

También nos conviene guardar páginas de una sección muy grande todas juntas en una misma carpeta.
Por ejemplo, supongan que tenemos el sitio de un grupo de música y queremos publicar una página
para cada una de las letras de unas 20 canciones. Para que no se nos mezclen tantas páginas juntas
vamos a crear una carpeta que llamaremos "Canciones":
1- En la lista de carpetas, hacemos clic derecho sobre la carpeta principal (la superior) y
seleccionamos Nueva Carpeta en el menú emergente.
uno nuevo. Escribamos, por ejemplo, Canciones (recuerden que no podemos usar acentos ni la letra Ñ).
3- En la vista Carpetas, podremos ver todo el contenido de archivos como si se tratase del explorador de
Windows.

Creación de hipervínculos
Los hipervínculos, también conocidos como vínculos o links, son conexiones entre dos archivos. Podemos
insertar un vínculo en una palabra, frase o imagen, de modo que al hacer clic sobre esta, el explorador
abra una nueva página o un nuevo archivo.
1- Para insertar un vínculo a una página o archivo de nuestro sitio Web, primero escribimos la palabra
o frase correspondiente, la seleccionamos y vamos a Insertar / Hipervínculo, o bien pulsamos en
el icono de un globo terráqueo con una cadena () en la barra de herramientas. En el cuadro de
dialogo, aparecerá una lista de los archivos de nuestro sitio, elegimos uno y presionamos Aceptar.
Luego veremos que la palabra aparecerá subrayada en un color diferente. Podemos cambiar el
color del vínculo en el menú Formato / Propiedades.

Cuadro de diálogo Crear hipervínculo

2-Para insertar un vínculo a una dirección (URL) de otro sitio o página Web de Internet, la escribimos en el
recuadro Dirección URL. Igualmente, si escribimos esa dirección en la vista página, FrontPage la
reconocerá como tal y creará un hipervínculo automáticamente, lo mismo sucederá con las direcciones
de correo electrónico.
3-Para insertar un vínculo a un archivo que esté en nuestra computadora, hacemos clic en el icono de una
lupa con una carpeta (), el segundo a la derecha, y buscamos el archivo en nuestra máquina.
Posteriormente, FrontPage creará una copia de ese archivo que se guardará en nuestro sitio.
4-Para insertar una dirección de correo electrónico, debemos hacer clic en el icono del sobre (el tercero a
la derecha) o escribir en el recuadro de Dirección URL: mailto:nombre@servidor.com , es decir la
palabra "mailto" seguida de dos puntos y la dirección a la que queremos vincular.
5-Y por último, si deseamos crear un link a una página nueva (que aún no ha sido creada), hacemos clic
en el cuarto icono, con un dibujo de una hoja de papel en blanco, y se abrirá una página lista para ser
editada (aunque no se guarda hasta que presionemos Guardar).

Otra clase de hipervínculos son los llamados marcadores, los cuales unen distintos puntos de una misma
página. Son muy útiles para las páginas largas.
Para insertar un marcador primero seleccionemos cual va ser el punto de destino en la página, situemos el
cursor ahí y vayamos a Insertar / Marcador. Aparecerá el cuadro de diálogo de los Marcadores y se nos
pedirá un nombre cualquiera para el mismo. Una vez hecho esto, pulsamos Aceptar.
Ahora iremos al lugar de la página en donde insertaremos el hipervínculo, y como hicimos antes,
seleccionamos la palabra, frase o imagen y seleccionamos Insertar / hipervínculo. En el cuadro de
diálogo hacemos clic en el menú desplegable Marcador y elegimos el nombre del marcador que hemos
creado (puede haber muchos en una misma página).
Si por el contrario, desde otra página queremos llegar a ese marcador en particular, en lugar de que
lleguemos a la parte superior, debemos seleccionar primero la página de la lista y luego, sin presionar
Aceptar seleccionamos el marcador.

Uso de tablas
En la edición de páginas web las tablas no solo tienen su uso habitual (listas, planillas, etc.), sino que
también se utilizan para alinear el texto, los gráficos, barras de exploración; lo cual nos da muchas
posibilidades para un diseño elegante.
Las celdas se pueden combinar y dividir, se puede hacer que los bordes sean visibles o invisibles, se
pueden crear tablas una dentro de otra y un montón de posibilidades más.
Abajo pueden ver una tabla de ejemplo en donde muestro varias cosas que se pueden hacer.
1- Para crear una tabla, vayan al menú Tabla / Insertar / Tabla. Aparecerá el cuadro de diálogo
Insertar Tabla en donde deberán especificar el número de filas y columnas. La alineación de la
tabla con respecto a la página puede ser derecha, izquierda, centro o justificada. El tamaño del
borde puede hacerse cero para que este no sea visible en el explorador, esta opción nos es útil
para cuando deseamos alinear texto, gráficos o escribir en dos o más columnas y que no se vean
los bordes de la página. Podemos especificar un ancho determinado en porcentaje o en píxels, si
no lo hacemos, podremos modificarlo luego manualmente. También podremos determinar el
margen de las celdas y el espacio que hay entre ellas.
2- Una vez creada la tabla pueden combinarse dos o más celdas que seleccionemos mediante la opción
Combinar celdas en el menú Tabla.
3- Si lo que queremos es dividir una celda en filas o columnas deberemos elegir Dividir celdas.
4- También se pueden insertar nuevas filas o columnas mediante la opción Insertar / Filas o columnas. Si
elegimos Insertar / Tabla crearemos una tabla dentro de otra, lo cual a veces nos puede llegar a ser
bastante útil.
5- En el cuadro de diálogo Propiedades de tabla, se pueden modificar muchas características de la misma:
para llegar al cuadro hay que hacer clic derecho sobre l a tabla y seleccionar Propiedades de tabla en el
menú emergente. Algunas de las características que podemos editar son: la alineación (derecha,
izquierda, centrada o justificada) con respecto a la página, si el ancho se va a especificar o se ajustará al
contenido de la tabla, el margen de las celdas (el espacio desde el borde de la misma), el espaciado
entre celdas, el tamaño de los bordes (recuerden que ancho 0 es un borde invisible en el explorador
pero si se ve durante la edición). También se puede elegir un color de fondo para toda la celda o una
imagen. Si lo que desean es un color para cada celda (o imagen) deben elegir color de fondo en el
cuadro de Propiedades de celda.

6- El cuadro de diálogo Propiedades de celda es similar al de la tabla solo que en este caso solo
afectaremos a la celda seleccionada o aquella en donde esté el cursor. Para llegar al cuadro se procede
de la misma forma que antes, haciendo clic derecho. Una característica importante es la de alineación
vertical, con lo que se nos permite alinear el texto o las imágenes a las partes superior, inferior o central
de la celda (ver ejemplo).

Las imágenes web

Al trabajar con imágenes en un sitio web es importante saber que los archivos que se manejan en Internet
son de dos clases: los .jpeg y los .gif, ambos son archivos de imagen comprimidos.
Los primeros se utilizan para fotografías, las cuales al utilizar este formato comprimido, ocupan menos
memoria al costo de bajar un poco la calidad.
El formato .gif, se utiliza para títulos, logotipos, y gráficos con menos de 256 colores. También se pueden
usar para fotos pero la calidad será peor. A diferencia del formato jpeg, el gif no hace disminuir la calidad
de la imagen.
Vemos a continuación dos imágenes en cada uno de los formatos mencionados.

Imagen jpeg

Imagen gif

Insertando Imágenes
El proceso para insertar una imagen es muy simple:
1 Sitúen el cursor en el lugar en que desean insertar la imagen.
2 Vayan a: Insertar/Imagen/Desde archivo o Imágenes. Si eligen imágenes, aparecerá la galería de
imágenes prediseñadas de Microsoft Office de donde podrán buscar imágenes por varias
categorías. Una vez seleccionada la imagen, clic en ella y elijan insertar en el menú emergente.
3 Si eligen Desde archivo, se abrirá una ventana en donde se mostrarán todos los archivos del sitio
Web. Esto es por si la imagen que desean insertar ya se encuentra dentro del sitio Web (dentro de
la carpeta del mismo). Si esto no es así, hagan clic en el icono de la carpeta, para buscar en las
carpetas de su computadora la imagen a insertar.
4 Una vez insertada la imagen, es posible que esta haya desplazado el texto a su alrededor, lo cual
se puede corregir o ajustar...

Acerca del Tamaño de las imágenes

Como ya dije antes, el tamaño de los archivos gráficos en una página Web debe ser pequeño para
optimizar el tiempo de descarga de la página. Si ustedes abren la imagen en algún editor como PhotoShop
o el Microsoft Opto Editor, deberán elegir ver la imagen al 100% para saber cual es el tamaño real de la
imagen que se verá en la página. Con esto lograrán un mayor control de la misma.
Otro punto importante es que nunca es conveniente insertar una imagen grande y luego achicarla
mediante los manejadores de la misma (los pequeños cuadraditos que aparecen en los bordes para
cambiar el tamaño), ya que si hacemos esto, se achica la imagen que se ve en pantalla pero no el tamaño
del archivo.
Para cambiar el tamaño abran la imagen en el editor y modifiquen el zoom hasta el tamaño deseado. Una
vez hecho esto, fíjense el valor que eligieron de zoom. En PhotoShop vayan a Image/Image size, en los
cuadros de la unidad, seleccionen Percent y fíjense que esté tildada la casilla Constrain Proportions. A
continuación tipeen en cualquiera de los cuadros de Height o Width (pero solo en uno) el valor del zoom,
con lo cual la imagen se reducirá al tamaño deseado. Para ver los resultados, seleccionen zoom 100% y
guarden la imagen, con el mismo nombre o con otro para saber que es un archivo distinto. Si usan el
Microsoft PhotoEditor el proceso es similar, deben ir a Imagen/Cambiar tamaño y fijarse que NO esté
tildada la casilla Permitir distorsión una vez hecho esto, varíen el porcentaje de Alto o Ancho.

Ubicación
Para ubicar la imagen con precisión deben ir al menú Formato/Ubicación, y le aparecerá el siguiente
cuadro de diálogo:

Ningún estilo de Ajuste: la imagen se ajustará como un carácter más.

Izquierda: La imagen se alineará a la izquierda y se rodeará con texto.
Derecha: Similar al anterior.
Ningún estilo de ubicación: en este caso, no se podrá mover la imagen de la ubicación que tiene, para
hacerlo, seleccionen:
Relativo: en este caso pueden especificar los valores de ubicación y tamaño en los cuadros de diálogo,
asi como el orden Z, es decir, la profundidad de la imagen con respecto a los demás objetos de la página,
es decir, atrás o adelante del texto, o de otras imágenes.
Absoluto: utilicen este método para ubicar una imagen con total libertad, pero en este caso, el texto no se
ajustará a ella.
Barra de herramientas imagen
Si seleccionan la imagen, les aparecerá una barra de herramientas de imagen. Si no la ven, vayan a
Ver/Barras de herramienta/Imágenes.
 Barra de herramientas imagen
1 Insertar imagen desde archivo
2 Escribir texto sobre una imagen existente: con esto, se transforma a la imagen en GIF y se crea
un archivo de texto y otro con la imagen del texto que se superpone a la imagen original.
3 Vista en miniatura automática: con esto se crea una copia del archivo de imagen de menor
tamaño y de rápida descarga. Para ver la imagen a tamaño normal, habrá que hacer clic en ella y se
descargará automáticamente. No hace falta insertar ningún hipervínculo ya que FrontPage hace todo
automáticamente. Esto es útil cuando hacemos una «galería de fotos» con muchas de ellas.
4 Ubicación absoluta.
5 Traer al frente o enviar atrás.
6 Rotar 90°, o espejar.
7 Contraste (más, menos)
8 Brillo (más o menos)
9 Recortar: con esta herramienta podemos eliminar parte de una imagen que no precisemos, con lo
cual también reduciremos su tamaño. Hagan clic en la esquina de la porción de imagen que desean
conservar y desplacen el mouse hasta lograr un cuadrado. Para recortarla, vuelvan a hacer clic en el botón
recortar en la barra de herramientas.
10 Establecer color transparente: haciendo clic en un color de la imagen, este se volverá
transparente. Solo se puede elegir un solo color. A continuación vemos un ejemplo de imagen transparente
y otra que no lo es :

Imagen con fondo transparente Imagen sin fondo transparente

11 Descolorar: es útil cuando se desea utilizar la imagen en el fondo y que no interfiera con el texto.
12 Efecto de biselado.
13 Nuevo muestreo: cuando modificamos el tamaño de la imagen con los manejadores, dije que no
se modificaba el tamaño del archivo, pero si luego de achicarla, apretamos este botón, se hará un nuevo
muestreo y se reducirá el archivo de modo que el tamaño normal sea el que hemos modificado nosotros
con los manejadores.
14 Zonas activas (rectangular, elíptica o poligonal): arrastrando el mouse para dibujar una zona
activa, estamos creando una imagen de hipervínculo, con lo cual se nos desplegará el cuadro de diálogo
de hipervínculos pidiéndonos que escribamos la dirección del mismo. Para insertar una zona activa
poligonal, deben hacer clic en cada esquina del polígono y luego cerrarlo haciendo clic.
15 Resaltar zona activa: resalta las imágenes que son hipervínculos.
16 Restaurar: restaura a la imagen a su estado original, si es que hicimos algún cambio en ella.
17