Si creamos un sitio web nos va a generar una carpeta en la cual se va a generar automáticamente una página principal (llamada index.htm) y dos carpetas llamadas images y _private, donde guardaremos archivos. Podemos elegir el tipo de web que deseamos a partir del asistente y especificamos la ubicación en el disco duro.
Si creamos una página web, nos creará una página independiente y no generará las carpetas que aparecen en el sitio web. ¿Cómo lo hacemos?
Hacemos clic en Archivo, Nuevo y seleccionamos Web o Página en función de lo que queramos crear. Si creamos un sitio web podemos disfrutar de las utilidades que nos proporciona FrontPage a través de la barra de vistas.
Es muy importante que tengamos muy claro los nombres que vamos a guardar nuestros archivos y tener cuidado al utilizar mayúsculas y minúsculas en los nombres ya que serán reconocidos como diferentes. En la gran mayoría de los casos la página principal de nuestro sitio web se denominará index.htm y será la que aparezca cuando el internauta escriba la dirección de nuestra web.
Cuando abrimos FrontPage lo primero que nos encontramos es que tiene una apariencia similar a los programas de la familia Office, con barra de título, de menús, herramientas muy similares.
Tenemos en FrontPage 2003 la posibilidad de alternar entre las diferentes vistas (Diseño, Dividir, Código y Vista Previa) a través de las solapas de la parte inferior de la ventana.
1) Vista Diseño: En esta opción vemos la página web en formato WYSIWYG ("What you see is what you get" , "Lo que ves es lo que obtienes". Para diseñar la página web colocamos el texto, imágenes y demás elementos de la misma forma que lo veremos en Internet.
2) Vista Dividir: En esta opción vemos la página web en dos partes, en una la vemos en formato WYSIWYG y en la otra vemos el Código HTML lo que nos va a servir para interpretar las modificaciones en el código que realiza cualquier acción del Frontpage.
3) Vista Código: Podemos visualizar el código HTML si queremos retocarlo para hacer algo que no podamos con FrontPage o para insertar código HTML que hemos descargado de Internet. En esta vista es necesario conocer los fundamentos y la estructura del lenguaje HTML para poder intervenir en él sin errores.
4) Vista previa: 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 Firefox.
Podemos ver las diferentes vistas
Vista Diseño
Vista Código HTML
Vista Previa
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:
2) 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 + IntroEn 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
. 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 - justificada
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.
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 (<hr> en lenguaje HTML; Insertar, Línea horizontal en FrontPage) y gráficos que parecen líneas.
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:
Imágenes Prediseñadas:
El funcionamiento de las imágenes prediseñadas es idéntico que con Word o Excel.
Imágenes del Disco Duro:
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: 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
|
