Dreamweaver CC 2017 esencial

Crear listas ordenadas y desordenadas en Dreamweaver CC 2017

¡Prueba gratis durante 10 días

nuestros 1240 cursos !

Prueba gratis Mostrar modalidades de suscripción
Las listas sirven para explicar al navegador y a los buscadores que, en un punto concreto de las páginas, hay series de elementos que deben tener características comunes, y sirven desde para dar información sobre muchos elementos hasta para hacer barras de navegación.

Transcripción

En un vídeo anterior hemos aprendido a crear listas desordenadas. Vamos a ver otras formas distintas de trabajar con listas. En realidad hacer listas ordenadas es tan fácil como lo que hicimos antes pulsar lista ordenada y luego ir añadiendo "li". "Elementos de la lista" Pero hay otras formas distintas de trabajar. Voy a irme, por ejemplo, a la vista de "Diseño" y dentro de esta vista de diseño pues yo puedo ir escribiendo textos, por ejemplo "resultado primero" "resultado segundo" "resultado tercero". y puedo ponerle también un rótulo, puedo poner, antes de nada, "Resultados" bien. Si abro el panel de "Propiedades", dentro de este panel de propiedades, tengo aquí dos botones que son interesantes, "Lista ordenada" y "Lista sin ordenar". Si hago clic en Lista ordenada teniendo seleccionados estos tres elementos, que, en realidad, esos tres elementos son tres etiquetas P según los he ido creando, me los van a transformar y va a añadir las etiquetas necesarias, y, de hecho, si me voy a la vista de código vemos que, efectivamente, me creó automáticamente, la etiqueta OL y dentro de ellas, las distintas etiquetas LI. Es una forma muy fácil de trabajar. Si me voy a En vivo, bueno pues aquí veo esos mismos elementos y puedo, también, irlos seleccionando Si hago selecciones sobre estos objetos vemos que de todas formas no tengo opciones, tengo que utilizar el panel de "Propiedades" para hacer que, por ejemplo, dejen de ser partes de una lista, y para ello, pues lo que tendré que hacer es seleccionarlos y una vez que he seleccionado uno de estos elementos puedo hacer clic sobre "Anular sangría" y eso hace que me lo quite del listado y me lo ponga como un elemento P. Otra posibilidad también es que yo, en un momento dado, quiera meter otra lista dentro de esta primera lista y a partir de aquí, puedo seguir añadiendo otros elementos. Vamos a añadir, de hecho, otro tipo de lista. Vamos a añadir una lista UL, pero lo voy a hacer de una manera distinta. Supongamos que yo tengo un párrafo y dentro de ese párrafo he añadido un texto determinado. Este texto, que ademas, voy a partir en varias etiquetas P, Así que haré clic sobre él y haré intros para separarlo en trozos. Volviendo de nuevo a la vista de código veo que, efectivamente, tengo varias etiquetas P, aunque le cueste un poco refrescar la vista en vivo pero aquí podemos verlo. Bueno pues, vamos a tener herramientas muy simples que me van a permitir convertir cada uno de estos párrafos, cada una de esta etiquetas P en elementos de una lista. Solo necesito hacer clic en cualquiera de ellos y, con el panel de propiedades seleccionar el tipo de lista que quiero crear. Si tenía una lista ordenada, bueno, pues ahora voy a añadir una lista desordenada. Pulso en él y aquí se ve que me añade el pequeño bolardo que me indica que efectivamente lo es. Si voy seleccionando en los distintos párrafos y voy dando al botón pues, efectivamente, se nota que va cambiando la disposición de los elementos y los va poniendo juntos y de hecho, si vuelvo a la vista de código se puede observar que, efectivamente, me ha añadido toda esta lista. Incluso esas listas se pueden anidar, yo podría tener aquí un elemento LI más y podría, pues fácilmente, cortando y pegando añadir toda esa lista, con el tabulador lo recoloco, podría añadir toda esa lista como un elemento más dentro de la lista ordenada. Y aquí, pues estamos viendo como efectivamente me la ha montado dentro de ese 4. Estas listas van a poder ser organizadas también, van a poder ver modificado su aspecto fácilmente desde el diseñador CSS. y así desde él, pues puedo crear un selector específico o puedo utilizar el LI, sin más. En mi caso voy a crear un selector específico para que las listas que no estén ordenadas no aparezcan estos pequeños bolardos. Para ello voy a pulsar en el "+" y efectivamente, voy a pedir que para todos los UL, LI, añado ese pequeño LI, y voy a pedir que tengan una propiedad "list-style" con poner solamente el LI ya me sirve, y sobre el cual puedo dar diferentes opciones. Por ejemplo, pues podría hacer que fuese un cuadrado en vez de un círculo Aquí vemos como, efectivamente, lo cambia o, en mi caso qué es lo que quiero, bueno, pues que sea ninguno así que escribo "none" y efectivamente desaparece. Hay más opciones que se pueden añadir a cualquier lista. Por ejemplo la distancia que tiene que haber entre unos elementos y otros. Una buena forma de añadir esa distancia es utilizar la propiedad "line-height". En vez de utilizar "paddings" o márgenes que son más propios de los elementos de bloque, pues, en realidad como digo lo que hago es utilizar este "line-height" y sobre él, pues poner un valor que sea un poco grande, por ejemplo "2em". Aquí vemos como, efectivamente, ahora me ha separado todos eso elementos de lista. No tengo por qué quedarme solamente con estos objetos, en cualquier momento puedo seleccionar diferentes posibilidades de ancho o de alto, de borde, de color de fondo y hacer, pues por ejemplo, que todos estos elementos de lista me los ponga como cuadrados con una sombra, por poner un ejemplo.

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.