Cómo crear una página web con pestañas múltiples

Escrito por brandy alexander | Traducido por contributing writer
  • Comparte
  • Twittea
  • Comparte
  • Pin
  • E-mail
Cómo crear una página web con pestañas múltiples
Menú Multi Tab (Image by Jenny Treviño-Blanquet)

Las páginas Web con múltiples pestañas proporcionan una interfaz atractiva y dinámica en la que los usuarios pueden hacer clic al navegar por un sitio web. Las barras de navegación por pestañas se crean normalmente con una combinación de lenguajes de programación; sin embargo, puedes usar plantillas listas de Dynamic Drive y ahorrarte mucho tiempo o la necesidad de tener conocimientos de codificación. Aprende a crear tus propios menús con múltiples pestañas para tus páginas web y proporciona una experiencia de usuario mejorada para los visitantes de la Web.

Nivel de dificultad:
Moderadamente fácil

Otras personas están leyendo

Necesitarás

  • Scripts de menús con pestañas (disponbiles de Dynamic Drive)
  • Un editor de texto HTML, como Dreamweaver

Lista completaMinimizar

Instrucciones

  1. 1

    Adquiere scripts de menús con pestañas gratuitos de la fuente de Internet Dynamic Drive para obtener el HyperText Markup Language (HTML), Cascading Style Sheets (CSS) y el código JavaScript necesario para crear el menú. Haz clic en el enlace "ddtabmenu.zip" para descargar los archivos de origen a tu computadora.

  2. 2

    Haz doble clic en la carpeta descargada y abre el archivo "ddtabdemos.htm" en un editor de texto HTML, como Dreamweaver. Este documento contiene todos los ejemplos de menú de pestañas para que puedas previsualizarlos y ver cuál quieres utilizar en tu sitio Web.

  3. 3

    Añade las pestañas múltiples elegidas a tu página Web. Cada solapa tiene el código CSS y HTML asociado marcado con el número de ejemplo (por ejemplo, el Ejemplo 1), así que puedes suprimir los ejemplos de la pestaña que no vas a usar. Como alternativa, puedes abrir un documento existente de página Web e insertar los códigos apropiados.

  4. 4

    Edita la barra de navegación de modo que contenga el contenido y los enlaces. Haz esto localizando la etiqueta de lista "<li>" en el código HTML y sustituye la URL actual y el texto marcador de posición con el tuyo propio. Continúa desplazándote hacia abajo hasta el código DIV "<div>" para editar el texto del marcador que aparece cuando se pasa por el enlace.

  5. 5

    Personaliza el aspecto de tu menú editando el archivo CSS. Usa la "Ventana de estilos CSS" en Dreamweaver para visualizar las reglas de estilo o abrir el archivo CSS apropiado proporcionado en el archivo comprimido descargado. Visualiza la hoja de estilo y utiliza la ventana "Propiedades" del editor de texto para agregar o editar estilos, como el color de barras, de acuerdo con tu preferencia.

  6. 6

    Nombra y guarda los archivos. Utiliza la función de tu navegador "Previsualizar" para probar la página Web con múltiples pestañas.

Consejos y advertencias

  • No retires los avisos de crédito en ninguno de los archivos, a fin de no infringir los derechos de autor del creador.

No dejes de ver

Filtrar por:
  • Mostrar todos
  • Artículos
  • Galerías de fotos
  • Videos
Ordenar:
  • Más relevante
  • Más popular
  • Más reciente

No se encuentran artículos disponibles

No se encuentran slideshows disponibles

No se encuentran videos disponibles