Introducción a FrontPage ¿Qué es FrontPage 2003 y para qué sirve

Introducción a FrontPage
¿Qué es FrontPage 2003 y para qué sirve?
FrontPage 2003 es un programa con el cual podemos crear páginas Web de
una forma visual. Gracias a esto el usuario sólo tiene que concentrarse en el
diseño de su Web sin necesidad de saber programar. No obstante, un usuario
avanzado puede usar las características avanzadas de FrontPage 2003 para
hacer sitios Web más complejos.
-Página Web: documento que puede ser visualizado con un navegador de
Internet.
-Sitio Web: conjunto de páginas Web relacionadas entre sí.
FrontPage 2003 nos permite diseñar y modificar tanto el sitio como cada página
individualmente, y nos ayuda en su edición y mantenimiento.
Integración con Office2003
Algunas de las características que comparte Front page con los programas
delOffice son:
-Los menús y los iconos son similares entre cada aplicación y realizan la misma
función.
-El portapapeles de Office es ahora común a todas las aplicaciones Office, y
permite guardar de forma temporal gráficos y textos de distintos documentos de
Office y de otros programas, y pegarlos en un documento de Office.
-Otras funciones, como el corrector ortográfico, funcionan de la misma manera
o de una forma casi idéntica en todas las funciones.
-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
FrontPage2003
Vamos a construir una sencilla página Web :
En primer lugar, veamos las dos formas básicas de arrancar FrontPage2003.
-Desde el botón Inicio
situado, normalmente, en la esquina
inferior izquierda de la pantalla. Colocar el cursor y hacer clic sobre el botón
Inicio se despliega un menú; al colocar el cursor sobre Programas, aparece
otra lista con los programas que hay instalados en tu ordenador buscar
Microsoft FrontPage 2003 dentro de Microsoft Office, hacer clic sobre él, y se
arrancará el programa.
-Desde el icono de FrontPage2003 del escritorio
.
Crear la página Web.
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
.
Ahora hacemos clic en el área en blanco y escribimos lo siguiente:
Hola, esta es mi primera página Web.
Este es un enlace al periódico el País.
Ahora seleccionaremos las palabras "el País" y pulsaremos en Insertar y después, en
el menú que se nos abre, en Hipervínculo. En Dirección escribiremos lo siguiente:
http://www.elpais.es. De esta forma crearemos un vínculo a otra página Web, a la que
podremos viajar si disponemos de conexión a Internet. Nótese que el texto cambia de
color y aparece subrayado para indicar que es un hipervínculo. La pantalla nos
mostrará algo similar a esto:
Mi primer documento con FrontPage2003
Un hipervínculo, como más tarde explicaremos, nos permite navegar por
Internet, ya que nos permite cambiar de una página Web a otra.
Guardar la página Web.
Vamos a guardar la página en el disco duro. Mientras no esté en él, la página se guarda
en la memoria del ordenador, pero podría perderse por un corte de luz o por un fallo del
programa. Así que no olvide guardar a menudo sus documentos en el disco duro, ya que
allí se guardan de forma permanente.
La barra de herramientas contiene iconos para ejecutar de forma inmediata algunas de las
operaciones más habituales, como Guardar
, Abrir
, Imprimir
, etc.
Pulsamos en el icono Guardar
. Al ser la primera vez que guardamos, el sistema nos
pedirá un nombre para el archivo, y nos sugerirá uno. Los nombres de páginas web
suelen terminar en .htm o .html. Sin embargo, no es necesario escribir esta terminación si
no queremos. FrontPage lo añadirá automáticamente.
En la pantalla podemos ver como el sistema nos sugiere index.htm
Hacemos clic en index.htm, lo borramos y escribimos como nombre 'hola.htm' (sin las
comillas). Hacemos clic en Aceptar y el ordenador guardará nuestro trabajo. Más
adelante, cuando modifiquemos la web, bastará con hacer clic en el icono de Guardar y el
ordenador guardará el documento con el nombre que le dimos.
Podemos ponerle a la 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.
Aquí puedes realizar un ejercicio paso a paso interactivo para practicar lo
visto hasta el momento.
Visualizar la Web.
Ahora vamos a visualizar la página. Para visualizar el archivo, hacemos clic
sobre la etiqueta en la que pone Vista previa, y el sistema cargará el
documento como si fuera una página Web. Ahora, si disponemos de conexión
a Internet, al pulsar sobre las palabras "el País", navegaremos a esa página. Si
no disponemos de conexión, sencillamente aparecerá un mensaje de error.
Finalmente, para cerrar FrontPage, puedes utilizar cualquiera de las siguientes
operaciones:
Hacer clic en el botón cerrar
.
Pulsar la combinación de teclas ALT + F4.
Hacer clic sobre el menú Archivo y elegir la opción Salir.
DISEÑO PREVIO
Antes de crear nuestro sitio web necesitamos saber cual será su fin, para
planificar su configuración de acuerdo a sus necesidades.
¿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.
- Sitio de un portal: Son los sitios especializados en recopilar recursos sobre un
tema o temas determinados.
BOCETOS
Nuestro sitio web puede que con el tiempo comience a crecer, para no vernos
perdidos en una marea de archivos, es importante que planifiquemos su
distribución, un ejemplo:
Para el caso de un sitio web personal:
Para el caso de una empresa:
Crear un sitio web sin conexión a Internet
Como es natural, el destino de un sitio Web es ser visitado por personas a
través de Internet. Pero para diseñarlo no hace falta que tengamos conexión a
Internet.
Podemos construir nuestro sitio y almacenarlo directamente en el servidor, para
que pueda ser visto inmediatamente por cualquier persona en Internet. Esto es,
trabajando directamente en Internet.
Sin embargo, podemos construir nuestro sitio en nuestro ordenador y sin
tenerlo almacenado en un servidor visitarlo tal como lo haría una persona por
Internet. Para ello haremos que FrontPage aloje nuestro sitio Web en nuestro
ordenador, y trabaje con él como si fuera un ordenador remoto de Internet. Esto
es perfecto para probar el buen funcionamiento de nuestro sitio Web y depurar
errores.
Lo que se suele hacer es crear y probar la Web en nuestro propio ordenador y,
cuando hemos comprobado que todo va bien, subir la Web en Internet.
FrontPage nos permite hacer tanto una cosa como la otra.
Para crear el sitio, lo primero que debemos hacer es presionar sobre Archivo Nuevo
Después haremos clic en Sitio Web de una página... del apartado Nuevo sitio
Web de la barra de tareas, a continuación elegimos Sitio Web de una página,
indicamos la ubicación de la web mediante el botón Examinar, y para terminar
clic en Aceptar.
Hemos creado el sitio Web. Consta tan sólo de una hoja en blanco. Para
comprobarlo, hacemos clic en Carpetas o en Exploración. Veremos las
siguientes ventanas:
Como podemos observar, nuestro sitio web se compone, en este momento, de
2 carpetas, images y _private, que están vacías. Además, tenemos un archivo
llamado index.htm, que está en blanco.
Podemos comprobarlo si pulsamos 2 veces en él pasaremos a abrir el archivo
en la vista de Página.
Volvamos a la vista Carpetas. A la izquierda tenemos la estructura en forma de
árbol de directorios, y a la derecha los directorios y los archivos contenidos en
la carpeta abierta. Es similar a cómo lo veríamos en el explorador de Windows.
Desde aquí podemos borrar archivos, moverlos, crear nuevos, etc.
Esta es la vista Exploración:
La parte de la izquierda nos recuerda al árbol de directorios de Windows, pero
la derecha muestra un esquema de las páginas de la Web. En este momento
sólo contiene la única página existente: index.htm.
Esta vista nos muestra el esquema lógico de nuestro sitio web. Nos muestra
cómo están conectadas las páginas web y su jerarquía.
Para crear nuevos directorios:
Ponemos la vista de carpetas y pulsamos con el botón derecho del ratón sobre
cualquier parte vacía de la parte derecha y hacemos clic en Nueva Carpeta.
Nos pedirá el nombre de la nueva carpeta, se lo introduciremos. No es
conveniente usar espacios en blanco, acentos ni la letra ñ en los nombres de
carpetas y archivos, ya que en Internet, los servidores en el que se guarde
todo nuestro trabajo puede que no soporte caracteres españoles, y esto hará
que nuestra web no funcione bien, también hay que tener cuidado con utilizar
minúsculas y mayúsculas mezcladas, algunos servidores distinguen entre
minúsculas y mayúsculas, en este caso si una carpeta (por ejemplo) la hemos
nombrado en mayúsculas y luego hacemos referencia a ella en minúsculas,
algunos servidores la encontrarán y otros no.
A veces, tras realizar operaciones (como copiar archivos), no aparecen los
últimos cambios realizados, en este caso es necesario pulsar F5 para
actualizar la vista de Carpetas.
Para crear nuestro sitio web, también tenemos el asistente de frontpage, que
es muy sencillo de utilizar y te planificará tu sitio web atendiendo a tus
necesidades.
Para utilizar este asistente, al crear un nuevo documento, debe elegir Nueva
Página y en te preguntarás si quieres abrir un archivo nuevo o crear el tuyo
propio o utilizar el asistente o las plantillas.
Configuración del sitio
Para acceder a la configuración:
Dentro podremos cambiar el nombre de nuestro sitio web( es el que tomara
dentro del disco duro) y utilizar la protección de documentos que nos ofrece
Frontpage.
En exploración personalizamos las etiquetas que aparecerán en la barra de
título de cada ventana de manera predeterminada.
IMÁGENES EN FRONTPAGE
LOS FORMATOS MÁS UTILIZADOS EN INTERNET:
GIF, PNG Y JPG
* GIF ( 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. Sus características son el entrelazado y la
transparencia, y no se pierde calidad con este formato.
- El entrelazado permite que la imagen se cargue en el ordenador que visualiza la
página Web poco a poco, mientras va mostrando versiones de la imagen cada vez más
aproximadas a la versión normal. Esta característica es interesante para ordenadores con
una conexión lenta a Internet, porque el usuario puede decidir que la imagen que se está
cargando no le interesa, y poder dejarla.
- La transparencia permite elegir un color de los 256 para hacerlo transparente y
representar el fondo que se encuentre detrás del dibujo.
Además de estas características, el formato GIF89a, una versión de GIF, permite contener
varias imágenes en la misma imagen consiguiendo una pequeña animación (imagen en
movimiento).
* PNG ( Portable Network Graphics ) . Este formato puede llegar a tener 48 bits, con los
cuales puede mostrar trillones de colores. El inconveniente de tanta calidad es que genera
archivos de gran tamaño.El PNG puede llegar a comprimir entre un 10- 30% más que el
formato GIF. Además,incluye grados de transparencia, entrelazado, corrección de gamma
(ajuste de luz y sombras) y paletas de colores. Una carencia que tiene es que no admite
imágenes animadas.
* JPG o JPEG ( Joint Photographic Experts Group ). Utiliza 16 millones de colores, por lo
que es el adecuado para mostrar fotos con gran calidad, incluso puede comprimir la imagen
para que ocupe menos espacio, por lo que grandes imágenes pueden ser cargadas con
una velocidad aceptable. El inconveniente es la pérdida de calidad con respecto a la
imagen original
IMAGEN GIF
IMAGEN PNG
MAGEN JPG
Con imágenes pequeñas, a simple vista no notamos demasiado la perdida de calidad, pero
cuando estamos trabajando con imágenes de grandes dimensiones y deseamos hacer
zoom sobre la imagen es cuando se nota su calidad.Una imagen con poca calidad admite
zoom pero se distorsiona, por cada zoom que hacemos vemos la imagen cada vez más
“pixelada”(los pixel son los puntos de color que tiene una imagen, a mayor resolución más
pixeles tiene la imagen en un recuadro) y por tanto con menos definición.
Todas estas características podemos cambiarlas con los editores que más nos gusten
(Coreldraw, Corel Photo Paint, Photoshop, Fireworks, etc).
INSERTAR UNA IMAGEN
Pasos para insertar una imagen:
*Pulsamos con el ratón sobre el lugar donde queremos poner la imagen
* Pulsamos el icono Insertar imagen desde archivo
Se selecciona la imagen de nuestro disco duro que queremos incluir en nuestra página,
pulsando
en Insertar para cargarla.
FrontPage las guarda automáticamente como GIF si la imagen tiene 256 o menos colores,
o como JPG si tiene más.
Después de realizar estos pasos, se debe ajustar la imágen al formato que más nos
interese
USAR UNA IMAGEN COMO FONDO DE PÁGINA
Podemos usar una imagen como fondo de una página Web. Para ello,
hacemos click en FORMATO y después en FONDO
La imagen aparecerá como fondo de página y, si no ocupa toda la pantalla, el
explorador automáticamente la llenará con copias de la imagen.
Si queremos cambiar la imagen de fondo repetimos el proceso eligiendo otra
imagen, y si queremos quitar la imagen de fondo, repetimos el proceso
desmarcando la opción IMAGEN DE FONDO
Es importante seguir una serie de consejos cuando usemos fondos:
No se deben utilizar imágenes demasiado grandes excepto cuando sea
necesario, ya que harán más lenta la carga de la Web.
Las imágenes deben seguir el estilo de la página, de esta forma conseguiremos
que la imagen acompañe la estática de la Web.
Si usamos una imagen oscura, es conveniente usar texto de color claro y
viceversa. Cuando la imagen contenga zonas claras y oscuras, no se debe
usar texto en estas zonas.
PROPIEDADES DE LA IMAGEN
Para ver las propiedades de una imagen y modificarlas, hemos de hacer clic en
ella con el botón derecho y despuéss hacer clic en
PROPIEDADES DE IMAGEN. Nos aparece el cuadro de diálogo Propiedades
de imagen, en la pestaña Apariencia tenemos las siguientes propiedades:
En Tipo aparece el tipo de imagen que hemos cargado, GIF o JPEG. Podemos
pasar de un tipo a otro cambiando la selección, aunque no es muy
recomendable, ya que pasando de un tipo a otro podemos perder calidad.
En Representaciones alternativas podemos poner una imagen de menor
resolución para que se cargue antes de la versión final, de una forma similar al
entrelazado del gif. Primero se cargará la imagen que indiquemos en Baja
resolucón, y tras ella la versión normal, que se supone de mayor calidad y, por
tanto, de mayor tiempo de carga.
HIPERVÍNCULOS
DEFINICIÓN
Los hipervínculos, enlaces o links son los elementos que diferencian la Web de
otros medios. Un hipervínculo supone enlazar la página Web que estamos
visualizando con otra página Web; otra sección de la misma página; con un
archivo; un servidor FTP; un archivo o una aplicación para descargar; una
secuencia de sonido; vídeo o multimedia; una dirección de correo o un grupo
de noticias.
Es posible acceder a través de la Web a cualquier sitio empleando
hipervínculos. A través de FrontPage es muy sencillo crear pervínculo a través
del botón Hipervínculo de la barra de herramientas estándar o a través del
menú Insertar, Hipervínculo.
Podemos crear los hipervínculos a partir de texto e imágenes, de forma que
pulsando en ellos nos lleve a otra parte de la misma página, a otro archivo o
página de nuestro sitio Web o a una dirección URL. Para ello seleccionamos el
texto o la imagen y pulsamos Insertar, Hipervínculo. Nos aparecerá la ventana
siguiente:
HIPERVÍNCULOS DE TEXTO
Es un enlace que se encuentra asociado a un texto, de forma que si hacemos
clic sobre ese texto, navegamos dónde indique el hipervínculo. Por defecto,
cuando creamos un hipervínculo de texto, el texto aparece subrayado y en un
color distinto al del texto normal, de forma que el visitante sepa que existe ese
enlace. Si volvemos a la página después de visitar el enlace, este aparecerá
con otro tono también. Aunque es interesante diferenciar el hiperenlace, es
posible que no queramos que aparezca así.
HIPERVÍNCULO DE IMAGEN
Es un enlace que se encuentra asociado a una imagen, de forma que si
hacemos clic sobre esa imagen, navegamos dónde indique el hipervínculo. Por
defecto, cuando creamos un hipervínculo de imagen, la imagen aparece
rodeada de un borde con un color llamativo para que el visitante sepa que
existe ese enlace. Al igual que con el texto, más adelante veremos cómo
podemos modificar este comportamiento.
HIPERVÍNCULO LOCAL
Se trata de un enlace interno y consiste en enlazar un punto a otro documento
dentro del mismo Web. Supongamos que tenemos dos páginas 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 página dos.htm, lo seleccionamos y pulsamos aceptar.
HIPERVÍNCULO EXTERNO
Se especifica el camino completo hacia el archivo, poniendo la dirección URL.
Por ejemplo, si queremos colocar un enlace con la página principal de la
Universidad de Zaragoza haremos lo siguiente:
HIPERVÍNCULO A UNA CUENTA DE CORREO
Es habitual crear un enlace a una cuenta e-mail en una página 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, Hipervínculo. En la ventana que nos aparece
seleccionaremos el botón 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 dirección de correo vendrá precedida por "mailto:"
HIPERVÍNCULO A UNA PÁGINA NUEVA
En ocasiones puede ocurrir que hemos enlazado a una página que todavía no
hemos creado. Podemos hacer las dos cosas a la vez, el enlace y crear la
página. Para ello, en la ventana de Insertar, Hipervínculo elegiremos el botón
para enlazar con nueva página. Posteriormente, elegiremos el tipo de página
que queramos crear y ya podremos entrar a editarla.
HIPERVÍNCULO A OTRA PARTE DENTRO DEL MISMO DOCUMENTO
Los enlaces dentro del mismo documento permiten a los visitantes de su
página hacer clic y saltar rápidamente 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:
En la barra de menús, seleccionar Insertar, Marcador en aquel lugar en el que
queramos situarnos después de enlazar. Nos aparecerá la siguiente ventana:
En esta ventana elegiremos el nombre del marcador y pulsamos Aceptar. A
medida que vayamos añadiendo marcadores en el documento se irán
añadiendo en la lista "Otros marcadores" para que luego al crear el
hipervínculo elijamos el que nos interese.
b) Una vez creado el marcador, es el momento de crear el enlace. Para ello, en
la barra de menús seleccionamos Insertar, Hipervínculo hasta que nos salga la
ventana inicial y elegimos de la lista desplegable el marcador con el que
queramos enlazar de la siguiente forma:
DESTINO DEL HIPERVÍNCULO
Podemos configurar como queremos que se abra la nueva página después de
hacer clic en el hipervínculo. Se puede abrir en la misma ventana o crear una
nueva ventana para no perder la página anterior. Esta última opción es muy
útil, ya que es habitual navegar en Internet a través de los enlaces y es posible
perder u olvidar la página de referencia inicial.
Para ello, en la ventana del menú Insertar, Hipervínculo podemos seleccionar
como queremos que nos aparezca la página con la que hemos enlazado.
Entre los destinos comunes de un hipervínculo podemos elegir Toda la página
(se abrirá en la misma ventana que estamos) o en Nueva ventana (la nueva
página se abrirá aparte). El resto de destinos comunes se refiere a los marcos.
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.
Las tablas sirven para organizar mejor una página Web, por ejemplo si
queremos tener el texto a la izquierda y las imágenes a la derecha utilizaremos
una tabla con dos columnas, en la columna izquierda escribiremos el texto y en
la columna derecha insertaremos las imágenes.
También es muy útil para insertar menús en un lateral de la página y para
dibujar una tabla como lo haríamos en Word.
Las tablas en FrontPage
Lo primero que vamos a hacer es activar la barra de herramientas de tablas.
Todas las opciones que contiene están disponibles en el menú Tabla, pero usar
la barra de herramientas de tablas es más cómodo y rápido.
Para activar la barra de herramientas, lo podemos hacer de dos formas:
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, se nos abre
un menú contextual con las barras disponibles,
seleccionamos la barra Tablas.
Las tablas son representadas en FrontPage de esta manera:
Tabla con borde (3 filas, 2 columnas)
Insertar una tabla
Lo primero que debemos hacer es situar el cursor donde queramos que esté la
tabla. Después, para insertar una tabla debemos pulsar en el botón Insertar
tabla, que está situado en la barra de herramientas estándar. Sin soltar,
arrastramos el ratón de forma que la tabla tenga tantas filas y columnas como
queramos.
Al soltar el ratón, aparecerá la tabla en pantalla
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.
Es importante saber que, por defecto, el tamaño de las tablas se especifica de
manera relativa a la ventana. Es decir, si la tabla ocupa la mitad de su pantalla,
en un monitor más grande la tabla se redimensionará para ocupar la mitad de
esa pantalla. Se dice que su tamaño está especificado en porcentaje. Pero
podemos cambiar esto para que el tamaño de la tabla se especifique en
píxeles, de forma que su tamaño permanezca constante, independiente del
tamaño de la pantalla en la que se muestre.
Para aprender a anidar tablas, dividir y combinar celdas tienes el siguiente
avanzado.
Cuando pulsamos el botón de nueva página
aparece el panel de tareas en
la sección de Tablas y celdas de diseño, a continuación explicamos las
propiedades y utilidad de este panel.
Si pulsamos sobre Formato de celda podemos
modificar:
Propiedades de celda de diseño
Ancho, Alto, Margen, VAlign (alineación de la celda)
puede ser (Superior, Central e Inferior) y BGcolor
(color de fondo de la celda) .
Bordes
Ancho, color.
Márgenes
Izquierdo, superior, derecho e inferior.
Insertar tabla de diseño --> Insertar una tabla sin
diseño de una única celda.
Insertar celda de diseño --> Abre el diálogo Insertar
celda de diseño donde podemos especificar el ancho
y el alto e indicar si la vamos a insertar antes o
después de la selección.
Si tenemos seleccionada una tabla en la sección
Propiedades de tabla aparece el ancho y el alto de la
tabla, podemos alinearla a la izquierda, centrada o a
la derecha.
El diálogo Propiedades de tabla tiene
las siguientes propiedades:
En Herramientas de diseño podemos
habilitar o deshabilitar las
herramientas de diseño o indicar,
como en este caso, que se habilite
automáticamente.
En Tamaño indicamos el número de
filas y de columnas.
En Diseño elegimos la alineación los
márgenes de celda o el espaciado
entre celdas entre otras opciones.
En Bordes seleccionamos el tamaño
o el color.
En Fondo podemos seleccionar un color o insertar una imagen pulsando sobre
el botón Examinar...
Podemos establecer los cambios realizados como predeterminados para
nuevas tablas señalando la última casilla Establecer como predeterminado para
tablas nuevas del diálogo.
Si pulsamos sobre el botón Estilo... podemos modificar el estilo de la tabla.
Aparece el cuadro de diálogo Propiedades de celda, parecido al de
Propiedades de tabla, en el tenemos dos opciones Especificar ancho y
Especificar alto. Para cambiarlas tenemos que marcar la opción, después elegir
el alto o ancho, y la unidad ( En píxeles o En porcentaje ). Normalmente
trabajaremos de forma relativa (en porcentaje), y sólo utilizaremos la opción en
píxeles cuando queramos que los elementos que se encuentren dentro de la
tabla queden fijos en su posición sea cual sea el tamaño del monitor o de la
ventana, por ejemplo en los formularios.
Dar formato a las celdas.
Dar formato a la tabla la hace más atractiva a la vista. Además, podemos dar
formato a determinadas celdas cuyo contenido queramos destacar.
Vamos a utilizar en primer lugar el autoformato de tablas. Hacemos clic en
cualquier lugar de la tabla a la que queramos dar formato. Pulsamos en el
botón Autoformato de tablas de la barra de herramientas Tablas:
Nos aparecerá el cuadro de diálogo Autoformato de tablas donde podemos
elegir varios formatos de tabla de la lista Formatos: A la derecha nos aparece
un ejemplo de tabla
con ese formato
para que nos
hagamos una idea
de cómo quedará la
tabla.
Además, podemos
hacer que
determinados
formatos se
apliquen o no
dependiendo de si
los seleccionamos
o no en el apartado
Formatos para
aplicar.
Lo ideal es jugar
con las opciones
hasta que la tabla
tenga el aspecto
deseado.
Podemos cambiar el aspecto de una tabla tantas veces como queramos.
Hacer esto es sencillo. Hemos de pulsar el botón derecho del ratón sobre la
tabla y elegir la opción Propiedades de tabla.... En el apartado Fondo
elegiremos la opción Color si queremos poner un color de fondo, y si queremos
usar una imagen haremos clic en Utilizar una imagen de fondo, y después
escribiremos el nombre de la imagen o la buscaremos con el botón Examinar....
Si la imagen es más pequeña que la tabla, el navegador repetirá la imagen
tantas veces como sea necesario para rellenar toda la tabla.
Si queremos quitar la imagen, tan solo hemos de desactivar Utilizar una imagen
de fondo. Si queremos quitar el color para que la celda sea transparente,
podremos en color el Automático.
Podemos hacer esto también para una celda. Se procede de forma similar pero
abrimos el cuadro de diálogo Propiedades de la Celda.
Es importante seguir los siguientes consejos cuando usemos fondos:
No usemos imágenes demasiado grandes excepto cuando sea necesario, ya
que harán más lenta la carga de la Web.
Las imágenes deben seguir el estilo de la página, de esta forma conseguiremos
que la imagen acompañe la estética de la Web.
Si usamos una imagen oscura, es conveniente usar texto de color claro y
viceversa (en el primer ejemplo el texto no se lee bien porque el fondo y el texto
son de color oscuro los dos. Cuando la imagen contenga zonas claras y
oscuras, evite usar texto en estas zonas. El fondo elegido en el segundo
ejemplo es un ejemplo de lo que no hay que hacer.
Los marcos en FrontPage
Un marco es una división de la ventana del explorador en dos o más regiones.
En cada una de ellas podemos colocar una página Web. Por ejemplo, podemos
dividir la pantalla en dos y cargar el índice de una Web en un marco y el
contenido de la Web en el otro. Veamos un ejemplo:
En FrontPage podemos 'ver' los marcos como barras grises, horizontales o
verticales. Los marcos en realidad no contienen nada más que referencias a las
páginas Web que se van cargando en ellos. Desde FrontPage podemos variar
fácilmente su tamaño, su número, elegir qué páginas cargarán, etc.
Ventajas e inconvenientes de los marcos:
Actualmente el empleo de los marcos se ha reducido bastante. En el pasado
cargar por ejemplo un menú lateral era costoso debido a la baja velocidad a la
que se accedía a Internet, pero en la actualidad la carga de este menú no
supone algo apreciable por el usuario. Además, el tener varios marcos puede
llevarnos a tener un pequeño lío, ya que siempre hemos de recordar qué cosas
van en cada marco. Como ventaja, los marcos ofrecen la posibilidad de separar
menús de contenido y así no tener que repetir el menú en todas las páginas del
sitio.
Insertar un marco
FrontPage no permite insertar marcos libremente, sino que nos obliga a utilizar
una de las plantillas de marcos que hay predefinidas. Entonces podremos
cambiarla como queramos, añadiendo o quitando marcos, cambiando su
tamaño, etc.
Vamos a crear una Web con marcos. Hacemos clic en el menú Archivo,
después en Nuevo. En el panel de tareas que aparecerá a la derecha hacemos
clic en Más plantillas de página.... Elegimos Páginas de marcos y a
continuación nos aparecerán varias plantillas predefinidas.
Vamos a trabajar con la plantilla
cuya configuración es la más
usada en Internet: Titular y
contenido. Consiste en dividir la
página Web en tres: Una
superior, que contiene un título,
una lateral, que suele contener
un índice, y una central, en la que
se verá el contenido de la Web.
Es importante saber que cada
marco tiene un nombre, que nos
sirve para poder usarlo
individualmente como más adelante explicaremos.
En este caso, FrontPage asigna los siguientes nombres:
Para el Marco del título: titular.
Para el Marco del Índice: contenido.
Para el Marco principal: principal.
La imagen que podremos ver en nuestro ordenador es esta:
Nada más crear la Web desde una plantilla de marcos debemos configurar
cada marco para que cargue una página Web. Podemos crear páginas nuevas
en cada marco, pulsando en Nueva página o cargar páginas ya hechas, con el
botón Establecer página inicial....
Pulsemos en Nueva página en cada marco.
Crearemos tres páginas Web distintas en blanco. Es importante saber que NO
estamos creando una página Web como hacíamos antes, sino tres, más la
página que contendrá el código de la división de marcos. Vamos a
comprobarlo.
Escribamos "esto es título" en el marco de título, que es el superior.
Escribamos "esto es el índice" en el marco de la izquierda, que es el marco del
índice, y "aquí va el contenido" en el marco central, que es el marco de
principal.
La pantalla tendrá el siguiente aspecto:
Guardar páginas con marcos
Ahora vamos a hacer clic en Archivo y después en Guardar.
Nos aparecerá la pantalla habitual para guardar los archivos, con la salvedad
de que nos aparecerá el esquema de marcos. Iremos guardando el contenido
de cada marco por separado, ya que cada uno es una página Web. Sabremos
cual página guardamos en cada momento ya que aparece resaltada en azul en
la figura. Cuando aparece el fondo resaltado, y no los marcos, es porque es el
momento de guardar la página que guarda el código de los marcos. Llamemos
a esta página index.htm. Esta es la página que debemos cargar en el
navegador para poder ver las demás en los marcos.
Si queremos modificar cada página por separado debemos abrirlas, editarlas y
guardarlas.
Si queremos trabajar con todas a la vez en otra sesión, tan sólo hemos de abrir
el archivo de marcos.
Configurar un marco
Podemos modificar las características de un marco para que cumpla con
nuestros objetivos.
Lo primero que podemos hacer es cambiar el tamaño de los marcos. Para ello
pulsaremos sobre los límites de los marcos con el botón izquierdo del ratón y,
sin soltar, arrastraremos los límites. Una vez tenga el aspecto que deseemos
es conveniente guardar la página.
Otro aspecto interesante que podemos configurar es el aspecto de cada marco.
Podemos mostrar los bordes de los marcos en el navegador. Para ello
hacemos clic con el botón derecho del ratón dentro del marco cuyas opciones
queremos cambiar. Hacemos clic en Propiedades del marco.
Ahora pulsamos en el
botón Páginas de
Marcos.
Estas son las opciones
más interesantes:
Nombre y Página
inicial. Aquí se
especifica el nombre
del marco y la página
Web que contiene.
Estos dos parámetros
son muy importantes,
ya que podemos
referirnos a cada marco
por separado con el
nombre del marco. Por
otra parte, desde aquí
podemos cambiar la
página que cargue
cada marco.
Tamaño del marco.
Podemos ajustar el
tamaño de los marcos
desde aquí. Aparecerán dos campos, Ancho y Alto, que cambiarán a Ancho de
fila o Ancho de columna cuando exista un marco en la misma fila o en la misma
columna. En las opciones de la derecha podemos elegir Relativo, para cambiar
el tamaño respecto a los otros marcos, Por cierto, para cambiar el tamaño
respecto a la página, y finalmente Píxeles, para especificar un tamaño fijo.
En el apartado Márgenes modificamos los márgenes del marco como
deseemos.
Mostrar barras de desplazamiento. Para el marco de título o el de índice, no
suele ser necesario activarla, pero para el marco de contenido es interesante
activarla si la página que va en este marco ocupa más espacio del que la
ventana dispone. Elegiremos en Mostrar barras de desplazamiento si
queremos que aparezcan, si no queremos que aparezcan o que aparezcan de
forma automática Si es necesario. Esta última opción es por defecto la elegida
y la más recomendable.
Pulsando en el botón Página de Marcos..., activaremos o desactivaremos la
casilla Mostrar bordes si queremos o no que estos aparezcan.
Las llamadas a un hipervínculo desde un marco
Un problema muy común es hacer una página con el índice para una Web con
marcos y descubrir como, al pulsar sobre los hipervínculos, las páginas se
cargan en el marco del índice y no en el marco principal, que es lo que nos
gustaría.
Para conseguir que los vínculos del índice carguen páginas en el marco
principal debemos hacer lo siguiente al crear el hipervínculo:
Creamos un hipervínculo de la forma que ya hemos aprendido:
Además de configurar el
enlace de la forma habitual,
haremos clic en el botón en
Marco de destino....
Aparecerá el cuadro de
diálogo Marco de destino:
Hacemos clic en la figura
para mostrar el marco
destino en el que se cargará
la página del enlace y
guardamos el enlace. Su
nombre aparecerá en el
campo Destino. Tenemos
que repetir esto para cada
enlace cuyo destino
queramos que sea un
marco distinto en el que
esté.
En el caso explicado,
deberíamos pulsar en el
marco en azul, que es el principal. Atención, esto sólo se debe hacer para los
enlaces que estén en el marco del índice, no en los que estén en el propio
marco principal, que se harán de la forma normal.
Comentemos todas las opciones:
Valor predeterminado (principal): No usar marcos. Es el valor por defecto.
El mismo marco: si queremos usar el propio marco para cargar la página de
destino.
Toda la página: si queremos cargar la página de destino en la actual,
ocupándola toda y eliminando el contenido (incluido los marcos).
Nueva ventana: si queremos usar una nueva ventana para cargar la página
de destino.
Marco primario: si queremos usar el marco padre del marco actual.
Si queremos que todos los hipervínculos de la página actual sean de un
determinado tipo, seleccionamos el tipo y hacemos clic en Establecer como
valor predeterminado de página.
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.
Principio del formulario
Este es un ejemplo de formulario
Escriba aquí su nombre
Enviar
Restablecer
Final del formularioComo podemos observar, el formulario tiene un cuadro de
texto para que el usuario introduzca información, su nombre, y dos botones,
Enviar y Restablecer, que envía los datos y pone el valor inicial en el campo de
texto respectivamente. ¿Para qué podemos usar un formulario? Algunos
ejemplos son:
Libro de visitas: Los visitantes pueden enviarte un comentario sobre tu página
mediante un formulario.
Recopilar información: Para recoger datos como un currículum, un pedido,
datos de contacto, etc.
Formularios de búsquedas: Para que los visitantes introduzcan los datos a
buscar.
Crear un formulario
Puedes crear un formulario nuevo o crearlo a partir de las plantillas que ofrece
Frontpage. En el primer caso, la forma de crearlo es a través de Menú Insertar
> Formulario > Formulario, aunque también puedes hacerlo a partir de las
plantillas de Frontpage. Para crearlo desde una plantilla, elige Menú Archivo >
Nuevo > Página. En la pestaña General encontrarás algunas plantillas, como
Formulario de comentarios, Libro de invitados, Registro de usuarios, etc.
Al crear un nuevo formulario sin utilizar las plantillas, Frontpage crea un cuadro
de líneas discontinuas, que será la zona activa del formulario. Ningún elemento
del formulario puede crearse fuera de esta zona rectangular.
Elementos básicos de un formulario.
El siguiente paso es introducir los campos que conformarán el formulario. Para
ello, utiliza las distintas opciones de Menú Insertar > Formulario.
Cada uno de los campos puede colocarse en la página de la misma forma que
el texto: puedes utilizar saltos de línea, tablas, alineaciones, líneas
horizontales, etc. Cada uno de los campos, sean del tipo que sean, se
componen de dos elementos: la etiqueta y el contenido. La primera especifica
qué se le está pidiendo al visitante y el segundo es el espacio que se reserva
para que el visitante introduzca los datos. Para escribir una etiqueta,
simplemente sitúa el cursor al lado del campo y escribe. Por ejemplo:
Tipos:
Cuadro de texto de una línea
Estos cuadros de texto se utilizan para que el visitante escriba un texto corto,
como el nombre y apellidos, el número de teléfono o el correo electrónico.
Propiedades
Cuadro de texto con desplazamiento
Estos cuadros de texto se utilizan en los casos en que el visitante debe
introducir un texto más largo, como un comentario o una observación. Se
puede navegar a través del texto con una barra de desplazamiento.
Casilla de verificación
Estas casillas pueden ser activadas o desactivadas por el visitante. Se utilizan
para hacer una pregunta al visitante cuya respuesta consiste en dos opciones:
sí/no.
Propiedades
Botón de opción
Cuando existen más de dos posibles respuestas a una pregunta o una petición,
se utilizan los botones de opción. El visitante deberá marcar una de las
opciones.
Propiedades
Menú desplegable
El menú desplegable cumple la misma función que los botones de opción:
consiste en que el visitante elija una de entre las opciones propuestas. Su
ventaja radica en que ocupa menos espacio en el formulario, pues las opciones
se recogen en un menú desplegable. Otra de sus ventajas es que permite
varias selecciones.
Propiedades
Botón de comando
Los botones ejecutan acciones concretas. Se suelen utilizar para que los
visitantes envíen el formulario después de rellenarlo o borren los campos
restableciendo el formulario en blanco.
Propiedades
Los resultados del formulario
El fin de todo formulario es recopilar los datos que ha enviado el visitante para
guardarlos y utilizarlos. A esto se llama resultados del formulario y Frontpage
proporciona distintos sistemas para gestionarlos.
Destino de los resultados
Una vez que el visitante envía el formulario, deben reunirse los datos que se
han introducido, llamados resultados del formulario, para poder verlos,
mostrarlos al visitante o trabajar con ellos si es necesario. FrontPage
proporciona varios controladores de formulario, que toman los resultados y
llevan a cabo distintas acciones. Por ejemplo, puedes guardar los resultados en
un archivo de texto o de HTML, puedes enviar los resultados por correo
electrónico, puedes guardar los resultados en una base de datos, o bien utilizar
secuencias de comandos personalizadas para controlar los resultados del
formulario.
Para definir el destino que van a tener los resultados de un formulario, hay que
elegir Propiedades de formulario del menú contextual. Aparecerá una ventana
como ésta:
Se Puede elegir entre:
Guardar los resultados en un archivo
Cada vez que un visitante envía un formulario, Frontpage anexará los
resultados en un archivo del que debes definir su nombre y su ubicación.
Después, puedes abrir el archivo y ver los resultados. Haz clic en el botón
Opciones para ver las posibilidades de formato de archivo que te permite el
programa. Si tienes un libro de visitas para tu web, puede resultar interesante
guardar los resultados en un archivo HTML. Así, podrás crear un vínculo a ese
archivo para que los visitantes puedan ver lo que otros han escrito.
2. Enviar los resultados por correo electrónico
Cada vez que un visitante envía un formulario, Frontpage enviará un mensaje
de correo electrónico a la dirección que establezcas que contiene los
resultados de dicho formulario. Haz clic en el botón Opciones para ver las
distintas posibilidades de esta opción, como por ejemplo elegir el formato del
correo, el asunto que llevará, etc.
3. Guardar los resultados en una base de datos
Cada vez que un visitante envía un formulario, Frontpage guardará la
información en una base de datos. Por ejemplo, si utilizas un formulario para
reunir información de contacto, puedes guardar los resultados directamente en
una base de datos. Si haces clic en el botón Opciones podrás elegir la base de
datos en la que se guardará la información del formulario, crear una nueva
base de datos, elegir los campos que se guardarán y la tabla de la base de
datos en la que lo harán, etc.
4. Usar una secuencia de comandos personalizada
Puedes utilizar tu propia secuencia de comandos personalizada como
controlador de formulario.
La página de confirmación
El último paso en la creación de un formulario consiste en definir una página de
confirmación, que es la que verán los visitantes una vez que hayan enviado un
formulario. La página de confirmación suele mostrar un mensaje de
agradecimiento y el contenido de uno o más campos del formulario. El visitante
puede confirmar que la información se introdujo correctamente y, si es
necesario, puede volver al formulario y rellenarlo nuevamente.
Se puede crear tu propia página de confirmación o dejar que sea Frontpage
quien la cree. La página de confirmación predeterminada de Frontpage muestra
una lista de nombres de campos del formulario y sus valores.
Para crear una página de confirmación personalizada, hay que seguir estos
pasos:
1. Abre una página en blanco y escribe el texto que quieres mostrar después
de que el visitante haya enviado el formulario. Por ejemplo: “Muchas gracias
por su comentario. Con él nos ayuda a mejorar constantemente”.
2. Si quieres mostrar la información que el visitante ha introducido en el
formulario para que verifique si los datos son correctos, elige Menú Insertar >
Componente > Campo de confirmación.
3. En el cuadro Nombre del campo de formulario que se va a confirmar, escribe
el nombre del campo a partir del cual se muestra la información y después haz
clic en Aceptar. El nombre del campo aparecerá entre paréntesis en la página.
Cuando se muestre la página de confirmación al visitante, este campo mostrará
en su lugar el dato que ha introducido del visitante.
4. Guarda la página.
5. Para asignar la página de confirmación que has creado al formulario, abre la
página que lo contiene y Propiedades de formulario en el menú contextual.
Después, haz clic en el botón Opciones y en la ficha Página de confirmación.
6. En el cuadro Dirección URL escribe el nombre y la ubicación de la página de
confirmación que acabas de crear o haz clic en Examinar para localizarla.
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, una animació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.
Un problema común, además de la lentitud de carga, es la compatibilidad. No
todos los efectos son soportados por todos los navegadores, en especial por
los navegadores más antiguos. FrontPage nos ofrece algunas ayudas para
resolver este problema. En general, si un navegador no soportara un efecto en
particular, sencillamente lo ignora, por lo que en general nuestra Web podrá
seguir siendo visitada, aunque sin ese efecto.
Botones para desplazarse
Vamos a ver cómo crear manualmente algunos botones básicos que son muy
usados en la mayoría de las páginas web, así como crear botones que en vez
de texto contengan imágenes.
Los primeros botones que vamos a crear son:
Botón Atrás: vuelve a la página anterior, si la hubo.
Botón Siguiente: vuelve a la página de la que volvemos, si la hubiese.
Botón Subir/Bajar: En una página web extensa, nos permite desplazarnos
arriba y abajo instantáneamente.
Para crear un botón Atrás, hacemos clic en el lugar dónde queremos que esté
el botón.
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:
<body><INPUT TYPE="button" VALUE="Atrás"
onClick="history.back()"></body>
Si lo que queremos es un botón Siguiente, hacemos lo mismo con:
<body><INPUT TYPE="button" VALUE="Adelante"
onClick="history.forward()"></body>
Añadir música de fondo a la página Web.
Vamos a añadir música a nuestra página. Esto puede aportar cierta
personalidad a nuestra página. No obstante puede llegar a ser un poco molesto
oírla cada vez que un visitante la vea. Podemos configurar la melodía para que
suene una, varias veces o de forma indefinida.
Con elementos repetitivos como música de fondo, una imagen en movimiento o
videos debemos tener mucha cautela porque suelen llegar a cansar demasiado
al visitante, si saturamos la página con imágenes gif en movimiento
sobrecargan demasiado la página, es mas conveniente tener pocos elementos
interactivos y multimedia pero bien situados. Y si ponemos una melodía de
fondo debe ser relajante, que se oiga pero que no moleste.
Para insertar música esta debe estar en uno de
estos formatos: wav, midi, au, real audio o aiff. De
todos ellos, el más conocido es el formato wav.
Este formato reproduce música con fidelidad,
pero ocupa mucho espacio debido a que no
utiliza ningún tipo de compresión, por lo que lo
usaremos para melodías cortas. Por otra parte, el
formato MIDI ocupa poco espacio pero suena
artificial. Podemos encontrar gran variedad de
melodías gratis en Internet.
Pulsamos con el botón derecho en cualquier
parte de la página Web, y hacemos clic en
Propiedades de Página. Hacemos clic en la ficha General, si no está
seleccionada, y buscamos el apartado Sonido de Fondo.
Hacemos clic en Ubicación y escribimos el nombre del archivo que contiene la
melodía, o bien puedes buscarlo con el botón Examinar...
En Bucle, podemos elegir el número de veces que se repetirá la melodía.
También podemos hacer que la melodía se repita indefinidamente, activando la
opción Siempre.
Añadir un vídeo a la página Web.
Insertar un vídeo es muy sencillo. Tan sólo hemos de hacer clic en el lugar de
la Web dónde queramos poner el vídeo y hacer clic en Insertar, después en
Imagen y finalmente en vídeo. Buscamos el archivo de vídeo y hacemos clic en
Abrir.
El formato del vídeo debe ser avi, asf, ram o ra. De todos ellos el más usado es
el avi, ya que es un estándar de vídeo en Windows, y no requiere de ningún
componente extra para ser reproducido. Alcanza resoluciones de 320 x 240
píxels y 30 frames/segundo. Por defecto, al insertar un vídeo FrontPage nos
mostrará la primera imagen del vídeo.
Debemos configurar si queremos que la reproducción sea continua o no. Para
ello pinchamos con el botón derecho del ratón sobre el vídeo y hacemos clic en
Propiedades de imagen....
En el campo Origen de vídeo aparece el nombre del archivo del vídeo.
En Bucle podemos configurar el número de veces que se reproducirá el vídeo
antes de pararse o hacer que sea continuo, seleccionando Siempre.
Podemos hacer que haya un retardo entre una reproducción y otra
especificando el número de milisegundos (1000 milisegundos=1 segundo) en
Retardo de bucle.
Finalmente el vídeo puede iniciarse al abrirse la página (opción Al abrir archivo,
es la opción por defecto), o al
pasar el ratón sobre él
(opción, al pasar el mouse).
Por último, podemos cambiar
el tamaño de un vídeo
pinchando en la imagen y
arrastrando los cuadraditos
negros. Podemos hacer esto
con más precisión en
Propiedades de Imagen,
pestaña Apariencia y tamaño.
Aquí aparecen además otras
opciones, como la alineación,
que funcionan de la misma
forma que con las imágenes.
Añadir fondo a la página Web
Añadirle a la página web un fondo es igual de sencillo que añadirle un video
con la ventaja de que no hay que indicar la posición del mismo.
Para insertar un fondo podemos hacer clic con el botón derecho del
ratón y seleccionar propiedades de pagina. Seleccionando la pestaña fondo
aparecerán las opciones básicas como la ubicación de la imagen a poner de
fondo o las propiedades del mismo.
Hojas de estilo
Vamos a ver qué son las hojas de estilos y cómo usarlas para dotar a los
documentos que creemos de una apariencia personalizada. Es importante que
sepamos que para poder sacarles todo el partido posible a las hojas de estilos,
tenemos que tener ciertos conocimientos del lenguaje HTML.
¿Qué es una hoja de
estilos?
Una hoja de estilos o CSS ("Cascade Style Sheet"), es un conjunto de reglas y
características que, aplicadas a una página web o a un conjunto de ellas,
pueden modificar su apariencia. De esta forma, podemos separar en cierta
forma el diseño de la página de su contenido.
Gracias a las hojas de estilos podemos de alguna manera homogeneizar y
automatizar el trabajo que supone el diseño de una Web. Podemos definir un
estilo para los títulos y otro para el texto, de forma que no tengamos que
modificar cada vez el texto y los títulos para que tengan la apariencia que
queramos.
Una hoja de estilos puede estar contenida en la misma página donde se utiliza o
puede estar definida en un archivo aparte. Si lo que vamos a crear es un sitio
Web con varias páginas es recomendable crear una hoja de estilos aparte de
esta 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.
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.
Crear una hoja de
estilos.
Para crear una hoja de estilos, hacemos clic en Archivo - Nuevo
Se abre el panel de tareas en la sección Nuevo, hacemos clic en Más plantillas
de páginas... y elegimos la pestaña Hojas de Estilo. Nos aparece la siguiente
ventana:
En esta ventana nos aparecen las distintas hojas de estilo predefinidas en
FrontPage, con una pequeña descripción de las características del estilo. Vamos
a elegir un estilo y a aplicarlo a una página Web para ver cómo trabajar con él.
Elegimos el estilo Arcos. Hacemos clic en Aceptar y FrontPage nos abre una
nueva hoja de estilos.
Arcos es una hoja de estilos que se caracteriza por hacer el texto de color
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
}
Es decir, modificamos varias etiquetas HTML para darles ciertas características.
Esta es sólo una plantilla, que modificaremos para adaptarla a nuestro gusto.
Podemos hacerlo a mano, directamente en la página, o bien con la ayuda de
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:
Aquí podemos cambiar las características de las etiquetas HTML y tener una
vista previa de estos.
Para crear un estilo nuevo, pulsaremos en Nuevo. Para eliminarlo, lo
seleccionamos haciendo clic en él y pulsaremos en Eliminar. Para modificar un
estilo, lo seleccionamos haciendo clic en él y pulsaremos en Modificar.
Algunas etiquetas HTML que debemos conocer son:
a: se refiere a los hipervínculos.
table: se refiere a las tablas.
body: se refiere al cuerpo del documento (texto en general).
h1..h6: se refiere a los encabezados (para los títulos).
Modificar y aplicar una hoja de estilos.
Para modificar una hoja de estilos tenemos que modificar sus elementos.
Por ejemplo, si hacemos clic en body y después en Modificar, podemos ver ese
estilo y modificarlo, body es una etiqueta HTML que se refiere al cuerpo del
documento.
Las características con que cuenta el estilo están en el apartado Descripción.
Si pulsamos en el botón Formato podemos modificar el estilo asociado a la
etiqueta:
Aquí nos aparecen todas las posibles modificaciones.
Podemos cambiar la Fuente... (tipo, color, tamaño,etc), el tipo de Párrafo..., etc.
Ahora el texto tiene otro tipo de letra y otro color.
Grabamos los cambios pulsando en Guardar.
Naturalmente, modificaremos sólo los que necesitemos. Vamos a guardar la hoja
de estilos y vamos a usarla.
Pulsamos en guardar y guardamos la hoja como hojaestilos.css.
Vamos a aplicar la hoja de estilos a una página web. Creamos la siguiente
página:
Es importante que marquemos el título como encabezado H4.
Para ello lo seleccionamos y en la barra de formato hacemos clic en Estilo y clic
en H4 (o encabezado4).
Si no lo hacemos, el título será considerado como texto normal y se le aplicará
el estilo del texto.
barra
de
formato
Ahora vamos a indicarle a FrontPage que
asocie la página web a la hoja de estilos.
Hacemos clic en el menú Formato Vínculos de hoja de estilos.
Nos aparece la siguiente pantalla, en la
que tenemos que pulsar en Agregar y
buscar el fichero de hoja de estilos que
antes hemos guardado. Hacemos clic en
Aceptar.
Veamos un par de imágenes de la ventana
antes y después de agregar la hoja de
estilos:
Al aplicarse la hoja de estilos, la página web tiene ahora el siguiente aspecto:
Como podemos comprobar, se han aplicado las características que hemos visto
antes.
Vamos a cambiarlas.
Abrimos la hoja de estilos y pulsamos en el botón Estilo que queda en medio de
la página.
Pinchamos en body y pulsamos en Modificar. En Formato elegimos Fuente.... En
la ventana de Fuente elegimos Times New Roman y el color negro.
Le damos a Aceptar hasta que volvamos a la hoja de estilos.
Ahora el texto tiene otro tipo de letra y otro color.
Grabamos los cambios pulsando en guardar.
¿Qué es un dominio?
Un dominio es la dirección de una empresa, organización o persona en la red.
Es una puerta que te abre al mundo virtual y permite que tu información, tus
productos o servicios sean accesibles a millones de personas en todo el mundo
ya que en Internet no existen barreras espaciales o geográficas.
Un dominio es una dirección de Internet (Ej.: www.midominio.com). Si
adquieres un dominio, obtienes la exclusiva para usar dicha dirección en todo
el mundo. Durante el período que dure la contratación, nadie más podrá tener
una página con tu nombre de dominio. Tener un dominio, te proporciona un
nombre fácil de recordar (y además elegido por ti) para denominar a tu web (Ej:
www.juanperez.com es más fácil de retener en la memoria que
www.servicio_de_hosting.com/juanperez).
El dominio tiene una doble dimensión:
- Como dirección, es la forma más fácil, rápida e intuitiva para localizar un sitio
en Internet.
- Como marca, sirve para identificar una empresa o las marcas de productos y
servicios en la red.
¿Qué tipo de dominios puedo registrar en Dominios HispaVista? Los dominios
que puedes contratar en Dominios HispaVista son de los siguientes tipos
.com: inicialmente empleado por las compañías comerciales. Actualmente es el
dominio más utilizado en la Red.
.net: en un principio pensado para empresas de servicios de Internet.
.org: utilizado principalmente por organizaciones.
.info: pensados para webs de caracter informativo cuyos contenidos tratan
sobre las propias actividades del site
2- ¿Qué caracteres y cuáles puedo utilizar?
Los únicos caracteres válidos son letras, números y guiones.
El nombre de dominio no puede contener varios guiones seguidos (Ej.: uno-dos no es valido, pero uno-dos-tres sí lo es).
El nombre de dominio no puede comenzar ni acabar con guión.
No se admiten espacios en blanco, acentos, diéresis, la letra ñ, la ç ni puntos.
Se pueden usar indistintamente mayúsculas y minúsculas.
Se admite un máximo de 60 caracteres y un mínimo de 2.
No tengo aún página web. ¿Es necesario poseer un dominio para tenerla? No.
Una cosa es independiente de la otra. Puedes poseer una web en un servicio
de albergue gratuito (por ejemplo, Galeón) o en el espacio que te proporciona
tu proveedor de Internet, pero, en ambos casos, la dirección será del tipo
"http://www.galeon.com/tu_pagina_personal".
Si quieres que la dirección de tu página sea más fácil de recordar y que tenga,
además, una imagen más profesional, es recomendable la contratación de un
dominio.
3- ¿Puedo tener más de un dominio?
¿Puedo utilizar más de un dominio para la misma web? Sí. Mediante el servicio
de redireccionamiento web que te proporciona Dominios HispaVista, podrás
disponer de tantos dominios como desees apuntando a una misma página.
Esto es especialmente útil si quieres proteger tu nombre o marca, registrando
todas sus posibles variables.
Además, aparecerás más veces en los buscadores con lo que recibirás más
visitas.
4- ¿Qué son los contactos de un dominio?
Hay tres tipos de "contactos":
Titular o Propietario
: persona que puede legalmente usar el nombre de dominio (normalmente
quien lo contrata).
Contacto Administrativo
: persona u organización encargada de la administración del dominio. Por
defecto, para facilitarte tu gestión, aparecerán los datos de Dominios
HispaVista.
Contacto Técnico
: es el responsable del mantenimiento técnico del dominio. También, en este
caso, aparecerán los datos de Dominios HispaVista.
Todos estos datos son susceptibles de ser modificados por ti, solicitándolo
desde tu menú de usuario.