Como Crear Un Menu En Dreamweaver

Vamos a aprender cómo crear un menú en Dreamweaver. Aquí tienes los pasos detallados. Es importante seguir cada paso cuidadosamente.

Paso 1: Crear un Nuevo Documento

Primero, abre Dreamweaver. Luego, crea un nuevo documento HTML. Ve a Archivo > Nuevo. Selecciona HTML y haz clic en Crear.

Paso 2: Estructura Básica del Menú

Ahora, añade la estructura básica del menú usando etiquetas HTML. Usaremos una lista no ordenada (<ul>) para crear el menú. Cada elemento del menú será un elemento de lista (<li>).

Must Read

Inserta el siguiente código dentro del elemento <body>:


        <ul>
            <li><a href="#">Inicio</a></li>
            <li><a href="#">Acerca de</a></li>
            <li><a href="#">Servicios</a></li>
            <li><a href="#">Contacto</a></li>
        </ul>

Cada <a href="#"> es un enlace a una página diferente. Reemplaza el "#" con la dirección URL real de cada página. Por ejemplo, index.html, acerca.html, etc.

Crear un menú interactivo en Dreamweaver CS6 - YouTube

Paso 3: Estilizar el Menú con CSS

A continuación, vamos a darle estilo al menú con CSS. Para esto, necesitamos crear un archivo CSS o usar la etiqueta <style> dentro del <head> del documento HTML.

Para este ejemplo, usaremos la etiqueta <style>. Añade lo siguiente dentro de la sección <head>:


        <style>
            ul {
                list-style-type: none;
                margin: 0;
                padding: 0;
                overflow: hidden;
                background-color: #333;
            }

            li {
                float: left;
            }

            li a {
                display: block;
                color: white;
                text-align: center;
                padding: 14px 16px;
                text-decoration: none;
            }

            li a:hover {
                background-color: #111;
            }
        </style>

Este código CSS elimina las viñetas de la lista, establece el color de fondo, el color del texto y define el comportamiento cuando el ratón pasa por encima.

Dreamweaver CS6 Intermedio - Cómo hacer un menú desplegable, Parte 1

Paso 4: Añadir Más Estilo (Opcional)

Puedes personalizar aún más el menú. Por ejemplo, puedes cambiar los colores, añadir bordes o usar fuentes diferentes. Experimenta con diferentes propiedades CSS. Por ejemplo, modifica el valor de background-color para ver diferentes colores.

Puedes añadir un borde inferior al menú:


        ul {
            border-bottom: 1px solid #ddd;
        }

Paso 5: Guardar y Previsualizar

Finalmente, guarda el archivo HTML. Luego, previsualiza el archivo en un navegador web. Ve a Archivo > Previsualizar en el navegador. Selecciona tu navegador preferido.

Deberías ver tu menú estilizado en el navegador. Si algo no funciona, revisa el código HTML y CSS cuidadosamente. Asegúrate de que no haya errores de sintaxis.

¡Enhorabuena! Has creado un menú básico en Dreamweaver. Puedes usar estos pasos como base para crear menús más complejos y personalizados.