All Articles Dreamweaver
Dreamweaver CS5: Creación de un menú de navegación a partir de una lista
Iain Anderson on Sat, January 7th | 0 comments
When it comes down to it a Nav Menu is basically a list. Iain Anderson takes us through the basics of building one such menu from a list in Dreamweaver CS5.

Cuando se construye un sitio web de las mejores prácticas, debe construir sus menús de navegación mediante listas, si es posible. Theyre semánticamente exacta (un menú es una lista, después de todo) y la CSS hace que sean fáciles de peinar. Vamos a echar un vistazo a cómo funciona una lista de navegación bajo el capó. La enfermedad esté utilizando Dreamweaver en vista de código, pero no dude en seguir adelante con un editor de texto directamente si lo desea.

Paso 1 - Crear una lista

Esta parte es fácil: Crear un nuevo archivo HTML, sin plantilla, y simplemente escriba los elementos en el menú. Incluya cada elemento de la lista

Usted debe terminar con algo como esto: <ul>
  <li>Home</li>
  <li>Products</li>
  <li>Support</li>
  <li>Team</li>
  <li>Contact Us</li>
</ul>

Sin embargo, usted quiere asegurarse de que cada elemento vincula a algo que será importante a medida que construimos la CSS. Por lo tanto, añadir enlaces a el carácter #, para crear algo como esto:

<ul>
  <li><a href="#">Home</a></li>
  <li><a href="#">Products</a></li>
  <li><a href="#">Support</a></li>
  <li><a href="#">Team</a></li>
  <li><a href="#">Contact Us</a></li>
</ul>

Paso 2 - Enlace a un archivo CSS externo

En el panel CSS, pulse el botón Nueva regla CSS en la parte inferior del panel (el documento con el signo más). Crear un estilo de ID con el nombre navlist y optar por crear un archivo de hoja de estilos. En el cuadro de diálogo que aparece, el nombre del archivo style.css . Siempre es mejor usar una hoja de estilos externa, aún cuando la experimentación.

No necesitamos para definir cualquier cosa usando el cuadro de diálogo que aparece a continuación, por lo que sólo tiene que pulsar en Aceptar. Tendrás que crear una hoja de estilo con una definición básica, el estilo en blanco. Ver haciendo clic en style.css justo por encima de su documento, junto al código fuente destacó las palabras.

Paso 3 - Añadir un poco de las reglas básicas de CSS

Tenemos que especificar que la lista tiene el navlist ID, para que podamos objetivo. En el HTML, añadir id=navlist a la

Ahora podemos seguir adelante en la CSS. Youll probablemente querrá ajustar el color de fondo, anchura, bordes y márgenes para empezar, y usted quiere pensar en la forma de construir los selectores CSS. Si utiliza #navlist li , youll acceder al elemento de la lista de la lista de navegación. Aún mejor, el objetivo #navlist li a apuntar los enlaces dentro de su lista. Adición de relleno para los convierte en un objetivo más grande, mientras que la adición de relleno a un elemento de la lista no lo haría. Proveedores:

# {Navlist

list-style-name: ninguno;

margin: 0;

padding: 0;

ancho: 200px;

}

# Navlist li {

margin: 5px;

}

# Navlist li a {

background-color: # 222;

color: # eee;

padding: 10px;

text-decoration: none;

display: block;

}


La

El #navlist li

Por último, el

Paso 4 - Agregue un poco de las reglas CSS hover

Para hacer la lista más reactivo, añadir una regla emergente:

# Navlist li a: hover {

background-color: # 444;

color: # EE2;

}

Paso 5 - Marcar la página activa

Su común en este tipo de páginas para marcar la página activa, con un estilo de clase móviles, por ejemplo, clase = activo, que se coloca en la página actual. Sin embargo, esto significa que el bloque de menú es diferente en cada página. Su más conveniente etiquetar cada vínculo en el HTML con una clase diferente, a continuación, agregar una clase específica de la página de la etiqueta del cuerpo, y cogerlos a todos con una sola regla CSS. Algo como esto:

<body id="bodypage1">

  <li class="page1"><a href="#">Home</a></li>

  <li class="page2"><a href="#">Products</a></li>

El CSS correspondiente:

# Bodypage1. Page1 uno, # bodypage2. Página 2 A, # bodypage3. Página 3 A, # bodypage4. Página 4 A, # bodypage5. Página 5 a {

background-color: # 555;

color: # EE2;

}

De esta manera, sólo es necesario cambiar la clase en el cuerpo de la etiqueta en cada página. Sneaky, pero funciona.

Hay muchos trucos, muchos más, pero eso es todo por ahora. Como usted pudo haber visto en el video tutorial Explorando CSS, para hacer la lista horizontal, todo lo que necesita es display: inline aplicada a la li elemento, por lo que explorar si lo desea. La próxima vez, y ver algunas opciones más exóticas.

acabados product.png

Comments (0)

You must be logged in to comment. Login Now

Feedback
Course Advisor
Don't Know Where To Start?
Ask A Course Advisor
Ask Us!
Copy the link below and paste it into an email, forum, or Facebook to share this with your friends.
Make money when you share our links
Become a macProVideo.com Affiliate!
The current affiliate rate is: 50%
Classes Start Next Week!
Live 8-week Online Certification Classes for: