CSS Tab Designer - Generador de menú con tabs.

Más sobre el programa :: Requerimientos :: Videos :: Actualizaciones

CSS Tab Designer es un software gratuito para plataformas windows, que permite a los diseñadores de sitios webs , crear fácilmente espectaculares menú de navegación con tabs para las páginas webs mediante código CSS.

¿ Cómo funciona el programa? es muy simple, sólo debes elegir un estilo o motivo ( Vertical, horizontal, con tabs, etc ..) añadir los botones, y por último exportar el archivo HTML para colocarlo en tu página web.

A continuación puedes ver un simple tutorial de como utilizar este programa como también capturas de pantalla con las opciones que contiene.

Mas información sobre el programa.

Indice del contenido

  1. Descripción general.
  2. Elegir un estilo y tipo de menú
  3. Editar y configurar las opciones del menú.
  4. Previsualizarlo en el navegador.
  5. Exportar y crear la página HTML

 

1 - Descripción general.

El entorno del programa es de fácil uso, y en muy pocos pasos se pueden crear los diferentes tipos de menús.

  • Horizontales
  • Verticales
  • Con tabs.
  • Todos incluyen distintos estilos y diseños.

La primera vez que habrás la aplicación, te mostrará varios proyectos de ejemplo para que puedas probarlos.

A continuación puedes ver algunas imágenes previas de los menú que podrás crear.

Menú Vertical color verde.

Vertical color gris.

Vertical con íconos de flechas.

Vertical con apariencia en 3D.

Horizontal con tabs

 

2 - Elegir un estilo y tipo de menú.

En la pantalla principal, en el panel izquierdo ( Estilos de tabs), tenemos una lista de varios ejemplos que se pueden utilizar, como se puede ver en esta captura de pantalla ( En total cuenta con mas de 50 estilos ).

CSS Tabs verticales

Menú Horizontal

También se pueden cargar ejemplos desde el menú file, Open Examples ( Menú con tabs cuadrados y rectangulares, redondeados etc ..)

3 - Editar las opciones del menú.

En el panel derecho, podemos visualizar y editar las opciones del menú, y también acceder al código fuente CSS desde la botonera inferior ( opción code ).

Nota. Para cargar un ejemplo del panel izquierdo en el panel derecho, puedes hacerlo siguiendo dos pasos

  • Seleccionar el menú que quieras en el panel izquierdo.
  • Desde el menú Edit seleccionar la opción Fill With Examples

Luego se visualizará el menú como se muestra en la imagen anterior, y para editar los enlaces y el texto lo puedes hacer seleccionado cada Tab o botón ( en el panel Items), y desde la opción Edit, seleccionar Edit Selected Item.

Hecho esto, se abrirá un simple cuadro de diálogo donde deberás escribir el texto del enlace del botón y en el otro campo la dirección url de la página web.

También puedes eliminar y agregar mas fichas al menú presionando la tecla INSERT o desde la opción Add Items, y además cambiar la posición de cada botón en la barra de navegación ( mediante las flechas).

4 - Previsualizarlo en el navegador web.

Mientras vas diseñando y configurando tu menú, puedes ir probando como se comporta y visualiza el mismo en el panel derecho.

Pero también, puedes probarlo directamente en el navegador web. Para ello, haz clic en Preview, y selecciona de la lista de navegadores el que desees. Lo puedes probar con: Internet explorer, FireFox, Opera, SAfari entre otros.

5 - Exportar y crear la página HTML

Cuando hayas terminado de diseñar el menú, la tarea final será exportar el trabajo para poder utilizarlo en tu página web.

Para exportar la página Html junto con las imágenes para los tabs y botones, lo puedes hacer seleccionando la opción Generate Html and Images , donde se abrirá el diálogo de windows para seleccionar la carpeta y poder guardar el trabajo.

Nota: El código CSS será definido dentro del archivo HTML, no en un archivo de hojas de estilo externo.

 


Requerimientos de instalación y uso.

Sistema operativo: Windows 7, Vista, XP, 2000.

Nota. El código CSS generado es compatible con XHTML


Videos tutoriales.

Cambios, actualizaciones y mejoras del programa.

Buscar programas


Introduce los términos de búsqueda ...

Enlaces patrocinados.


Detalles y descargar

Web:
www.highdots.com
Licencia:
Gratis
Versión:
2.0
Idioma:
Inglés
Programa actualizado:
12 NOV 2010


Si te ha gustado esta página, programa o artículo puedes votar haciendo clic en este botón: