MANUAL PRACTICO PARA REALIZAR UNA PAGINA WEB

¿COMO CREAR UNA PAGINA WEB RAPIDAMENTE?

Los estudiantes de Estudios Liberales, deben saber que hay que poseer ciertas habilidades que son producto del estudio de algunas materias que brinden una formación complementaria. Parte de esa formación complementaria viene dada por las herramientas informáticas que ayudan al estudiante a desarrollarse como profesional.

Microsoft FrontPage entrega parte de esa formación. Como consecuencia esta herramienta es clave para la obtención de la formación complementaria mencionada anteriormente.

A continuación se presenta un manual práctico para el uso rápido y eficiente de esta herramienta

Este manual esta preparado para ser usado a través de Microsoft FrontPage 2003

Primeramente hay que aclarar que esta es una herramienta en donde puede crearse una página Web de dos formas. Una primera que es a través de códigos programáticos y una segunda que es a través de capas. La segunda es la forma mas practica de creación del sitio Web; es el método que se desarrollara en esta guía.

Se define como método por capas a la creación del sitio Web, a través de la inserción de sus componentes manualmente. Cabe acotar que al crear una Web por este método, simultáneamente se crea su código programático. Este proceso también se da a la inversa.

Creación de una pagina Web, mediante Microsoft FrontPage 2003, a través del método por capas

Paso # 1: Abrir un nuevo Sitio Web:

Existen dos formas de abrir un nuevo site. La primera es a través de plantillas ya prediseñadas en donde solo se sustituye, en campos en blanco, la información que se va a colocar en la página. La segunda forma es creando un sitio Web en blanco. Al crear un sitio en blanco se tiene la libertad de diseñarlo y decorarlo a criterio personal; la primera opción no da esta libertad.

Creación del Sitio Web a través de una plantilla de Diseño: En el menú Archivo se hace clic en Nuevo. Este menú abre una barra de opciones en la parte derecha de la pantalla. Allí se busca la parte donde dice Nuevo sitio Web; se hace clic en donde dice “Mas plantillas…”. Allí abrirá un menú nuevo en donde se escogerá la plantilla de diseño de la preferencia del usuario.

Creación del sitio Web a través de un sitio en blanco: En el menú Archivo se hace clic en Nuevo. Este menú abre una barra de opciones en la parte derecha de la pantalla. Allí se busca la parte donde dice Nuevo sitio Web; se hace clic en donde dice “Mas plantillas…”. Allí abrirá un menú nuevo en donde se escogerá la plantilla de diseño que dice “Sitio Web Vacío”. Recordamos que esta es la opción que se va a desarrollar.

Paso # 2: Definición de la estructura del sitio:

Son varios pasos los necesarios para definir la estructura de un sitio Web

PRIMER PASO: Luego de hacer clic en el “Sitio Web Vacio”, aparecerá una pantalla con una lista en blanco. En esta pantalla se encuentra seleccionada la pestaña “Sitio Web” Sobre esa pantalla se debe hacer clic derecho y aparecerá un menú; en este se debe hacer clic en Nueva y luego en “Pagina en blanco”. Esto automáticamente creará el index del sitio Web. En el index se coloca la descripción general sobre el tema tratado en el sitio Web.

Este proceso se repite hasta crear las páginas Web necesarias para completar la estructura del sitio. Ejemplo: Si se va a crear una Sitio biográfico de un personaje importante y se necesita una página que hable de su biografía, su obra, su influencia y una galería fotográfica, el proceso anterior se repite cuatro veces. Al crear las paginas Web nuevas, aparecerá el nombre “pagina_nueva_1.htm”; el usuario puede cambiar dicho nombre siempre y cuando no elimine la extensión del archivo (****.htm)

SEGUNDO PASO: Después de creada las Web necesarias para definir la estructura, en la parte inferior de la lista aparece una barra de botones. Para definir la estructura de exploración de la página Web, se debe hacer clic en el botón rotulado como “exploración”. Este botón llevara al usuario a una pantalla como la siguiente:

Para definir la estructura de exploración se arrastran las diversas páginas Web que conforman el sitio, desde la lista de carpetas hacia donde se encuentra la pantalla donde se encuentra una pagina rotulada como “index.htm”. Allí se le da la estructura deseada.

Siguiendo el ejemplo anterior, las páginas Web creadas fueron cuatro: Biografía, Obra influencia y fotogalería. A este sitio Web se le dio la estructura que se observa en la pantalla siguiente:

Paso # 3: Diseño de la pagina Web:

Luego de definir la estructura de la página Web comienza el proceso de diseño de la misma.

Es recomendable comenzar por el index, de modo que se cumpla la forma de exploración del sitio; es decir, la estructura de exploración podría considerarse como una guía para el diseño del sitio Web.

Para comenzar, se hace doble clic, desde la pantalla de estructura de exploración, en la página que esta rotulada como index.htm. Al hacer el doble clic automáticamente aparecerá una pantalla como la siguiente

Es aquí donde se puede comenzar a diseñar el sitio Web:

1.) Se comienza por establecer una Tabla o celda de diseño: Se hace clic en el menú “Tabla” y luego en Tablas y celdas de diseño. Esto hará que aparezca en la parte derecha de la pantalla una barra con titulo “Tabla y Celda de Diseño” como la siguiente:

Allí donde se escoge la tabla o celda de diseño de la preferencia del usuario.Luego de escoger la celda de diseño se procede a trabajar sobre ella.

