X Course Advisor FREE Course Advisor
(Close)
Watch Tutorials
macProVideo.com
Close
Dreamweaver CS5: Creación de un menú de navegación a partir de una lista
Traducido por Google Translate

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

Iain Anderson

Iain Anderson | Articles by this author

Iain Anderson is an editor, animator, designer, developer and Apple Certified Trainer based in Brisbane, Australia. He has taught privately and in tertiary institutions, and has freelanced for Microsoft and the Queensland Government. Comfortable with anything from Quartz Composer to Second Life and Final Cut Pro to Adobe Creative Suite, he has laid out books, booklets, brochures and business cards; retouched magazine covers and product packaging, shot and edited short films and animated for HD broadcast TV, film festivals and for the web.

Comments

You must be logged in to post a comment.
Create an Account  Login Now

What is macProVideo.com?

macProVideo.com is an online education community featuring Tutorial-Videos & Training for popular Audio & Video Applications including Adobe CS, Logic Studio, Final Cut Studio, and more.
© 2018 macProVideo.com
a division of NonLinear Educating Inc.
Link