En el entorno tenemos;

1- Menú principal, como en cualquier programa.

2- Iconos de acceso rápido, alternativa rápida al menú principal.

3- Nuestra página.

4- Contenidos de nuestra página (páginas y elementos de las mismas).
Un web site consta de varias páginas Web linkeadas entre sí.
Ahora vamos a crear 4 páginas más que serán parte de nuestro sitio web.
Para hacerlo, clikeamos en este ícono que se encuentra en Contenidos, y vamos a
ver como se agregan las páginas al listado...
Una vez que creamos nuestras 4 páginas, debemos cambiarles el nombre para determinar de una manera más práctica e intuitiva el contenido de cada una...

Importante; Debemos dejar a la página que escojamos como principal con el nombre "index", sino es muy probable que nuestro sitio web no funcione correctamente online.
Para renombrar las páginas podemos optar por 3 técnicas;

1- Clikear una vez para seleccionar la página y luego otra vez más con el boton izquierdo del mouse sobre la página que deseamos renombrar.

2- Clikear una vez con el boton derecho del mouse sobre la página que deseamos renombrar y cuando se abre el menú contextual seleccionar "renombrar página".

3- Pararnos sobre la página y apretar F2.

De cualquiera de esas 3 formas podemos renombrar nuestras páginas.
De este modo van quedano renombradas nuestras páginas...
Del mismo modo, si queremos eliminar páginas de nuestro sitio web, simplemente las seleccionamos y clikeamos sobre el ícono que posee forma de cruz roja y de este modo las eliminaremos.
Listo, las páginas ya fueron renombradas y así es como debe quedar la estructura de nuestro sitio web...
Ahora vamos a proceder a cambiar el color de fondo (Background) de la página, para ello vamos al ícono con froma de gotero y tras clikear en él, seleccionamos el color.
PASO 1
·Crear una Página WEB·




El siguiente manual fue creado para enseñar al lector los pasos básicos para la creación de una página Web utilizando el Web Page Maker.

No es un manual de diseño Web sino mas bien un manual didáctico orientativo, sin embargo con el siguiente material van a poder crear un sitio Web 100% funcional.

Para poder seguir este manual vamos a necesitar las siguientes cosas;