2.) Agregar un fondo a la página: Para agregar un fondo a la página Web se debe hacer clic en el menú formato y luego en fondo. Allí aparecerá una pantalla como la siguiente:

Allí se le puede añadir la imagen de fondo o si lo desea, el color de su preferencia. En este mismo menú también se podrá establecer el color de la fuente.

En este caso se tomará el color azul como fondo. Ahora si procedemos a trabajar sobre la celda de diseño.

3.) Agregar titulo: Para agregarle un titulo a la página Web existen varios métodos: Se puede escribir el mismo con el teclado y darle formato a la fuente (Aumentar de tamaño, Cambiar el tipo de letra, el color, etc.) Se puede añadir el titulo a través de WordArt. Para agregar titulo de esta forma se coloca el cursor sobre el lugar en donde se desea insertar el titulo; luego se hace clic en el menú insertar, Imagen, WordArt. Allí se siguen las instrucciones y se inserta el titulo según el diseño de la preferencia del usuario. Luego para centrar el texto en el espacio en donde se insertó el titulo, se selecciona el titulo y se hace clic en el botón centrar de la barra de Formato.

En este caso se insertará el titulo por WordArt.

Por los momentos, el trabajo vendría quedando de la siguiente manera:

4.) Agregar marquesina: En el menú Insertar, se hace clic en componente Web. Este menú le llevara a una pantalla como la siguiente:

Allí se selecciona la etiqueta que dice “Marquesina” y se hace clic en finalizar. Luego aparecerá otro menú en donde se deben seguir las instrucciones para definir el formato de la misma.

5.) Barra de Navegación: La barra de navegación, dentro de una pagina Web, generalmente se coloca en el lado derecho de la misma. Para crear una barra de navegación existen dos posibilidades: Escribiendo las palabras que posteriormente se transformarán en vínculos y dándoles el formato de la preferencia. Agregando botones interactivos (método a explicar): Para colocar un botón interactivo, se debe hacer clic en insertar, luego en componente Web, luego se hace clic en la etiqueta que dice botón interactivo y aparecerá una pantalla como la siguiente:

Allí se selecciona el botón interactivo de su preferencia y se rotula el mismo con el nombre deseado. En este mismo menú se puede añadir el vínculo hacia donde dirigirá la página Web al usuario al hacer clic en el botón creado. Para añadir el vínculo se hace clic en el botón examinar al lado del espacio en blanco perteneciente a vínculo y se selecciona la página o el destino hacia donde se desea vincular el botón.Este paso se repite de acuerdo a la cantidad de botones que la barra de navegación necesite.

El progreso del trabajo quedaría de la siguiente manera:

6.) Agregar un contador de visitas: Para agregar a la página Web un contador de visitas, se hace clic en Insertar, luego en componente Web. Aparecerá el recuadro ya visualizado anteriormente. En ese recuadro se debe buscar la opción que señala “contador de visitas a la página”. Se selecciona el modelo de la preferencia del usuario. Luego se encontrará una pantalla como la siguiente:

Se seleccionan las características del contador, se hace clic en aceptar y el contador queda insertado.

7.) Agregar la información: Para este paso solo es necesaria la información a colocar en la página Web y darle formato de manera creativa y llamativa al usuario.

El diseño del index quedaría terminado y ya se tendría un boceto de diseño como el mostrado a continuación:

Todos los pasos se repiten para el diseño de las otras páginas que componen al sitio Web.

En el caso específico de la página titulada como fotogalería, se sigue un proceso diferente: Luego del proceso previo del diseño de la pagina Web, se coloca el cursor en el espacio en donde se va a colocar la información y se hace clic en el menú Insertar y luego en Componente Web. Aparecerá el recuadro visualizado anteriormente. En el debe identificarse la etiqueta que dice “Galería de Fotografías”; Se selecciona el modelo de la preferencia y se hace clic en Finalizar. Allí aparecerá una pantalla como la siguiente:

En ella se siguen las instrucciones para insertar las imágenes que se deseen. Luego de ese proceso se hace clic en aceptar y estará creada la galería de fotografías.

TIPS PARA HACER UNA PAGINA WEB CREATIVA

El Index debe ser la página con mayores componentes creativos. Esta es la primera impresión del sitio por parte del visitante. Tampoco se debe sobrecargar al mismo porque no produce el efecto deseado.

El fondo debe estar en armonía con el texto. Esto ayuda al visitante a la lectura y a la comprensión de la información del sitio Web.

El intercambio de colores de la fuente dentro de la página es una manera de refrescar la vista del visitante en el momento en el cual se encuentra leyendo la información contenida en la Web.

Se deben usar colores llamativos al usuario con el fin de captar su atención

No se debe sobrecargar las páginas con textos porque el usuario tiende a no leerlas o a distraerse en otras cosas.

Agregar imágenes para combinarlas con el texto es buena idea para refrescar un poco la visión del sitio Web por parte del visitante.

Si es necesario colocar una pagina con una cantidad de texto considerable, las imágenes o gifs dentro de las partes del texto ayudan a motivar la lectura del visitante

Se debe utilizar el espacio disponible de manera uniforme. Dejar espacios en blanco es poco armonioso para la visualización del sitio por parte del visitante. La mala distribución del espacio provoca un efecto negativo o de rechazo por parte del visitante hacia el sitio.

Herramientas Informáticas BPPR40Manual elaborado por Fernando Esquerre

C.Nº 2025940