Aquí podremos comprobar como se visualizará nuestra página en el navegador. Es importante advertir que al utilizar FrontPage, al activar Vista previa se verá la web en el Internet Explorer de Microsoft y éste presenta algunas diferencias de presentación de páginas con los demás navegadores como el de Netscape.
Podemos ver las diferentes vistas Tabla con 3 columnas y 2 filas
VISTA NORMAL
VISTA HTML
VISTA PREVIA Final de tabla
Después de crear un sitio web en FrontPage es casi seguro que desearemos añadir nuevas páginas al sitio. La mayoría de la construcción de las páginas se hará empleando la vista página, a través del menú Archivo - Nueva página, que funciona de forma idéntica a todos los programas.
Es importante crearnos una estructura de carpetas y subcarpetas para guardar todas las páginas que vayamos creando y todos los ficheros (GIF, JPG, ZIP, PDF,. ...) que incluyamos en nuestro sitio web.
Para comenzar a trabajar en la vista Página, crearemos un nuevo web de FrontPage o abriremos uno ya existente. Al echar un vistazo a la interfaz reconoceremos los elementos propios de Office, ya que FrontPage trabaja de forma muy similar al procesador de textos. Hay disponibles una serie de barras de herramientas:
Barra de herramientas estándar: Contiene los botones para creación, apertura, guardado e impresión de páginas además de tareas específicas web como crear hipervínculos e insertar imágenes
Barra de herramientas formato: Contiene los botones y listas desplegables para dar formato al texto
Barra de herramientas DHTML (HTML dinámico): Permite añadir efectos especiales a la página, como intercambio entre dos imágenes
Barra de herramientas Imágenes: Controlar el formato de las imágenes y convertir las imágenes en mapas de imagen.
Barra de herramientas Tablas: Para simplificar el uso de las tablas en FrontPage
Una vez vista la interfaz de FrontPage ya podemos crear una página nueva en la cual incluiremos los elementos que necesitemos (texto, imágenes, hipervínculos, tablas, archivos,....)
Es muy conveniente poner título a cada página que editemos ya que es el nombre que aparecerá en la barra de título del navegador y ayuda a identificar el contenido de la página. Para poner el título a una página pulsamos botón derecho del ratón en la página y Propiedades de página hasta que aparece una ventana en la cual podemos poner el título:
Formatos de texto e imágenes
Para añadir texto a una página, simplemente hay que abrirla y comenzar a teclear en la vista página, o bien copiar y pegar un texto de archivo de texto.
El funcionamiento es exactamente igual que el de un procesador de textos.
Los párrafos en HTML tienen una diferencia con los párrafos en documentos de texto y es que no son la unidad estándar de formato sino que se trata de una unidad visual de elementos separados en una página, donde estos elementos son texto, imágenes o cualquier cosa.
En la vista página la inserción de un salto de párrafo se consigue pulsando Intro. En cambio, si lo que queremos es un salto de línea lo haremos a través del menú Insertar, Salto de línea o con la combinación de teclas Mayús + Intro. Cuando queremos hacer un salto de línea nos aparece la siguiente ventana para configurarlo
Salto de línea normal: Inserta un salto de línea entre la imagen y el texto
Hasta el margen izquierdo: Mueve la siguiente línea de texto hacia abajo hasta que quede el margen derecho libre para la imagen
Hasta el margen derecho: Mueve la siguiente línea hacia abajo y hacia la derecha
Hasta ambos márgenes: Mueve la siguiente línea de texto hacia abajo hasta que quedan libres ambos márgenes para la imagen.
Alineación de párrafos: Por defecto se alinean con el borde izquierdo de la ventana, pero se puede cambiar su alineación a través de los botones de la barra de herramientas
Alineación derecha - centrada - izquierda
Para aplicar la alineación justificada debemos seleccionar un párrafo, y luego seleccionar el menú Formato, Párrafo, en el siguiente cuadro:
En esta ventana podemos configurar la alineación del párrafo, las sangrías del texto, el espaciado entre párrafos y el interlineado dentro de un párrafo.
Es frecuente la utilización de algunos símbolos, conocidos como caracteres especiales. A menudo emplearemos los símbolos ® (registered), © (copyright) y otros más que podemos encontrar en el menú Insertar, Símbolos.
Corrección ortográfica Al igual que con cualquier procesador de textos, una vez hayamos editado nuestra página es imprescindible que pasemos el corrector ortográfico para detectar posibles errores y evitar la mala imagen que causa una web con faltas gramaticales y de ortografía. Para ello, seleccionamos el menú Herramientas, Ortografía.
Formato de texto Modificar el formato de texto se hace de forma similar a un procesador de textos. A partir de la barra de herramientas Formato podemos modificar el tipo y tamaño de la fuente, ponerla en negrita, cursiva o subrayado, cambiar el color o el relleno de la fuente
Numeración y viñetas
Para hacer esquemas numerados tenemos la misma herramienta que en los procesadores de textos. Podemos hacer esquemas con viñetas y con números y lo haremos a través de los iconos correspondientes en la barra Formato o a través del Menú Formato, Viñetas y numeración.
TRABAJO CON IMÁGENES Una Web está compuesta por mucho más que simple texto. Un sitio web se diseña para ser gráfico, en el cual vamos a añadir imágenes, tanto estáticas como dinámicas. Podemos añadir imágenes prediseñadas de FrontPage, imágenes que tengamos guardadas en el disco duro o imágenes de Internet. Es fundamental conocer que las imágenes deben estar en formato GIF o JPEG para poder ser visualizadas por la mayoría de los navegadores. Las características de ambos formatos son las siguientes: GIF Apropiado para logotipos y está comprimida de forma que no pierde definición. El máximo número de colores que soporta es de 256. Admite la propiedad de transparencia, que permite que las imágenes compartan el mismo color de fondo de la página. Igualmente se pueden crear los GIF animados como sucesión de diferentes imágenes. JPEG Apropiado para imagenes complejas y para fotografía. JPEG comprime y destruye parte de la información de la imagen. Soporta hasta 24 bits de colores y no admite transparencias.
Para insertar una imagen podemos hacerlo a través del botón de la barra de herramientas Estándar Haciendo clic en este botón insertaremos una imagen desde una carpeta de nuestro disco duro. Es muy importante guardar todas las imágenes en una carpeta independiente de donde guardamos los archivos html. Una vez que la imagen está en la página podemos cambiar algo en élla, como la alineación, el tamaño, el borde e incluso añadir un texto que aparecera cuando situemos el ratón encima de la imagen. Para ello haremos clic en el botón derecho de la imagen para que nos aparezca la siguiente pantalla.
imagen insertada Ventana de propiedades de la imagen
UTILIZACIÓN DE DIVISORES Los divisores son líneas horizontales que emplearemos para situarlos debajo e las cabeceras, entre las partes de un artículo o en cualquier lugar que deseemos. Existen dos tipos de divisores: reglas horizontales (
Para insertar un divisor pulsamos en el menú Insertar, Línea horizontal. Posteriormente podemos cambiar las propiedades de dicha línea (anchura, altura, color, sombreado,...) pulsando con el botón derecho del ratón al divisor de forma que nos aparezca esta pantalla.
UTILIZACIÓN DE FONDOS El color de fondo en una web es fundamental desde el punto de vista del diseño, hay que elegir fondos con colores simples y armoniosos, que "no hagan daño a la vista". Seguramente pocos aguantaríamos visualizar una web con un fondo naranja chillón y texto verde brillante. Para establecer el color de fondo de una página, nos situamos en la vista normal y allí seleccionamos Formato, Fondo o con el botón derecho del ratón en la página que estamos creando, activar Propiedades de página hasta llegar a la siguiente ventana: En esta ventana podemos modificar diferentes aspectos de la página: Colores de fondo, texto y de los hipervínculos Si queremos colocar una imagen como fondo de la web y si queremos añadirle una marca de agua, para que aparezca en el fondo de forma estática. INSERTAR IMÁGENES EN UNA PÁGINA En una página podemos insertar imágenes en cualquier lugar, pudiendo incluir en ellas hipervínculos a otra página o a una dirección web o cuenta de correo electrónico. En FrontPage para incluir una imagen lo podemos hacer de dos formas: En el menú Insertar, Imagen podemos seleccionar una imagen prediseñada de FrontPage o una imagen que contenga nuestro disco duro. Nos aparecen las siguientes ventanas: Imágenes prediseñadas: Imágenes del disco duro El funcionamiento de las imágenes prediseñadas es idéntico que con Word o Excel. Seleccionamos en la carpeta donde guardamos las imágenes aquella que queremos incluir en la página. Otra forma de insertar una imagen es a través del botón Insertar imagen que está en la barra de herramientas estándar. El resultado obtenido es el mismo que haciéndolo de la otra forma. Una vez que hemos insertado una imagen podemos cambiar sus propiedades haciendo clic con el botón derecho en la imagen y seleccionando la opción Propiedades de Página aparece el siguiente cuadro de diálogo: Podemos modificar el origen de la imagen, eligiendo el archivo GIF o JPG que se corresponde con el que queremos insertar en la web. Podemos darle a la imagen GIF la propiedad de transparente, añadir un texto que se mostrará cuando situemos el ratón encima de la imagen (en forma de etiqueta amarilla) y especificar un hipervínculo. Es habitual incluir en una web imágenes que hagan más agradable la visita a la página además de que son imprescindibles en el entorno gráfico web. En Internet podemos encontrar todo tipo de imágenes: fotografías, dibujos, imágenes animadas, etc, que podemos encontrar a través de los buscadores como Google, que incorpora un buscador de imágenes donde utilizando las mismas técnicas de búsqueda podemos encontrar todo tipo de fotografías e imágenes. Es imprescindible tener en cuenta el tamaño de las imágenes que vayamos a incluir en una página web ya que cuanto mayor sea supondrá un tiempo de carga superior de la página y esto puede llevar al visitante a abandonar la web dependiendo de la conexión que tenga. Los formatos utilizados para las imágenes son GIF y JPEG por su adecuado grado de compresión y ser visibles por todos los navegadores. FrontPage no es programa de retoque de imágenes, pero dentro de la familia de Microsoft Office existe PhotoDraw. Otros programas de tratamiento de imágenes son los siguientes: Adobe Photoshop: Uno de los programas más utilizados. Tutoriales y trucos Corel Draw: Otro programa muy completo. Tutoriales y trucos UltimateFX: utilidades/capture Gratuito y muy sencillo de manejar. En Ciberconta podemos descargarlo y consultar un tutorial Una vez que hemos añadido a una página texto, imágenes y modificado el fondo a nuestro gusto ya podemos decir que tenemos una página web vistosa, pero nos queda por añadir la pieza fundamental en una Web: LOS VÍNCULOS. 3) Inserción de componentes Con FrontPage podemos añadir componentes para que sea más atractivo, más interactivo o proporcione más información. Estos componentes son los siguientes: Comentarios Contadores de visitas Fecha y hora Marquesina Botones activables COMENTARIOS (Insertar, Comentario) Se introducen para que sean visibles en la Vista Normal solamente. Proporciona información sobre asuntos referentes a la edición de la página web. Aparecen en la Vista Normal de la siguiente forma: CONTADORES DE VISITAS (Insertar, Componente, Contador de visitas a la página) Si queremos conocer cuánta gente visita nuestra web será conveniente instalar un contador. FrontPage nos proporciona un contador con diferentes formatos, pero hay que tener en cuenta que el servidor donde tenemos alojada la página deberá tener instaladas las extensiones de FrontPage para que se vea en Internet. Cuando lo insertamos nos aparece la siguiente ventana, en la que podemos elegir el formato del contador. FECHA Y HORA (Insertar, Fecha y hora..) Normalmente se introduce en una web la fecha de la última actualización para informar al visitante de la web. En el momento en que actualicemos la página la fecha cambiará. Es un componente muy útil y casi necesario en una web. MARQUESINA (Insertar, Componente, Marquesina) Consiste en un texto que fluye a lo ancho de la página, aunque con otros formatos como los GIF animados o Flash se pueden conseguir efectos mucho más logrados y atractivos. El efecto es el siguiente: Este es el ejemplo de una marquesina en una página web que se desplaza en la página BOTONES ACTIVABLES (Insertar, Componente, Botón Activable) Consiste en crear un botón al que haciendo clic va a realizar una determinada acción. Se pueden crear efectos cuando pasamos el ratón por encima, cambiando la imagen, por ejemplo. El problema es que genera un applet de Java que tarda bastante en cargarse y puede llegar a no ser visible en función del navegador del internauta, con lo que perdería toda su utilidad. Nos aparece la siguiente ventana para configurar el botón. Podemos modificar el texto del botón, añadirle un vínculo, modificar colores, medidas y efectos. Un ejemplo de este botón sería el siguiente: