Dreamweaver CC 2017 esencial

Barras de navegación en Dreamweaver CC 2017

¡Prueba gratis durante 10 días

nuestros 1197 cursos !

Prueba gratis Mostrar modalidades de suscripción
La forma más habitual de controlar la navegación de una web es mediante las barras de navegación, así que le vamos a dedicar un vídeo a la creación y organización de este tipo de elementos estructurales de las páginas web.

Transcripción

(hombre) Muchas veces, no se trata de añadir un solo enlace, se trata de añadir varios. La forma habitual de crear una estructura HTML que permita añadir enlaces, suele ser mediante la utilización de listas desordenadas, o sea, etiquetas UL, y dentro de esas etiquetas UL, etiquetas LI cada una por cada uno de los enlaces que utilicemos. Vamos a ver como hacer esto. Lo primero que necesito es explicarle al HTML que yo voy a crear un elemento de navegación, y para ello hay una etiqueta que se llama "Navigation". Esa etiqueta Nav, es la que sirve para meter enlaces de navegación, voy a irme a este header, y dentro del header left, dentro de él, de hecho, casi mejor después del logotipo aquí, voy a seleccionar esa etiqueta Nav, y voy a pedir que me la añada después. Y en este punto, voy a ir añadiendo entonces los distintos elementos. Voy a borrar el contenido que se ha añadido, voy a seleccionarlo y teniéndolo seleccionado, me aseguro de que está en el Dom, voy a pulsar sobre UL, listas sin ordenar, ya está añadido ese UL y además me ha añadido un LI. Bien, y ahora dentro de él voy a meter un hiperlink, y lo voy a meter anidado dentro. En este hiperlink voy a añadir eventos como título, lo voy a vincular a la página eventos, y hay que tener en cuenta que es una buena costumbre primero crear la página y luego hacer el link. Porque de hecho ahora mismo estoy haciendo un link a una página que no existe. Voy a ponerle como título "Listado de carreras" y voy a pulsar en aceptar. Me ha añadido ya el primero de esos elementos. Y ahora se trata de ir añadiendo más, seleccionaré primero la etiqueta LU y volveré a añadir un elemento de lista que colocaré dentro, o mejor todavía, pulso Esc para volver atrás, selecciono el LI, añadir elemento de lista, que lo añada después dentro de él añadiré otro hiperlink que esté anidado dentro, aquí en este hiperlink voy a conectar con resultados, y de hecho, haré que cargue la página resultados HTML con título, "Página de resultados" y así puedo seguir añadiendo y añadiendo, una y otra vez. Sí que es cierto que me va añadiendo otros textos que tengo que eliminar, a mi este colocar aquí es un poco difícil hacer las selecciones, puedo ir borrando ese texto. Cuando hacemos algo como lo que estoy haciendo, editar sobre la propia pantalla, suele ocurrir que aparecen etiquetas raras, es bueno dividir y asegurarme de que no tengo ninguna etiqueta. Aparece un pequeño espacio indivisible y personalmente, prefiero eliminarlo. Otra opción, puedo copiar y pegar, entonces puedo copiar, añadir debajo a Info HTML, título "Información relevante", y aquí "Info del corredor". Vista en vivo, y aquí vemos todos estos enlaces. Esta sería la forma correcta de crear un menú de navegación. Para darle un poco más de gracia, pues como siempre, tenemos los estilos CSS, y dentro de estos estilos CSS, tenemos el Header Nav UL, LI, A, qué es, precisamente que está definido que tenga ese color oscuro que salga sin decoración. Voy a volverme a la vista de código, y voy a irme, de hecho, a los estilos CSS, y en concreto, a ese estilo CSS. Aquí es donde estoy definiendo que salga ese color sin decoración y con una línea en la parte inferior. De hecho, también hago que cuando estoy en una página concreta, ese elemento en concreto aparezca remarcado, y también puedo hacer que cambie de color cuando pase por encima, y eso es tan fácil, como, sobre esa etiqueta A añadir el modifivador Hover, y aquí, le voy a cambiar el color y hacer que salga de color naranja. Voy a hacer que el color del texto salga también en color naranja, y voy a eliminar el resto de código que no necesito. ¿Qué habré conseguido? Pues que ahora cuando pase por encima aparece de color naranja, y si además quiero que en la página donde estoy aparezca remarcado en naranja y además, un poco más alto, pues entonces para eso, ya me ocupé de en el código, de añadir la clase Selected, esta clase va a servirme precisamente para eso, para conseguir remarcar cual de todos esos es el que está seleccionado. Y para ello lo que puedo hacer es pulsar en el más y empezar a escribir ese Selected, aquí me aparece esa clase, la selecciono, y aquí vemos como efectivamente aparece remarcado. Ya he conseguido tener un menú de navegación en el que aparece elemento seleccionado, el menú de la página donde estoy marcado y además, que es activo, que me demuestra que puedo hacer clic sobre él haciendo cambios de color al pasar por encima.

Dreamweaver CC 2017 esencial

Crea sitios web gracias al software de Adobe, Dreamweaver CC 2017. Con este repaso esencial a sus fundamentos podrás crear páginas responsive y mostrar tus contenidos a la última.

6:11 horas (78 Videos)
Actualmente no hay comentarios.
 

Este curso video2brain está disponible como descarga y para ser visualizado online. ¡Pero no hace falta que decidas entre las dos opciones! Al comprar el curso, disfrutarás de ambas posibilidades.

La descarga te permite ver las lecciones sin estar conectado/a a internet y supone una navegación fácil y ágil entre capítulo y capítulo. Si vas a trabajar en diferentes ordenadores o si no quieres descargarte el curso completo, entra en la web con tus datos de acceso y disfruta directamente de tus vídeos online. Te deseamos que disfrutes de este curso y te resulte de mucha utilidad.

Estamos a tu disposición si tienes cualquier tipo de duda o pregunta.