> Internet.
> El software Web Page Maker. (Lo podemos decargar de su página oficial http://www.webpage-maker.com/download.html)
> El browser funcionando correctamente (Internet Explorer o Firefox, entre otros).
> Ganas y el enfoque en obtener un sitio web online.

Comencemos;

En este manual, como ejemplo didáctico, vamos a crear un Web site para una Heladería.

La página que crearemos carece de un estúdio previo de marketing y diseño gráfico, esto es porque lo más importante es que el lector aprenda en concreto la mecánica de creación de una página y cuales son las herramientas funcionales básicas y no el estudio de diseño gráfico de un sitio, eso lo podrá hacer más adelante...


Abrimos el Web Page Maker y veremos lo siguiente:
De este modo nos queda el background luego de cambiar el color.

En el siguiente paso, vamos a insertar una imagen para ir completando nuestra página web...
Para insertar una imagen, vamos a cortar camino nuevamente utilizando un ícono del menú y consecuentemente clikeando en "From files" que se refiere a insertar una imagen desde un archivo.
Se nos abrirá una ventana de exploración como en cualquier otro programa y simplemente seleccionamos la imagen a insertar y luego clikeamos sobre el botón "Abrir"...
Como vemos, la imagen está sobredimensionada, pero eso no es problema, con solo clikear sobre ella y pararnos sobre alguna cara o ángulo de su silueta podemos redimensionarla a nuestro gusto...
De este modo queda redimensionada la imagen del helado.

Importante; prestemos atención que la inserción de la imagen, así como también el cambio de color del background y demás trabajos iniciales, los venimos realizando en la página "index", osea la página principal (y con la página principal me refiero a que es la que primero se abrirá cuando ingresen a nuestro sitio web)

Luego de insertar y redimensionar la imagen, para continuar con el diseño vamos a insertar texto en nuestra página. Para ello nos dirigimos a uno de los íconos del menú, el que tiene el gráfico de dos letras "A"...
Ahora que insertamos un cuadro de texto, vamos a hacer doble clik sobre el recuadro como bien nos propone el programa...
Como vemos, se nos abrirá una ventana muy práctica para editar el texto que hemos insertado, en este caso voy a escribir el nombre de la heladería...
De este modo queda el texto con el formato que le he dado.
Como podemos ver, dentro de un mismo cuadro de texto podemos dar distintos formatos a nuestras palabras...
Ya hemos insertado texto e imagen, ahora vamos a insertar un gráfico, un rectángulo. Para ello vamos al ícono correspondiente en el menú y clikeamos en "Rectangle" o "Rectángulo" según el idioma de nuestro Web Page Maker.
Se nos abrirá una ventana de configuración, como con las demás cosas que hemos insertado, en este caso vamos a "Color" y luego "Fill Effects" para conseguir un degradé de colores en nuestro rectángulo...
Vamos a buscar nuestros colores y formato para el degradado...

Además del color del rectángulo, vamos a resaltar la silueta del mismo, en el siguiente gráfico vemos como...
Para lograr resaltar o recuadrar el rectángulo, debemos tildar "With Outline", posteriormente seleccionar el color y en "Width" el grosor de la línea del recuadro en pixeles, en este caso de 1 pixel.
De este modo queda hecho nuestro rectángulo, que es editable en cuanto a tamaño y demás propiedades con solo clikear una o dos veces sobre él.
Como notamos, el rectángulo nos ha quedado sobre el texto y la imagen, y lo que necesitamos en este caso es que quede debajo del texto y la imagen. Para mover nuestro rectángulo de "nivel" o "capa" y de ese modo quede debajo del texto e imagen, debemos ir a "Contenidos" y luego "Elementos" (lo vemos en el siguiente gráfico)...
Para mover de capa al rectángulo, vamos a "Contenidos", etiqueta "Elementos" y luego clikeamos en alguna de esas flechas verdes que nos van a permitir ubicar el rectángulo en la capa o nivel adecuado para que no quede superpuesto sobre la imagen y el texto.
Luego de redimensionar nuevamente la imagen, algún retoque más en el texto y ubicar correctamente el rectángulo en el nivel adecuado, así nos va quedando el diseño de nuestra página...
Ahora vamos a crear un nuevo rectángulo, o más fácil, copiamos el primer rectángulo y luego de pegar el nuevo lo redimensionamos hasta encontrar el tamaño adecuado.
Importante; durante el desarrollo del sitio web, al amontonarse los elementos, es muy probable que sin querer movamos de lugar o clikeémos sobre algún elemento, para evitar este tipo de cosas podemos bloquear los elementos.

Para bloquear un elemento que ya no modificaremos hay que pararse sobre él, clikear el botón derecho y poner "Lock", para desbloquearlo hacemos lo mismo pero con "UnLock".
Luego de bloquear los elementos que ya no modificaremos, le agregué el Copiright en otro rectángulo debajo.

Ahora vamos a insertar un iFrame, un iFrame es un recuadro en el cual visualizaremos otras páginas, es como una ventana en la cual veremos las demás páginas web. Para insertar un iFrame vamos al menú principal, "Insert" y luego "iFrame".
Al insertar el iFrame, debemos configurarlo, para ello debemos indicarle cual es la página que debe mostrar.
Cuando alguien ingrese en nuestro sitio, verá la página principal y el iFrame con el contenido que le indiquemos inicialmente. Luego, con la barra de navegación (botones dinámicos), el usuario va a poder cambiar el contenido del iFrame y de ese modo navegar en el sitio.
En este caso, vamos a dejar configurado el iFrame para que inicie mostrando el contenido de la página "Inicio".
Para que no nos muestre siempre la Scroll Bar, vamos a dejarlo en automático para que solo lo haga en casos necesarios.
Y en "Show frame Border" vamos a poder indicarle si queremos que el iFrame quede con borde o no se note que es una ventana.
Esta es una Scroll Bar
Luego de configurar el iFrame para que nos muestre la página "Inicio" debemos darle el tamaño adecuado...

Clikeamos sobre él y lo redimensionamos cual si fuese una imagen.
Es fundamental aprender el funcionamiento de la herramienta iFrame; es una ventana en la que visualizaremos otras páginas.

El iFrame se utiliza para mostrar contenido sin necesidad de cambiar el entorno web, cada vez que el usuario presione un botón web para cambiar de contenido, se actualizará la ventana correspondiente y no toda la página.
Ahora vamos a insertar una Barra de Navegación (un panel con botones para navegar por la página y visualizar demás contenido).

Para ello vamos al ícono adecuado en el menú...
Se nos abre una ventana de configuración e inicialmente seleccionamos el aspecto.
Ahora podemos ver todo lo demás que tenemos por configurar.

En la etiqueta "Options" vamos a poder configurar la cantidad de botones, nombres de los mismos, qué sucederá cuando los presionen, etc. En la etiqueta "Text" las fuentes y colores de los botones, en la etiqueta "Layout" si el panel es horizontal o vertical y separación y en la etiqueta "Customize" si queremos poner algún gráfico.

En un principio vemos que el botón "index" está demás, con el ícono que posee una cruz roja lo eliminamos, en el caso que queramos agregar otros botones lo hacemos con el ícono de forma "+" color verde, y con los restantes íconos con forma de flecha, verdes, podemos ubicar en donde queramos cada uno de los botones.

Ahora vamos a configurar algo fundamental, lo que sucederá cuando el usuario presione los botones.

Por ejemplo, comencemos con el botón "Contacto";

Link Type; le indicamos si el botón abrirá una página externa o una de nuestro sitio. En este caso vamos a decirle que abrirá una página interna.

URL; le indicamos qué página de nuestro sitio abrirá ese botón. En este caso la página "contacto".

Target; le indicamos en donde o con que *modalidad abrirá la página al presionar ese botón. En este caso le indicaremos que nos abra la página en el iFrame1, que es el nombre del iFrame.

Bookmark la dejaremos en blanco.
Seguido a esto, repetiremos la misma operación con cada uno de los botones, dejando a nuestra barra de navegación lista para su funcionamiento.
Nuestra página web ya va tomando forma, ahora vamos a completarla un poco más con algunas imágenes y texto.
*En Target, además de poder indicarle que nos abra la página en el iFrame1, también podemos indicarle que nos la abra en otra ventana, en otra sección del browser, en una ventana emergente, etc. Con las opciones blank, parent, self y top.
De este modo hemos completado la página principal con más imágenes y texto.

El siguiente paso es diseñar las demás páginas del sitio que serán desplegadas en el iFrame1 de acuerdo a la exigencia del usuario a través de la barra de navegación (panel con botones).
Para continuar con la edición de las demás páginas, nos dirigimos al panel de contenidos del sitio y seleccionamos la página que queremos editar, en este caso continuaremos con la página "Inicio", que va a ser la primera que visualizará el usuario en el iframe1 al ingresar a nuestro sitio.
Vamos a ver que es lo que hacemos inicialmente en la página "Inicio";

1- Clikeamos en el ícono correspondiente a texto para insertar texto.

2- Completamos el cuadro de texto con lo que queremos en la ventana de edición y en este punto lo que hacemos es agregar un link a una palabra, a la palabra "Contáctese", para que al clikear en ella se nos direccione a la página "contacto".

3- Luego de seleccionar la palabra elegida, clikeamos en el ícono de "link" y configuramos el linkeo cual si fuese un botón de la barra de navegación... en la siguiente imagen vemos cómo.
Como vemos, la configuración del link no difiere mucho de la configuración de los botones de la barra de navegación.

Link Type; le indicamos que ese link corresponde a una página en nuestro sitio.

URL; le indicamos qué página debe abrir al clikear en el link.

Target; le indicamos en donde o con que modalidad debe abrir la página.

Title; le indicamos qué queremos que muestre al pasar el mouse sobre la palabra linkeada.
Le damos un poco más de color y diseño...
Le agregamos algunas imágenes y ya quedó prácticamente lista...
Ahora volvemos a la página "index" y vamos a hacer algo muy práctico que hasta lo pudimos aver hecho pero no lo hicimos; vamos a previsualizar nuestra página web en el browser (navegador, Internet Exlorer, Firefox, etc) y también probar los botones y como va quedando...

Para ello podemos presionar F5 o en el ícono que tiene el dibujo de una lupa,
Luego de presionar F5 o sobre el ícono con dibujo de lupa, podemos ver en nuestro navegador como va quedando nuestro sitio y como linkean los botones.

Como podemos ver, el iFrame muestra el contenido de la página "Inicio" y el background no es blanco sino que es transparente, no queda muy bien ya que la página se ve muy saturada de verdes, asique más adelante vamos a agregarle un fondo coloreado para que quede mejor.
Ahora si, y sin perder tiempo ni distraerme con otra cosa, me dirijo nuevamente a la página "Inicio" y le modifico el color del background... ya sabemos como; clikeamos sobre el fondo de la página, luego vamos al menú, al ícono con forma de gotero y listo, seleccionamos el color que queremos...
Me saltéo unos pasos más ya que sino sería repetir las mismas cosas; completo las demás páginas con la misma modalidad, osea con texto e imágenes y previsualizo...
Y por último vamos a configurar algunos aspectos generales de nuestra página principal, lo hacemos clikeando sobre el background con la tecla derecha del mouse, y cuando aparece el menú contextual en "propiedades".
Ahora bien, primero que nada tildamos en "No Generator", esto es para evitar que las personas que naveguen en nuestra página no sepan con que software hemos creado el sitio.

Luego seguimos completando;

Title; el título de la web, aparecerá en la parte superior de la pestaña del navegador o de la ventana del mismo.

Author; el autor del sitio.

Keywords; palabras clave, son las que direccionan a los buscadores hacia tu sitio.

Description; una breve descripción del sitio, contenido, objetivo, etc...
Observemos el background, es un gris oscuro que no queda muy bien de fondo, vamos a cambiar ese background y poner uno basado en una imagen en vez de simplemente cambiar el color de fondo...
Para cambiar el background utilizando una imagen, clikeamos sobre el fondo una vez con el botón derecho y luego en "propiedades" con el botón izquierdo...
Listo, no se si quedó mejor pero aprendimos a cambiar el background por una imagen. Algo interesante es que en realidad la imagen es muy pequeña, pero si se pone una al lado de la otra aparenta una sola imagen de fondo, en realidad hay cientos de repeticiones de la misma imagen pero como fue hecha para que visualmente continúe, queda perfecto.
Ahora vamos a cambiar el background y poner una imagen.
La imagen no tiene porqué ser del mismo tamaño que pa página, si es más pequeña el Web Page Maker la pegará automáticamente en el fondo las veces que sea necesario, por eso se suelen utilizar pequeños íconos de imagen o texturas para que se repita la imagen hacia los costados y hacia abajo.
En los casos en que los usuarios varíen las configuraciones de pantalla no aparecerán espacios en blanco sino que al repetirse la imagen automaticamente, siempre existirá el fondo.
FLASH

Ahora vamos a insertar alguna animación o panel de navegación o lo que sea que queramos en formato de FLASH, es un ejemplo de como podemos agregar contenido flash a nuestro sitio.

No veremos como programar Flash porque no es el tema del manual.

Vamos a suponer que ya tenemos programado o fabricado un Banner con el nombre de la heladería, un archivo Flash con la extención SWF.

Así como en este ejemplo insertamos un banner heho con Flash, podemos hacerlo también con barras de navegación o botones en flash, animaciones, otro estilo de banners, etc...
Considerando que ya tenemos un archivo en formato de flash swf;

Vamos al menú, "insert" y luego "Flash Movie"
Luego de abrir el archivo swf;

ubicamos en donde corresponda el componente Flash y presionando F5 previsualizamos para ver como quedará en funcionamiento...
De este modo previsualizamos y vemos como funciona el banner animado hecho con Flash...
Por último guardamos la página con formato HTML para que funcione como página WEB...
Clikear en "Export to Html" y guardar como cualquier otro archivo...
Si en lugar de clikear en "Export to Html", ponemos simplemente "guardar" o "guardar como" estaremos guardano el proyecto y no la página con formato HTML, y el proyecto no funciona como página web sino que solo sirve para que el Web Page Maker lo abra como tal.
De este modo, el Web Page Maker nos ha generado los archivos correspondientes a nuestro sitio web. Importante; todos esos archivos son los que vamos a subir al Hosting.
Listo, ya hemos creado nuestro primer sitio web.

Gracias al cómodo entorno que nos presenta el Web Page Maker, no hay necesidad de programar nada, osea que el mismo programa genera el código HTML en base a nuestro diseño y configuración.

En el capítulo en donde explico cómo insertar un contador de visitas y el servicio de Google Analytic, hay información complementaria para este manual, donde explico como insertar código en la página ya que es probable que quieran probar algun srcipt o código preprogramado por otros webmasters (algo muy común y actual gracias a la gran cantidad de códigos y scripts de uso gratuito que hay disponibles en sitios de recursos para Webmasters).

Los archivos HTML que nos genera el programa, pueden modificarse en cualquier otro editor HTML, incluso con el bloc de notas, y son los que cargaremos en el Hosting una vez que tengamos todo listo.

Si vamos a la carpeta donde se nos generaron los archivos HTML, vamos a poder probarlos ejecutándolos y vamos a poder ver en nuestro browser el funcionamiento previo de la página.

El Web Page Maker es muy cómodo, sin embargo es bastante limitado como para realizar páginas web con gran complejidad de interactividad o dinamismo. Sin embargo es bastante satisfactorio para sitios Web institucionales o para crear plantillas, books de fotos o imágenes de productos, folletos y todo tipo de webs informales, formales, etc, y fundamentalmente es un software 100% eficaz y eficiente para crear nuestro primer sitio Web con básicos conocimientos.

Los invito también a probar las demás herramientas, insertar algún video, algún script, algún marquee, un flash slideshow (plantilla de imágenes en flash que el mismo Page Maker te ayuda a crear), etc. Van a ver que es muy completo y se puede adornar de muchas formas el sitio, lo fundamental ya está hecho, ahora lo importante es poder subir el sitio a internet (al hosting) y luego con tiempo se puede ir actualizando como bien les paresca.

Paso 1 completado.
Ahora restan los otros 3;

1>Diseñar una página WEB.------------------------OK
2>Registrar un dominio.
3>Registrar una cuenta en un Hosting.
4>Subir la página WEB al Hosting.



PASO 1  OK
·Crear una Página WEB·

FIN



Suponiendo que ya tenemos listo nuestro sitio, que ya agregamos todo lo necesario para que funcione, botones, texto, contenido, alguna animación en Flash, links y demás páginas, etc, vamos a hacer 2 cosas;

1- Guardar el proyecto (simplemente lo hacemos llendo a "File" en el menú principal y luego "Save" o "Save As").

2- Generar los archivos html correspondientes al sitio, los que luego subiremos al Hosting para que nuestro sitio quede online.
© 2010 CURSO Cómo Obtener un Sitio Web Online Utilizando Recursos Gratuitos By Damián Lasso / All rights reserved    |Aspectos LEGALES|
| Inicio | Tema Anterior | Tema Siguiente |