|
|
|
|
Diseño de páginas con Front Page Express Operaciones básicas de formato En este apartado se explicará cómo ponerle un título a nuestra página y se describirán las operaciones básicas referentes al formato del texto, dejando para más adelante el estudio de los demás elementos que podemos introducir en nuestras páginas. Ponerle un título a la página Cuando arrancamos Front Page aparece una ventana en blanco para que empecemos a confeccionar nuestra página. El programa introduce automáticamente las etiquetas de inicio y fin de documento HTML y las correspondientes a la cabecera y el cuerpo del documento de tal forma que sólo deberemos introducir el título de nuestra página. Para hacerlo:
A continuación podemos empezar a escribir el texto del documento con sus correspondientes formatos. Si no tenemos demasiada práctica en el empleo de procesadores de texto, lo mejor será escribir primero el texto sin formato y después ir dando formato empleando las técnicas de selección de texto:
Alineación y sangrado de párrafos El programa permite tres tipos de alineación (Alinear izquierda, Centrar y Alinear derecha). Para conseguir la alineación deseada, bastará seleccionar el párrafo y hacer clic sobre el botón correspondiente en la Barra de Formato:
NOTA: La alineación respecto de ambos márgenes no está soportada por este programa y la mayoría de los navegadores tampoco la interpretan (una excepción es IE 4). Si nos interesa, deberemos introducirla manualmente después de haber creado la página con Front Page Express a través de un editor de textos sin formato. La etiqueta es <P ALIGN=JUSTIFY> sin etiqueta de cierre. En lo que respecta al sangrado podemos realizar
sangrados respecto del margen izquierdo haciendo uso del botón Formato del texto Podemos dar a un bloque de texto seleccionado los atributos de negrita,
cursiva, subrayado y La opción Formato-»Fuente de la Barra de Menús permite de hecho controlar de una manera más precisa el formato del texto seleccionado permitiéndonos cambiar su tamaño, color, tipo de letra y posición vertical (normal, superíndice y subíndice) además de los atributos mencionados en el párrafo anterior.
Líneas horizontales Son líneas que van desde el extremo izquiedo al derecho de la página. Para introducirlas, escogeremos la opción Insertar-»Linea horizontal de la Barra de Menús. Podemos variar tanto la anchura, la alineación como el espesor de la línea. Para ello la seleccionaremos haciendo clic sobre la misma y luego escogeremos la opción Propiedades de línea horizontal de su menú contextual (con el botón derecho del ratón). El cuadro de diálogo Propiedades de línea horizontal permite especificar el Ancho en porcentaje o en pixels, el espesor o Alto en pixels y tres tipos de Alineación (Izquierda, Centro y Derecha). También podemos cambiar el color a través del cuadro de lista Color. En el ejemplo a continuación se muestra una línea horizontal con los siguientes parámetros: Ancho=50%, Alto=10, Alineación=Centro, Color=Rojo.
Numeración y viñetas Podemos transformar varios párrafos seleccionados en una lista numerada
o con viñetas haciendo uso de los botones Guardar páginas y estructuración de las mismas Para guardar una página escogeremos la opción Archivo-»Guardar
de los menús o el botón Existen dos posibilidades a la hora de guardar la página. Podemos guardarla dentro de una ubicación de Internet o bien como un archivo en alguna de nuestras unidades de disco locales. El procedimiento que seguiremos aquí es guardar todas las páginas como archivos en una carpeta creada al efecto (por ejemplo C:\Pagweb) en nuestro disco duro. Podemos incluso crear subcarpetas dentro de la carpeta anterior que contengan otras páginas. También resultará de utilidad crear una subcarpeta destinada a contener las imágenes u otros archivos asociados a las páginas. En los apartados siguientes veremos como vincular todas estas páginas y archivos asociados para que un usuario las explore con facilidad con su navegador. Para que nuestras páginas puedan ser visualizadas por otros usuarios de la red (Intranet o Internet) será necesario transferir todo el contenido de la carpeta anterior C:\Pagweb a un servidor Web vía FTP. Dicho servidor podrá ser el de nuestra Intranet (Servweb) o el de Nuevas Tecnologías (nti.educa.rcanaria.es). El tema de la transferencia o publicación de páginas se trata más adelante en este capítulo. Por último, comentar que es conveniente que a nuestra página principal la llamemos default.htm (el resto de las páginas pueden hacerse accesibles a través de enlaces a partir de aquella). Por regla general, default.htm es el nombre de la página por defecto en una carpeta de un servidor web, de tal forma que un usuario no necesitará incluir en la URL el nombre de dicha página. Por ejemplo, bastaría escribir http://nti.educa.rcanaria.es/usr/conocernos_mejor/cn-garoe como dirección en el navegador para acceder a la página de dicho centro. Esto facilita la gestión de los enlaces al administrador del sitio web de Nuevas Tecnologías. Para guardar una página en nuestro disco duro haremos clic sobre el botón Como archivo dentro del cuadro de diálogo Guardar como, tecleando un nombre para aquella en el cuadro de texto Nombre de archivo y seleccionando la unidad y carpeta donde queremos guardarla en el cuadro de lista Guardar en. No hace falta escribir la extensión del archivo (por defecto se guardará como HTM) salvo que queramos que sea HTML en cuyo caso deberemos indicarlo.
Enlaces Uno de los elementos más importantes que están presentes en las páginas Web son los enlaces (también llamados hiperenlaces, hipervínculos, links o hyperlinks). Haciendo clic sobre uno de ellos visualizaremos la página u objeto al que hace referencia. En esto radica en parte el éxito y la potencia de la navegación a través de la Web. En Front Page Express los enlaces se crean haciendo uso del
botón
Existen varios tipos de enlaces: Enlaces dentro de la página Nos desplazan a otra posición dentro de la página. La posición deberá ser indicada a través de un marcador, al que hará referencia el enlace. Los marcadores se pueden definir mediante la opción Edición-»Marcador de los menús situando previamente el cursor en el punto que nos interese. A continuación, en el cuadro de diálogo Crear hipervínculo, seleccionaremos la ficha Páginas abiertas, y escogeremos la página y el marcador en los cuadros de lista correspondientes para que se cree el enlace. Enlaces a otras páginas en el mismo ordenador (enlaces relativos) Las páginas pueden estar situadas en la misma carpeta que contiene la página desde la que estamos enlazando o en carpetas diferentes. Para crear el enlace seleccionaremos la ficha WWW y escribiremos el nombre de la página en el cuadro de texto Dirección URL.
Enlaces a páginas en servidores Web (enlaces absolutos) Son enlaces que apuntan a páginas situadas en ordenadores distintos del nuestro que además son servidores WWW. Para crearlos deberemos escribir en el cuadro de texto Dirección URL la dirección URL completa de la página dentro del servidor en cuestión. Por ejemplo: http://servweb/alumnos/98_99.html. NOTA: Obsérvese que el protocolo usado es el HTTP (Protocolo de Transferencia de Hipertexto). Enlaces a otros objetos Se refieren a enlaces a objetos que no son páginas Web.
Fondos, imágenes y sonidos Fondos Podemos asignar a nuestras páginas un color o imagen de fondo. Para ello usaremos la opción Formato-»Fondo de la Barra de Menús. Aparecerá el cuadro de diálogo Propiedades de página con la ficha Fondo activada.
A través de las listas desplegables Fondo y Texto controlaremos el color de fondo y el color del texto por defecto de la página respectivamente. Si deseamos como fondo una imagen (se presentará en mosaico), bastará activar la casilla de verificación Imagen de fondo y escribir el nombre del archivo gráfico en el cuadro de texto correspondiente. Una opción interesante que nos permite este cuadro de diálogo de Front Page Express es asignar marcas de agua, que permitirán que el texto se desplace en relación al fondo cuando visualicemos la página con el explorador. Imágenes Están presentes en la mayoría de las páginas Web. Los formatos de imagen más usados son GIF y JPEG y son soportados por la mayoría de los navegadores. GIF es utilizado principalmente para dibujos mientras que JPEG lo es para imágenes fotográficas. Para incorporar una imagen a una página utilizaremos la opción Insertar-»Imagen de la Barra de Menús. Aparecerá el cuadro de diálogo Imagen. Hay que tener en cuenta que las imágenes son objetos externos a la página (recordemos que una página web es simplemente un fichero de texto) y por tanto deberemos indicar con exactitud la localización de las mismas. Esto se hará en el cuadro de texto Desde archivo o bien haciendo clic sobre el botón Examinar. Una vez incorporada la imagen podremos editar sus propiedades desplegando su menú contextual y escogiendo la opción Propiedades de imagen.
Existen varias posibilidades: COLOCAR UN TEXTO ALTERNATIVO A LA IMAGEN Cuando situemos el cursor sobre la imagen se presentará dicho texto. El texto se escribe en el campo Texto de la sección Representaciones alternativas. HACER QUE LA IMAGEN SEA UN ENLACE Escribiremos el enlace en el cuadro de texto Ubicación dentro de la sección Hipervínculo predeterminado. Ya comentamos en el apartado anterior los distintos tipos de enlaces que podemos poner. Recordar que debemos indicar el protocolo cuando sea necesario. ALINEACIÓN DE LA IMAGEN Se refiere a la posición de la imagen en relación al texto de la página. Se controla a través del cuadro de lista Alineación en la ficha Apariencia. Existen varias posibilidades de las que se muestran algunos ejemplos a continuación:
xxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxx
Sonidos de fondo Es posible añadir a una página sonidos de fondo en los formatos MID (archivos Midi) o WAV (archivos de onda). Debemos tener en cuenta que los ficheros de onda suelen ser de mayor extensión que los Midi lo cual afectará a la velocidad de carga de la página. Por otra parte, el sonido Midi es sonido sintetizado no permitiendo por ejemplo voces, mientras que Wav es sonido real digitalizado. Por lo tanto el tipo de archivo a utilizar lo dejamos a juicio del que diseñe la página tomando en consideración los factores anteriores. Para incorporar un sonido a una página haremos uso de la opción Insertar-»Sonido de fondo de la Barra de menús. Aparecerá el cuadro de diálogo Sonido de fondo. Al igual que las imágenes, los sonidos son objetos externos a la página debiéndose indicar con exactitud su localización. Esto se hará en el cuadro de texto Desde archivo o bien haciendo clic sobre el botón Examinar. Podemos escoger el número de veces que deseamos se escuche el fichero de sonido (desde una sola vez hasta un número indefinido de veces (sonido contínuo)). Para ello habrá que editar sus propiedades en la ventana Propiedades de página (opción Archivo-»Propiedades de página de la Barra de menús).
El cuadro Bucle permite especificar el número de veces que queremos que se repita. Si queremos que sea contínuo activaremos la casilla de verificación Siempre. |
|
|
(Incrementar sangría)
de la Barra de Formato. No se permiten sangrados de primera línea ni sangría francesa.
en la Barra de Formato. Para el cuarto deberemos recurrir a la opción Formato-»Fuente
de la Barra de Menús y activar la casilla correspondiente en la sección Efectos.
y 
de la Barra de
Formato. Si se quiere especificar el tipo de numeración o el modelo de viñetas a usar,
deberemos recurrir a la opción Numeración y viñetas del menú
Formato. 
(Guardar)
de la Barra de herramientas Estandar. Aparecerá el cuadro de diálogo Guardar
como.
(Crear o modificar
hipervínculo) de la Barra de herramientas Estándar o a través de la
opción Insertar-»Hipervínculo de la Barra de Menús habiendo
seleccionado previamente el texto que queremos que sea un enlace. Tambien se puede enlazar
con imágenes y lo estudiaremos en el siguiente apartado.
xxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxx xxxxxx
xxxxxxxx xxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxx 