oletusWEBos.es - Lecciones paso a paso para crear tu web. Tutoriales de Dreamweaver, HTML y CSS
Curso Dreamweaver - Lección 5: Menú de Navegación
¿Como creamos el menú de navegación?
En primer lugar sombreamos con el cursor del raton todas las palabras de la columna de la izquierda que nos vienen en nuestra plantilla (ventana Diseño)y como nuestra web trata sobre las motos pues escribiremos MARCAS que será una sección de nuestra web. Ahora vamos a poner 3 marcas de motos para nuestro ejemplo y eso lo haremos mediante las etiquetas <ul> y <li>, te explico que significan estas etiquetas:
Las listas no ordenadas van dentro de la etiqueta <ul> y de su cierre </ul>. Cada punto que queramos añadir a la lista, lo haremos dentro de la etiqueta <li> y su cierre </li>. Si quisieramos una lista ordenada (en cada elemento de la lista iría un número en lugar de un punto) en vez de <ul> y su cierre </ul> pondríamos las etiquetas <ol> y su cierre </ol>.
Despues de esta pequeña aclaración nos situamos justo debajo de donde hemos escrito MARCAS y en la ventana del código html (no en la de diseño escribimos lo siguiente):
<ul>
<li>Honda</li>
<li>Aprilia</li>
<li>Ducati</li>
</ul>
Para que lo veas mejor te pongo una captura de pantalla:
1.- Escribimos MARCAS en la ventana diseño.
2.- Escribimos el código en la ventana HTML.
Ahora nos situamos con el cursor del raton justo debajo de Ducati (en la ventana de Diseño)y ponemos ACCESORIOS que será otra sección de nuestra web. Y como en el paso anterior justo debajo de donde hemos escrito ACCESORIOS vamos a la ventana del código html (no en la de diseño escribimos lo siguiente):
<ul>
<li>Cascos</li>
<li>Monos</li>
<li>Botas</li>
</ul>
Si has echo todo correctamente y si pulsas en el botón de vista previa te debería haber quedado algo así:
Quiero aprender más!!!
- Avanzar a Lección 5: Menú de Navegación II
- Retroceder a Lección 5: Estilos CSS II
©oletusWEBos 2009 all right reserved | Contácta con oletusWEBos.es
Design By: JTole®