Con la colaboración de TecnicasInfalibles.Com

Luz, cámara... ¡acción!

Una vez en el editor vamos a comenzar definiendo los elementos básicos de nuestra página. Antes que nada crearemos una tabla principal que representará nuestra zona de tareas.

Para quienes desean trabajar su web en definición 800x600, -aun la mas utilizada en la actualidad en nuestros paises- les recomendamos que generen una tabla de 750pixels de ancho [ver imagen], este tamaño fijo evitara el tan poco profesional desplazamiento de la web cada vez que el usuario cambia el tamaño de la ventana.

Utilizando la opción “propiedades de la página” en “bordes” colocaremos el valor “0” que significa que la tabla no tendrá bordes visibles y ancho: 750 pixels. En nuestro editor veremos la tabla dibujada en línea punteada, esto no debe preocuparnos, es simplemente una guía para el desarrollador, no será vista por el usuario.

Dentro de esta tabla iremos colocando los diferentes elementos gráficos y de texto que compondrán nuestra web. En este caso el sitio estará compuesto por una sola pagina conteniendo toda la información, pero como veremos es posible utilizar el mismo diseño para ampliarlo a 3, 4 ó 5 páginas que pueden contener el acceso a zona de usuarios, información para afiliados, etc. De esta manera cuando el visitante navegue en su sitio, vera siempre un diseño general en el que cambia el contenido y de mantiene constante el encabezado con los diferentes enlaces internos.

En este tipo de sito web comercial no es usual colocar enlaces exteriores que distraigan la atención del potencial cliente. No hay peor imagen en Internet que la de sitios que cambian su formato en cada sección. El formato es algo que debemos mantener constante a lo largo de toda nuestro website. Aquí explicaremos paso a paso el armado de un sitio web de venta para un producto digital genérico con descarga desde Internet.

Luego de presentada la tabla principal, debemos dividir la misma en sub-tablas según el diseño que pretendamos realizar. En el ejemplo que queremos aquí presentar dividiremos la tabla en 5 sub-tablas de la siguiente manera:

El espacio superior lo utilizaremos para el encabezado del sitio (header). Tomaremos como ejemplo una página de venta real y activa. El sitio www.tuparejaestable.com que pertenece a un libro electrónico recién lanzado al mercado. La imagen que colocaremos en la primera sección de la tabla es:

Logrando lo siguiente en nuestra web:

Con un poco de esfuerzo podemos crear en nuestro editor gráfico una cabecera similar y adaptarlo tal cual lo haremos con este ejemplo.

En la zona inferior de la tabla colocaremos la imagen del pié de página o "footer" como es más conocido en inglés.

Como vemos en la imagen, configuraremos una nueva tabla (esta vez si lo deseamos conservando el borde) en el tercer segmento de los 5 que previamente creamos. En su interior colocaremos nuestro contenido. Obviamente este contenido puede ir variando en las diferentes secciones que definiremos a partir del menú del gráfico superior. La longitud del contenido dentro de esta tabla va a variar según el material que usted desee presentar.

Como vemos en el ejemplo gráfico, es fundamental volver a dividir el interior de cada tabla en nuevas sub-tablas que nos ayuden a mantener un diseño firme y equilibrado. Mas adelante explicamos que requisitos debemos imponer al contenido de esta zona central para lograr atrapar la atención de nuestros visitantes.

El penúltimo espacio de la sub-tabla lo dejaremos en blanco y el inferior lo utilizaremos para colocar nuestros datos de contacto, empresa, derechos de autor, etc.

Visualizado en Microsoft Explorer, una vez colocado el "background" (fondo) y con algunos retoques adicionales logramos la siguiente pagina web:

Ahora simplemente debemos seguir un procedimiento análogo utilizando nuestras propias imágenes, fuentes y datos. Si contamos con el programa Header Generator [www.headergenerator.com] la edición de una cabecera similar a la del ejemplo es una tarea sumamente sencilla. Tan simple como colocar nuestro título, nuestro slogan y elegir una imagen o logo apropiado.

El software produce el archivo de imagen que directamente colocaremos en el espacio superior. Si deseamos diseñar por nosotros mismos esta cabecera, también podemos hacerlo, para ello deberemos manejar con cierta soltura algún programa de tratamiento de gráficos como ser PhotoShop (el más utilizado) o Paint Shop Pro, entre otros.

Haremos una pausa en la realización del sitio para introducir algunos conceptos de marketing importantes que nos ayudarán a seguir adelante con mayor soltura.